Checkbox

Collect user's choices.

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.

Examples

Basic

Basic usage of checkbox.

Controlled Checkbox

Communicated with other components.

Check all

The indeterminate property can help you to achieve a 'check all' effect.

Custom semantic dom styling

You can customize the semantic dom style of Checkbox by passing objects/functions through classNames and styles.

Disabled

Disabled checkbox.

Checkbox Group

Generate a group of checkboxes from an array.

Use with Grid

We can use Checkbox and Grid in Checkbox.Group, to implement complex layout.

API

Checkbox and Checkbox.Group are exported from @ceebee/ui/client.

Checkbox

Property	Description	Type	Default	Version
`checked`	Specifies whether the checkbox is selected	`boolean`	`false`	—
`classNames`	Customize class for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>`	`-`	—
`defaultChecked`	Specifies the initial state: whether or not the checkbox is selected	`boolean`	`false`	—
`disabled`	If disable checkbox	`boolean`	`false`	—
`indeterminate`	The indeterminate checked state of checkbox	`boolean`	`false`	—
`onChange`	The callback function that is triggered when the state changes	`(e: CheckboxChangeEvent) => void`	`-`	—
`onBlur`	Called when leaving the component	`function()`	`-`	—
`onFocus`	Called when entering the component	`function()`	`-`	—
`styles`	Customize inline style for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>`	`-`	—
`defaultValue`	Default selected value	`(string \| number)\[]`	`\[]`	—
`disabled`	If disable all checkboxes	`boolean`	`false`	—
`name`	The name property of all input[type="checkbox"] children	`string`	`-`	—
`options`	Specifies options	`string\[] \| number\[] \| Option\[]`	`\[]`	—
`value`	Used for setting the currently selected value	`(string \| number \| boolean)\[]`	`\[]`	—
`title`	title of the option	`string`	`-`	—
`className`	className of the option	`string`	`-`	5.25.0
`style`	styles of the option	`React.CSSProperties`	`-`	—
`onChange`	The callback function that is triggered when the state changes	`(checkedValue: T[]) => void`	`-`	—