Checkbox #

Check boxes are usually used in groups. Allow users to select one or more values ​​from a set.

Import #

Examples #

Basic #

Disabled and read only #

Indeterminate #

The indeterminate property sets the Checkbox to an indeterminate state, mainly used in the select all or tree structure Checkbox.

Colors #

Checkbox Group #

Checkbox Group With Horizontal Layout #

Checkbox Group (Controlled) #

Accessibility #

ARIA properties #

• The role property of the CheckboxGroup is group.
• The role property of each Checkbox is checkbox.
• If the Checkbox is disabled, set aria-disabled to true.
• If the Checkbox is checked, set aria-checked to true, otherwise set it to false.
• When partially checked, it has state aria-checked set to mixed.
• A visible label referenced by the value of aria-labelledby set on the element with role checkbox.

Keyboard interaction #

• When the Checkbox has focus, pressing the Space key changes the state of the Checkbox.

Props #

<Checkbox> #

Property	Type (default)	Description
as	ElementType(div)	Custom element type for the component
checked	boolean	Specifies whether the checkbox is selected
color	Color	The color of the checkbox when checked or indeterminate
defaultChecked	boolean	Specifies the initial state: whether or not the checkbox is selected
disabled	boolean	Whether disabled
indeterminate	boolean	When being a checkbox , setting styles after the child part is selected
inputRef	Ref	Ref of input element
name	string	Used for the name of the form
onChange	(value: string | number, checked: boolean, event) => void	Callback fired when checkbox is triggered and state changes
title	string	HTML title
value	string | number	Correspond to the value of CheckboxGroup, determine whether to select

<CheckboxGroup> #

Color #

type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';