Skip to main content

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>

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

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>
</>

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>
</>

Button​

Set variant="button" to render each item as a full-width selectable tile.

Result
Loading...
Live Editor
<RadioGroup label="Button Radio Group" variant="button" defaultValue="pears">
	<RadioGroup.Item value="apples" label="Apples" />
	<RadioGroup.Item value="pears" label="Pears" />
	<RadioGroup.Item value="bananas" label="Bananas" />
	<RadioGroup.Item value="melons" label="Melons" disabled />
</RadioGroup>

Horizontal​

Set orientation="horizontal" to place the items side by side. Combined with variant="button", the tiles share the row equally and wrap on narrow screens.

Result
Loading...
Live Editor
<>
	<RadioGroup label="Horizontal Radio Group" orientation="horizontal" 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="Horizontal Button Radio Group"
		variant="button"
		orientation="horizontal"
		defaultValue="pears"
	>
		<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>

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​