Checkbox

Displays a boolean value.

General

Change state with checked props.

Preview

See code

Check option

Sizes

Checkbox of different sizes.

Preview

See code

scale-0.25

scale-0.5

scale-0.75

Type

Differentiate states by color.

Disable

Unusable and un-clickable Checkbox.

Preview

See code

Checkbox option

Checkbox option disabled

Group

Manage a set of Checkbox.

Preview

See code

Checkbox option 1Checkbox option 2Checkbox option 3Checkbox option 4

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

CheckboxEvent

interface CheckboxEventTarget {
  checked: boolean
}

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

Edit this page on GitHub

Card

Code

MADE & DESIGNED WITHBY BRUNO ANDRADE