Switch

A toggle switch component for binary choices with multiple variants, sizes and dark mode support

Installation

Install the Switch component using the nocta-ui CLI:

npx nocta-ui add switch

Import the component:

import { Switch } from '@/components/ui/switch';

Three size options are available: sm, md, and lg. The default size is md.

Small

Medium

Large

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Whether the switch is checked (controlled)
`defaultChecked`	`boolean`	`false`	Initial checked state (uncontrolled)
`onCheckedChange`	`(checked: boolean) => void`	-	Callback fired when the switch state changes
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	The size of the switch
`disabled`	`boolean`	`false`	Whether the switch is disabled
`className`	`string`	`''`	Additional CSS classes to apply
`id`	`string`	-	The id attribute for the switch input

The Switch component also accepts all standard input props supported by @ariakit/react Checkbox through the ...props spread operator.