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>

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

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

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

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

<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