Switch

Un control que permite al usuario alternar entre encendido y apagado.

default.tsx

1'use client';
2
3import { Switch } from '@/components/ui/switch';
4
5export function Default() {
6  return <Switch aria-label="Toggle switch" />;
7}

Instalación

pnpm dlx nachui add switch

Anatomía

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

1<Switch id="airplane-mode" />

Variantes

Predeterminado (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}

Con Etiqueta (With Label)

Acompañado de una etiqueta (Label) para proveer contexto extra.

Airplane Mode

with-label.tsx

1'use client';
2
3import { Label } from '@/components/ui/label';
4import { Switch } from '@/components/ui/switch';
5
6export function WithLabel() {
7  return (
8    <div className="flex items-center gap-2">
9      <Switch id="airplane-mode" />
10      <Label htmlFor="airplane-mode">Airplane Mode</Label>
11    </div>
12  );
13}

Deshabilitado (Disabled)

Estado en el que el usuario no puede interactuar con él.

Airplane Mode

disabled.tsx

1'use client';
2
3import { Label } from '@/components/ui/label';
4import { Switch } from '@/components/ui/switch';
5
6export function Disabled() {
7  return (
8    <div className="flex items-center gap-2">
9      <Switch id="disabled-switch" disabled />
10      <Label htmlFor="disabled-switch" className="opacity-50">
11        Airplane Mode
12      </Label>
13    </div>
14  );
15}

Referencia de API

Switch

Prop	Tipo	Por defecto	Descripción
`onCheckedChange`	`(checked: boolean) => void`	-	Handler cuando el estado cambia
`disabled`	`boolean`	-	Evita interacción y reduce opacidad

AnteriorSpinner SiguienteTable