Geist UI

Checkbox

Displays a boolean value.

General

Change state with checked props.

sizes

Checkbox of different sizes.

Type

Differentiate states by color.

disable

group

Manage a set of Checkbox.

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`
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' | 'secondary' | 'success' | 'warning' | 'error'

`CheckboxEvent`

interface CheckboxEventTarget {
  checked: boolean
}

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

Contributors