RadioGroup

The RadioGroup.Item component is used to create radios within the group. The props used for RadioGroup.Item are the same as the props used for Checkbox (value is required and becomes the value of the RadioGroup).

Uncontrolled

Result

Loading...

Live Editor

<RadioGroup label="Uncontrolled Radio Group" defaultValue={'pears'}> <RadioGroup.Item value="apples" label="Apples" description="Juice" /> <RadioGroup.Item value="pears" label="Pears" /> <RadioGroup.Item value="bananas" label="Bananas" /> <RadioGroup.Item value="melons" label="Melons" /> <RadioGroup.Item value="strawberries" label="Strawberries" /> </RadioGroup>

<RadioGroup label="Uncontrolled Radio Group" defaultValue={'pears'}>
    <RadioGroup.Item value="apples" label="Apples" description="Juice" />
    <RadioGroup.Item value="pears" label="Pears" />
    <RadioGroup.Item value="bananas" label="Bananas" />
    <RadioGroup.Item value="melons" label="Melons" />
    <RadioGroup.Item value="strawberries" label="Strawberries" />
</RadioGroup>

Controlled

Result

Loading...

Live Editor

function Example() { const [value, setValue] = React.useState(''); return ( <RadioGroup label="Controlled Radio Group" value={value} onChange={setValue}> <RadioGroup.Item value="apples" label="Apples" /> <RadioGroup.Item value="pears" label="Pears" /> <RadioGroup.Item value="bananas" label="Bananas" /> <RadioGroup.Item value="melons" label="Melons" /> <RadioGroup.Item value="strawberries" label="Strawberries" /> </RadioGroup> ); }

function Example() {
    const [value, setValue] = React.useState('');

    return (
        <RadioGroup label="Controlled Radio Group" value={value} onChange={setValue}>
            <RadioGroup.Item value="apples" label="Apples" />
            <RadioGroup.Item value="pears" label="Pears" />
            <RadioGroup.Item value="bananas" label="Bananas" />
            <RadioGroup.Item value="melons" label="Melons" />
            <RadioGroup.Item value="strawberries" label="Strawberries" />
        </RadioGroup>
    );
}

Analytics

The RadioGroup component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'RadioGroup',
	actions: {
		onChange: { type: 'RADIOGROUP_CHANGE', payload: 'Change' },
	},
};

Props

RadioGroup

RadioGroup.Item