Skip to main content

CheckboxGroup

Uncontrolled​

Result
Loading...
Live Editor
<CheckboxGroup label="Uncontrolled Checkbox Group" defaultValue={['pears', 'strawberries']}>
	<CheckboxGroup.Item value="apples" label="Apples" />
	<CheckboxGroup.Item value="pears" label="Pears" />
	<CheckboxGroup.Item value="bananas" label="Bananas" />
	<CheckboxGroup.Item value="melons" label="Melons" />
	<CheckboxGroup.Item value="strawberries" label="Strawberries" />
</CheckboxGroup>

Controlled​

Result
Loading...
Live Editor
function Example() {
	const [value, setValue] = useState([]);

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

Size​

Result
Loading...
Live Editor
<>
	<CheckboxGroup label="Small Checkbox Group" value="pears" size="sm" className="mb-3">
		<CheckboxGroup.Item value="apples" label="Apples" />
		<CheckboxGroup.Item value="pears" label="Pears" />
		<CheckboxGroup.Item value="bananas" label="Bananas" />
	</CheckboxGroup>
	<CheckboxGroup label="Medium Checkbox Group" value="pears" size="md" className="mb-3">
		<CheckboxGroup.Item value="apples" label="Apples" />
		<CheckboxGroup.Item value="pears" label="Pears" />
		<CheckboxGroup.Item value="bananas" label="Bananas" />
	</CheckboxGroup>
	<CheckboxGroup label="Large Checkbox Group" value="pears" size="lg" className="mb-3">
		<CheckboxGroup.Item value="apples" label="Apples" />
		<CheckboxGroup.Item value="pears" label="Pears" />
		<CheckboxGroup.Item value="bananas" label="Bananas" />
	</CheckboxGroup>
	<CheckboxGroup label="Extra Large Checkbox Group" value="pears" size="xl" className="mb-3">
		<CheckboxGroup.Item value="apples" label="Apples" />
		<CheckboxGroup.Item value="pears" label="Pears" />
		<CheckboxGroup.Item value="bananas" label="Bananas" />
	</CheckboxGroup>
</>

States​

Result
Loading...
Live Editor
<>
	<CheckboxGroup
		label="Valid Checkbox Group"
		value="pears"
		isValid
		validText="Valid text"
		className="mb-3"
	>
		<CheckboxGroup.Item value="apples" label="Apples" />
		<CheckboxGroup.Item value="pears" label="Pears" />
		<CheckboxGroup.Item value="bananas" label="Bananas" />
	</CheckboxGroup>
	<CheckboxGroup
		label="Error Checkbox Group"
		value="pears"
		isInvalid
		errorText="Error text"
		className="mb-3"
	>
		<CheckboxGroup.Item value="apples" label="Apples" />
		<CheckboxGroup.Item value="pears" label="Pears" />
		<CheckboxGroup.Item value="bananas" label="Bananas" />
	</CheckboxGroup>
	<CheckboxGroup
		label="Warning Checkbox Group"
		value="pears"
		isWarning
		warningText="Warning Text"
		className="mb-3"
	>
		<CheckboxGroup.Item value="apples" label="Apples" />
		<CheckboxGroup.Item value="pears" label="Pears" />
		<CheckboxGroup.Item value="bananas" label="Bananas" />
	</CheckboxGroup>
	<CheckboxGroup
		label="Edited Checkbox Group"
		value="pears"
		isEdited
		editedText="Edited Text"
		className="mb-3"
	>
		<CheckboxGroup.Item value="apples" label="Apples" />
		<CheckboxGroup.Item value="pears" label="Pears" />
		<CheckboxGroup.Item value="bananas" label="Bananas" />
	</CheckboxGroup>
</>

Light​

Used when the checkbox group is on a dark background

Result
Loading...
Live Editor
<div className="p-3 bg-primary">
	<CheckboxGroup label="Light Checkbox Group" value="pears" light className="mb-3">
		<CheckboxGroup.Item value="apples" label="Apples" />
		<CheckboxGroup.Item value="pears" label="Pears" />
		<CheckboxGroup.Item value="bananas" label="Bananas" />
	</CheckboxGroup>
</div>

Analytics​

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

export default {
	value: 'CheckboxGroup',
	actions: {
		onChange: { type: 'CHECKBOXGROUP_CHANGE', payload: 'Change' },
	},
};

Props​