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

Indeterminate

Result

Loading...

Live Editor

<Checkbox label="Checkbox" defaultSelected isIndeterminate />

<Checkbox label="Checkbox" defaultSelected isIndeterminate />

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