Code

Props

Props	Data Type	Required
value	string	✅
id	string	✅
name	string	❌
label	string	✅
error	boolean	❌
disabled	boolean	❌
onChange	fuction event	❌

Event Response

Property	Data Type
id	string
name	string
label	string
value	string

onChange

Every time the user clicks on the Radio component, the onChange event is going to be executed together the custom function facilitated by the developer. Beside that, the developer can use the function event parameter to get information from the component, like if it was a native web checkbox.

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

const Example = ()=>{
    const [radioSelection, setRadioSelection] = useState(selectedItem);
    
    const updateState = (e)=>{
        setRadioSelection(e.value);
    }
    
    return(
        <div className='container'>
            <Radio 
                id='first' 
                value='element1' 
                label='Element 1' 
                onChange={updateState} 
            />
            <Radio 
                id='second' 
                value='element2' 
                label='Element 2'
                onChange={updateState} 
            />
        </div>
    )
}

Like in native input radios, to make them work properly it is necessary to write the same name in all the necessary Radio components. That way, it is going to avoid selecting more than one (Checkboxes intended function).

Components Dependency

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

• Label

Live Demo

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

React

Storybooksipster-react-component-storybook.netlify.app