Radio-Example.md

Radio

Radio is a simple React component that acts like a radio button behavior, but allows a value to be placed in a state variable.

Browser Support

We support all browsers and environments where React runs.

Props

The Radio component uses the following props:

1. name: A unique name for this field with corresponding name in the parent component's state example name="subject"
2. value: the value of the radio button (the state variable that holds the value) _example value={subject}
3. onChange: function in the parent component to catch/store state changes example onChange={handleChange}
4. selectedValue: the value of state variable when the Radio button when selected
5. text: a label (String or component) that is displayed after the CheckBox

If there are several radio buttons and it is desired that they operate as a group (only one radio button can be selected), the name and match props for all radio buttons must have the same value.

CSS Files

The following CSS file will need to be imported into the file that uses this Radio component. The import would be, if it is not be changed:

import '../node_modules/simple-widgets/lib/sw-checkboxRadio.css';

For more information on CSS files, see Using CSS.

sw-checkboxRadio.css

sw-radio_defaultStyle = the styling for the radio button.

.sw-radio_defaultStyle {
      border: none;
      background-color: white;
      border-radius: 25px;
}

Example

import { Radio } from 'simple-widgets';

const YourComponent = (props) => {
   const [year, setYear] = useState('');

   return (
      <div>
        <Radio  selectedValue="1"
                name="year"
                value={year}
                onChange={(event) => setYear(event.target.value)}>Year 1</Radio>
        <Radio  selectedValue="2"
                name="year"
                value={year}
                onChange={(event) => setYear(event.target.value)}>Year 2</Radio>
     </div>
   )
}

Since the two radio buttons use the same names in the name prop and the match prop, they will be treated as a group. If the user clicks on the first radio button, a 1 will be placed in the state variable year. If the user clicks on the second radio button, a 2 will be placed in the state variable year.

Versioning and Stability

We want Radio to be a stable dependency that’s easy to keep current. We take the same approach to versioning as React.js itself: React Versioning Scheme.

Thanks

To CPC project team where this was developed.