Skip to main content

Switch

Instant boolean toggles. Immediate feedback. Modern UX.

default.tsx
1'use client';
2

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

5export function Default() {
6  return <Switch aria-label="Toggle switch" />;
7}

Installation

pnpm dlx nachui add switch

Anatomy

1import { Switch } from '@/components/ui/switch';
1<Switch id="airplane-mode" />

Variants

Default

default.tsx
1'use client';
2

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

5export function Default() {
6  return <Switch aria-label="Toggle switch" />;
7}

With Label

Switch component alongside a label for context.
with-label.tsx
1'use client';
2

3import { Label } from '@/components/ui/label';
4import { Switch } from '@/components/ui/switch';
5

6const switches = [{ id: 'airplane-mode', label: 'Airplane Mode' }];
7

8export function WithLabel() {
9  return (
10    <div className="flex flex-col gap-3">
11      {switches.map((item) => (
12        <div key={item.id} className="flex items-center gap-2">
13          <Switch id={item.id} />
14          <Label htmlFor={item.id}>{item.label}</Label>
15        </div>
16      ))}
17    </div>
18  );
19}

Disabled

A disabled state stops interactions.
disabled.tsx
1'use client';
2

3import { Label } from '@/components/ui/label';
4import { Switch } from '@/components/ui/switch';
5

6const switches = [{ id: 'disabled-switch', label: 'Airplane Mode' }];
7

8export function Disabled() {
9  return (
10    <div className="flex flex-col gap-3">
11      {switches.map((item) => (
12        <div key={item.id} className="flex items-center gap-2">
13          <Switch id={item.id} disabled />
14          <Label htmlFor={item.id} className="opacity-50">
15            {item.label}
16          </Label>
17        </div>
18      ))}
19    </div>
20  );
21}

API Reference

Switch

PropTypeDefaultDescription
onCheckedChange(checked: boolean) => void-Callback when checked state changes
disabledboolean-Disables the switch
Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue
PreviousSpinner
NextTable