Installation#
npmpnpmyarnbun
Examples#
Default#
Default
Sizes#
Available in four sizes to fit different UI contexts.
Sizes
Colors#
Switches can use different color palettes.
Colors
Checked State#
Checked State
Disabled State#
Disabled
With Label#
Combine with labels for accessible form fields.
With Label
Controlled Switch#
Controlled
Settings Panel Example#
Settings Panel
Usage#
Import
import { Switch } from "@sugarcoat/ui-nxt";Usage
<Switch
size="md"
color="primary"
defaultChecked
onCheckedChange={(checked) => console.log(checked)}
/>Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "md" | Size of the switch |
| color | "default" | "primary" | "accent" | "default" | Color palette for the switch |
| checked | boolean | - | Controlled checked state |
| defaultChecked | boolean | - | Initial checked state (uncontrolled) |
| onCheckedChange | (checked: boolean) => void | - | Callback when checked state changes |
| disabled | boolean | false | Whether the switch is disabled |
| css | SystemStyleObject | - | Additional CSS styles using Panda CSS syntax |
Accessibility#
- Built on Base UI Switch for robust accessibility
- Supports keyboard navigation (Space to toggle)
- Properly announces on/off states to screen readers
- Focus visible styles included for keyboard users
- Use with
<label>elements for accessible form fields