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:

Terminal

npx nocta-ui add switch

Then import the component:

Import

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

The Switch component supports four variants: default, success, warning, and destructive.

Default

Success

Warning

Destructive

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

Small

Medium

Large

Enabled (off)

Enabled (on)

Disabled (off)

Disabled (on)

The Switch component accepts a className prop for custom styling:

Scaled (1.25x)

75% Opacity

Square corners

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Whether the switch is checked
`onCheckedChange`	`(checked: boolean) => void`	-	Callback fired when the switch state changes
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	The size of the switch
`variant`	`'default' \| 'success' \| 'warning' \| 'destructive'`	`'default'`	The visual style variant
`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 HTML input element props through the ...props spread operator.

Spinner

Loading spinner component with variants, sizes and smooth animations for indicating loading states

Table

A powerful, highly customizable table component with sorting, filtering, pagination, and advanced features