Components

Checkbox

Used for selecting values from several options

Logo
I have read and agree to the terms of service.

Colors

You can change the color of the checkbox using the color prop, this is a predefined color pairs

ColorSchemes

You can also use the colorScheme prop to change the color, this option is limited to just four colors

Sizes

Use the size to change the checkbox size

Radius

Use the radius prop to change the checkbox shape.

onCheckChange

Use the onCheckChange function to get the checkbox status

Checked: false

Controlled

Use checked prop to set the default state

Checked: true

Disabled

Use disabled prop to disable the checkbox

I have read and agree to the terms of service.

API Reference

size

Type:

"xs" | "sm" | "md"

Controls the checkbox size.

Default:

sm
radius

Type:

"none" | "sm" | "md" | "full"

Set the border radius for the checkbox

Default:

sm
colorScheme

Type:

"primary" | "danger" | "warning" | "success"

Checkbox color

Default:

primary
checked

Type:

boolean

Determines whether the checkbox is checked or not.

Default:

false
onCheckChange

Type:

function

Callback function triggered when the checked state changes.

Default:

color

Type:

ColorPair

Checkbox color, from predefined pairs

Default:

disabled

Type:

boolean

Disables the checkbox and prevent click action

Default:

classNames

Type:

object

Custom classes for checkbox elements

Default:

Properties:

checker

Type:

string

Add className to the checker

Default:

container

Type:

string

Add className to the checkbox container

Default: