Saltar al contenido principal

Switch

Toggles booleanos instantáneos. Feedback inmediato. UX moderna.

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.
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}

Deshabilitado (Disabled)

Estado en el que el usuario no puede interactuar con él.
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}

Referencia de API

Switch

PropTipoPor defectoDescripción
onCheckedChange(checked: boolean) => void-Handler cuando el estado cambia
disabledboolean-Evita interacción y reduce opacidad
¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue
AnteriorSpinner
SiguienteTable