Radio is a control that allows the user to only choose one predefined option.
import React from 'react' import Radio from '../_radio' const RadioDefault = () => { const ref = React.createRef() return ( <div> <Radio label="Power" name="Group2" ref={ref} tabIndex={0} value="Power" /> <br /> <Radio defaultChecked={false} label="Nitro" name="Group2" value="Nitro" /> <br /> <Radio defaultChecked={false} label="Google" name="Group2" value="Google" /> </div> ) } export default RadioDefault
import React, { useState } from 'react' import Radio from '../_radio' const RadioCustom = (props) => { const [choice, setChoice] = useState('power') const handleOnChange = ({ target }) => { setChoice(target.value) } return ( <div> <p> {'Your choice is: '} <code>{choice}</code> </p> <br /> <Radio className="my_custom_class" label="Custom Power" {...props} > <input checked={choice === 'power'} name="custom" onChange={handleOnChange} type="radio" value="power" {...props} /> </Radio> <br /> <Radio className="my_custom_class" label="Custom Nitro" {...props} > <input checked={choice === 'nitro'} name="custom" onChange={handleOnChange} type="radio" value="nitro" {...props} /> </Radio> <br /> <Radio className="my_custom_class" label="Custom Google" {...props} > <input checked={choice === 'google'} name="custom" onChange={handleOnChange} type="radio" value="google" {...props} /> </Radio> </div> ) } export default RadioCustom
Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
import React from 'react' import { Radio } from '../..' const RadioError = () => { return ( <div> <Radio error label="Power" name="Group2" value="Power" /> </div> ) } export default RadioError
import React from 'react' import { Flex, Radio } from '../../' const RadioAlignment = () => { return ( <Flex> <Radio alignment="vertical" label="Power" marginRight="sm" name="Group2" tabIndex={0} value="Power" /> <br /> <Radio alignment="vertical" defaultChecked={false} label="Nitro" marginRight="sm" name="Group2" value="Nitro" /> <br /> <Radio alignment="vertical" defaultChecked={false} label="Google" name="Group2" value="Google" /> </Flex> ) } export default RadioAlignment
Try to avoid using if you have nested options.