Checkbox

Displays a boolean value.

General

Change state with checked props.

Sizes

Checkbox of different sizes.

Type

Differentiate states by color.

Disable

Unusable and un-clickable Checkbox.

Group

Manage a set of Checkbox.

Accept terms

Keep the action disabled until the box is checked, so the next step is clear.

APIs

Checkbox.Props

Attribute	Description	Type	Accepted values	Default
checked	checked or not	`boolean`	-	-
initialChecked	checked or not on initial	`boolean`	-	`false`
onChange	change event handler	`CheckboxEvent`	-	-
value	unique identification value (only in group)	`string`	-	-
disabled	disable checkbox	`boolean`	-	`false`
error	mark the field as invalid	`boolean`	-	`false`
errorMessage	message below the field	`string`	-	-
type	current type	`CheckboxTypes`	CheckboxTypes	`default`
ref	forwardRef	`Ref<HTMLInputElement \| null>`	-	-
...	native props	`LabelHTMLAttributes`	`'form' ...`	-

Checkbox.Group.Props

Attribute	Description	Type	Accepted values	Default
value	checked children	`Array<string>`	-	`[]`
disabled	disable checkbox group	`boolean`	-	`false`
onChange	change event handler	`(values: string[]) => void`	-	-
...	native props	`HTMLAttributes`	`'id', ...`	-

CheckboxTypes

type CheckboxTypes =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'info'

CheckboxEvent

interface CheckboxEventTarget {
  checked: boolean
}

export interface CheckboxEvent {
  target: CheckboxEventTarget
  stopPropagation: () => void
  preventDefault: () => void
  nativeEvent: React.ChangeEvent
}

Ref

The ref points at the native input.

Accessibility

• The control is a native input of type checkbox, reached with Tab and changed with Space, with a visible focus ring.
• Put the label text inside the Checkbox so a click on it also changes the value.

Edit this page on GitHub