Checkbox

Checkbox component.

When To Use#

Used for selecting multiple values from several options.
If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.

import { Checkbox, CheckboxGroup } from 'tailor-ui';

Uncontrolled Checkbox

Controlled Checkbox

Checked Required

Click Me

this is a required field

Checked Disabled

Disabled

checkbox 1

checkbox 2

checkbox 3

checkbox 4

checkbox 1

checkbox 2

checkbox 3

checkbox 4

All Checked Required

checkbox 1

checkbox 2

checkbox 3

checkbox 4

Property	Description	Type	Default
`checked`	Specifies whether the checkbox is selected	`boolean`
`defaultChecked`	Specifies the initial state whether or not the checkbox is selected.	`boolean`
`disabled`	Disable Checkbox	`boolean`	false
`onChange`	The callback function that is triggered when the state changes	`(event: ChangeEvent) => void`
`value`	The value of checkbox	`string`
`id`	The id of checkbox	`string`
`onFocus`		`(event: FocusEvent) => void`
`onBlur`		`(event: FocusEvent) => void`

Property	Description	Type
`direction`	to specify the direction of the step bar	`'horizontal'` `'vertical'`
`defaultValue`	To set the initial value	`string[]`
`options`	Specifies options	`{ label: ReactNode; value: string; disabled?: boolean; }[]`
`value`	Used for setting the currently selected value	`string[]`
`onChange`	The callback function that is triggered when the state changes	`(value: string[]) => void`