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

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​