Code

Props

Props	Data Type	Required
className	string	❌
label	string	✅
info	string	❌
structure	-HTML tags -Custom Components (Radio)	✅
helptext	string	❌
disabled	boolean	❌
error	boolean	❌
errorMessage	string	❌
onChange	function event	❌

Event Response

This component is not sending any response, instead, it is just facilitating the individual Checkbox components events.

onChange

import React, {useState} from 'react';
import {
  RadioGroup,
  Radio
} from '@2600hz/sds-react-components';

const Example = ()=>{
    const [radioSelection, setRadioSelection] = useState(selectedItem);
    
    const updateState = (e)=>{
        setRadioSelection(e.value);
    }
    
    return(
        <RadioGroup
          className="checkboxGroupExample"
          errorMessage="Optional error message can offer better guidance."
          helptext="Optional help text can offer additional guidance."
          info="Optional Info Message"
          label="Checkgroup label text"
          onChange={() => {}}
        >
          <Radio
            id="example1"
            label="Example 1"
            value="example1"
            checked={checkboxList.example1}
          />
          <Radio
            id="example2"
            label="Example 2"
            value="example2"
            checked={checkboxList.example2}
          />
          <Radio
            checked={checkboxList.example3}
            id="example3"
            label="Example 3"
            value="example3"
          />
        </RadioGroup>
    )
}

To make this component to work properly, in the case the developer wants to have one of the items already selected, make sure that only one of the items has a true value, because of radio-buttons standard behavior (There cannot be more than one selected)

Components Dependency

For this component elaboration there were used the following internal components:

• Label

• Radio

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

React

Storybook