Installation#
npmpnpmyarnbun
Examples#
Default#
Default
Sizes#
Available in four sizes to fit different UI contexts.
Sizes
Colors#
Checkboxes can use different color palettes.
Colors
Border Radius#
Control the roundness of the checkbox corners.
Radius
Shadow#
Add elevation with the shadow prop.
Shadow
Indeterminate State#
Use the indeterminate state for partial selections.
Indeterminate
Disabled State#
Disabled
With Label#
Combine with the Label component for accessible form fields.
With Label
Controlled Checkbox#
Controlled
Checkbox Group Example#
Checkbox Group
Usage#
Import
import { Checkbox } from "@sugarcoat/ui-nxt";Usage
<Checkbox
size="md"
color="primary"
defaultChecked
onCheckedChange={(checked) => console.log(checked)}
/>Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "sm" | Size of the checkbox |
| color | "default" | "primary" | "accent" | "default" | Color palette for the checkbox |
| radius | "none" | "default" | "round" | "default" | Border radius of the checkbox |
| shadow | "none" | "sm" | "md" | "lg" | "none" | Box shadow elevation |
| checked | boolean | - | Controlled checked state |
| defaultChecked | boolean | - | Initial checked state (uncontrolled) |
| indeterminate | boolean | false | Show indeterminate state (partial selection) |
| onCheckedChange | (checked: boolean) => void | - | Callback when checked state changes |
| disabled | boolean | false | Whether the checkbox is disabled |
| css | SystemStyleObject | - | Additional CSS styles using Panda CSS syntax |
Accessibility#
- Built on Base UI Checkbox for robust accessibility
- Supports keyboard navigation (Space to toggle)
- Properly announces checked, unchecked, and indeterminate states
- Focus visible styles included for keyboard users
- Use with
<label>elements for accessible form fields