Checkbox

Uncontrolled

Result

Loading...

Live Editor

<Checkbox label="Checkbox" defaultSelected />

<Checkbox label="Checkbox" defaultSelected />

Controlled

Result

Loading...

Live Editor

function Example() { const [isSelected, setIsSelected] = React.useState(false); return <Checkbox label="Checkbox" isSelected={isSelected} onChange={setIsSelected} />; }

function Example() {
    const [isSelected, setIsSelected] = React.useState(false);

    return <Checkbox label="Checkbox" isSelected={isSelected} onChange={setIsSelected} />;
}

Description

Result

Loading...

Live Editor

<Checkbox label="Checkbox" description="Checkbox description" />

<Checkbox label="Checkbox" description="Checkbox description" />

Indeterminate

Result

Loading...

Live Editor

<Checkbox label="Checkbox" defaultSelected isIndeterminate />

<Checkbox label="Checkbox" defaultSelected isIndeterminate />

Sizes

Result

Loading...

Live Editor

<> <Checkbox label="Small" size="sm" /> <Checkbox label="Medium" size="md" /> <Checkbox label="Large" size="lg" /> <Checkbox label="Extra Large" size="xl" /> </>

<>
    <Checkbox label="Small" size="sm" />
    <Checkbox label="Medium" size="md" />
    <Checkbox label="Large" size="lg" />
    <Checkbox label="Extra Large" size="xl" />
</>

States

Result

Loading...

Live Editor

<> <Checkbox label="Valid Checkbox" isValid validText="Valid text" /> <Checkbox label="Error Checkbox" isInvalid errorText="Error text" /> <Checkbox label="Warning Checkbox" isWarning warningText="Warning Text" /> <Checkbox label="Edited Checkbox" isEdited editedText="Edited Text" /> </>

<>
    <Checkbox label="Valid Checkbox" isValid validText="Valid text" />
    <Checkbox label="Error Checkbox" isInvalid errorText="Error text" />
    <Checkbox label="Warning Checkbox" isWarning warningText="Warning Text" />
    <Checkbox label="Edited Checkbox" isEdited editedText="Edited Text" />
</>

Light

Used when the checkbox is on a dark background

Result

Loading...

Live Editor

<div className="p-3 bg-primary"> <Checkbox label="Checkbox" light description="Checkbox description" /> </div>

<div className="p-3 bg-primary">
    <Checkbox label="Checkbox" light description="Checkbox description" />
</div>

Analytics

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

export default {
	value: 'Checkbox',
	actions: {
		onChange: { type: 'CHECKBOX_CHANGE', payload: 'Change' },
	},
};

Props