Switch

Interruptor binario on/off con soporte de estado controlado. Tres tamaños, cinco tonos, label y description opcionales, y posición del label configurable (start o end).

ApagadoEncendidoDeshabilitadoEncendido y deshabilitado

Instalación#

bash

pnpm add @tsukira/ui

Uso#

tsx

import { Switch } from "@tsukira/ui"; <Switch label="Notificaciones" defaultChecked /><Switch label="Modo oscuro" checked={dark} onCheckedChange={setDark} /><Switch label="En construcción" labelPlacement="start" disabled />

Ejemplos#

Playground

cambia las props y el código se regenera

NotificacionesRecibe alertas en tiempo real

name

required

Inactivo

size

tone

label

description

labelPlacement

Tamaños

sm · md · lg

smmdlg

Tonos

brand · success · warning · danger · ink

brandsuccesswarningdangerink

Posición del label

labelPlacement start · end

Label al final (defecto)Label al inicio

Con description

label + description

Notificaciones pushRecibe alertas en tiempo real en tu dispositivo.Sincronización automáticaMantiene los datos actualizados en segundo plano.

Fusión: panel de ajustes en Card

Switch + Card — filas etiquetadas con estado controlado

Ajustes de cuenta

Personaliza tu experiencia.

Notificaciones push

Alertas en tiempo real en tu dispositivo.

Notificaciones por correo

Resumen diario de actividad.

Sincronización automática

Actualiza datos en segundo plano.

Funciones beta

Acceso anticipado a nuevas características.

Fusión: fila de notificaciones con Badge

Switch + Badge — canal de notificación con indicador de estado

Push

Activo

Correo

Activo

SMS

Pausado

Slack

No config

API#

SwitchPropsextends Omit< ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange' | 'checked' | 'defaultChecked' >

Prop	Tipo	Default	Descripción
`checked`	`boolean`	—	Estado controlado.
`defaultChecked`	`boolean`	—	Estado inicial (no controlado).
`onCheckedChange`	`((checked: boolean) => void)`	—	—
`name`	`string`	—	Participa en formularios nativos vía un input oculto.
`value`	`string`	—	—
`required`	`boolean`	—	—
`size`	`'sm' \| 'md' \| 'lg'`	—	—
`tone`	`'brand' \| 'success' \| 'warning' \| 'danger' \| 'ink'`	—	—
`label`	`string`	—	—
`description`	`string`	—	—
`labelPlacement`	`'start' \| 'end'`	—	Posición del label respecto al switch.