Docs
Components
Dark
Light
System
Used for selecting values from several options
You can change the color of the checkbox using the color prop, this is a predefined color pairs
color
You can also use the colorScheme prop to change the color, this option is limited to just four colors
colorScheme
Use the size to change the checkbox size
size
Use the radius prop to change the checkbox shape.
radius
Use the onCheckChange function to get the checkbox status
onCheckChange
Use checked prop to set the default state
checked
Use disabled prop to disable the checkbox
disabled
Type:
"xs" | "sm" | "md"
Controls the checkbox size.
Default:
"none" | "sm" | "md" | "full"
Set the border radius for the checkbox
"primary" | "danger" | "warning" | "success"
Checkbox color
boolean
Determines whether the checkbox is checked or not.
function
Callback function triggered when the checked state changes.
ColorPair
Checkbox color, from predefined pairs
Disables the checkbox and prevent click action
classNames
object
Custom classes for checkbox elements
Properties:
checker
string
Add className to the checker
container
Add className to the checkbox container