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>
    );
}

Size

Result

Loading...

Live Editor

<> <RadioGroup label="Small Radio Group" defaultValue="pears" size="sm" className="mb-3"> <RadioGroup.Item value="apples" label="Apples" /> <RadioGroup.Item value="pears" label="Pears" /> <RadioGroup.Item value="bananas" label="Bananas" /> </RadioGroup> <RadioGroup label="Medium Radio Group" defaultValue="pears" size="md" className="mb-3"> <RadioGroup.Item value="apples" label="Apples" /> <RadioGroup.Item value="pears" label="Pears" /> <RadioGroup.Item value="bananas" label="Bananas" /> </RadioGroup> <RadioGroup label="Large Radio Group" defaultValue="pears" size="lg" className="mb-3"> <RadioGroup.Item value="apples" label="Apples" /> <RadioGroup.Item value="pears" label="Pears" /> <RadioGroup.Item value="bananas" label="Bananas" /> </RadioGroup> <RadioGroup label="Extra Large Radio Group" defaultValue="pears" size="xl" className="mb-3"> <RadioGroup.Item value="apples" label="Apples" /> <RadioGroup.Item value="pears" label="Pears" /> <RadioGroup.Item value="bananas" label="Bananas" /> </RadioGroup> </>

<>
    <RadioGroup label="Small Radio Group" defaultValue="pears" size="sm" className="mb-3">
        <RadioGroup.Item value="apples" label="Apples" />
        <RadioGroup.Item value="pears" label="Pears" />
        <RadioGroup.Item value="bananas" label="Bananas" />
    </RadioGroup>
    <RadioGroup label="Medium Radio Group" defaultValue="pears" size="md" className="mb-3">
        <RadioGroup.Item value="apples" label="Apples" />
        <RadioGroup.Item value="pears" label="Pears" />
        <RadioGroup.Item value="bananas" label="Bananas" />
    </RadioGroup>
    <RadioGroup label="Large Radio Group" defaultValue="pears" size="lg" className="mb-3">
        <RadioGroup.Item value="apples" label="Apples" />
        <RadioGroup.Item value="pears" label="Pears" />
        <RadioGroup.Item value="bananas" label="Bananas" />
    </RadioGroup>
    <RadioGroup label="Extra Large Radio Group" defaultValue="pears" size="xl" className="mb-3">
        <RadioGroup.Item value="apples" label="Apples" />
        <RadioGroup.Item value="pears" label="Pears" />
        <RadioGroup.Item value="bananas" label="Bananas" />
    </RadioGroup>
</>

States

Result

Loading...

Live Editor

<> <RadioGroup label="Valid Radio Group" isValid validText="Valid text" defaultValue="pears" className="mb-3" > <RadioGroup.Item value="apples" label="Apples" /> <RadioGroup.Item value="pears" label="Pears" /> <RadioGroup.Item value="bananas" label="Bananas" /> </RadioGroup> <RadioGroup label="Error Radio Group" isInvalid errorText="Error text" defaultValue="pears" className="mb-3" > <RadioGroup.Item value="apples" label="Apples" /> <RadioGroup.Item value="pears" label="Pears" /> <RadioGroup.Item value="bananas" label="Bananas" /> </RadioGroup> <RadioGroup label="Warning Radio Group" isWarning warningText="Warning Text" defaultValue="pears" className="mb-3" > <RadioGroup.Item value="apples" label="Apples" /> <RadioGroup.Item value="pears" label="Pears" /> <RadioGroup.Item value="bananas" label="Bananas" /> </RadioGroup> <RadioGroup label="Edited Radio Group" isEdited editedText="Edited Text" defaultValue="pears" className="mb-3" > <RadioGroup.Item value="apples" label="Apples" /> <RadioGroup.Item value="pears" label="Pears" /> <RadioGroup.Item value="bananas" label="Bananas" /> </RadioGroup> </>

<>
    <RadioGroup
        label="Valid Radio Group"
        isValid
        validText="Valid text"
        defaultValue="pears"
        className="mb-3"
    >
        <RadioGroup.Item value="apples" label="Apples" />
        <RadioGroup.Item value="pears" label="Pears" />
        <RadioGroup.Item value="bananas" label="Bananas" />
    </RadioGroup>
    <RadioGroup
        label="Error Radio Group"
        isInvalid
        errorText="Error text"
        defaultValue="pears"
        className="mb-3"
    >
        <RadioGroup.Item value="apples" label="Apples" />
        <RadioGroup.Item value="pears" label="Pears" />
        <RadioGroup.Item value="bananas" label="Bananas" />
    </RadioGroup>
    <RadioGroup
        label="Warning Radio Group"
        isWarning
        warningText="Warning Text"
        defaultValue="pears"
        className="mb-3"
    >
        <RadioGroup.Item value="apples" label="Apples" />
        <RadioGroup.Item value="pears" label="Pears" />
        <RadioGroup.Item value="bananas" label="Bananas" />
    </RadioGroup>
    <RadioGroup
        label="Edited Radio Group"
        isEdited
        editedText="Edited Text"
        defaultValue="pears"
        className="mb-3"
    >
        <RadioGroup.Item value="apples" label="Apples" />
        <RadioGroup.Item value="pears" label="Pears" />
        <RadioGroup.Item value="bananas" label="Bananas" />
    </RadioGroup>
</>

Light

Used when the radio group is on a dark background

Result

Loading...

Live Editor

<div className="p-3 bg-primary"> <RadioGroup label="Light Radio Group" defaultValue="pears" light> <RadioGroup.Item value="apples" label="Apples" /> <RadioGroup.Item value="pears" label="Pears" /> <RadioGroup.Item value="bananas" label="Bananas" /> </RadioGroup> </div>

<div className="p-3 bg-primary">
    <RadioGroup label="Light Radio Group" defaultValue="pears" light>
        <RadioGroup.Item value="apples" label="Apples" />
        <RadioGroup.Item value="pears" label="Pears" />
        <RadioGroup.Item value="bananas" label="Bananas" />
    </RadioGroup>
</div>

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