Radio

Displays a radio button and a label.

Props

Name	Type	Required	Default	Description
inline	boolean	No	false	Display the radio button inline

Variations

Multiple radio buttons

Result

Loading...

Live Editor

function VariationMultipleRadioButtons() {
    const [ value, setValue ] = React.useState('option-002');
    return (
        <>
            <Radio
                name="checkbox-simple-option"
                value="option-001"
                id="checkbox-simple-001"
                checked={value === 'option-001'}
                onChange={() => setValue('option-001')}
            >
                Option 001
            </Radio>
            <Radio
                name="checkbox-simple-option"
                value="option-002"
                id="checkbox-simple-002"
                checked={value === 'option-002'}
                onChange={() => setValue('option-002')}
            >
                Option 002
            </Radio>
        </>
    )
}

Form element with radio buttons

Result

Loading...

Live Editor

function ExampleFormElementRadioButtons() {
    const [ value, setValue ] = React.useState('option-002');
    return (
        <FormElement
            label="Form element with error"
            component="fieldset"
            labelComponent="legend"
        >
            <Radio
                name="checkbox-inline-option"
                value="option-001"
                id="checkbox-inline-001"
                inline
                checked={value === 'option-001'}
                onChange={() => setValue('option-001')}
            >
                Option 001
            </Radio>
            <Radio
                name="checkbox-inline-option"
                value="option-002"
                id="checkbox-inline-002"
                inline
                checked={value === 'option-002'}
                onChange={() => setValue('option-002')}
            >
                Option 002
            </Radio>
        </FormElement>
    )
}

Form element with error

Result

Loading...

Live Editor

function ExampleFormElementWithError() {
    const [ value, setValue ] = React.useState('option-002');
    return (
        <FormElement
            label="Form element with error"
            hasError
            component="fieldset"
            labelComponent="legend"
        >
            <Radio
                name="checkbox-form-element-error-option"
                value="option-001"
                id="checkbox-form-element-error-001"
                checked={value === 'option-001'}
                onChange={() => setValue('option-001')}
            >
                Option 001
            </Radio>
            <Radio
                name="checkbox-form-element-error-option"
                value="option-002"
                id="checkbox-form-element-error-002"
                checked={value === 'option-002'}
                onChange={() => setValue('option-002')}
            >
                Option 002
            </Radio>
        </FormElement>
    );
}