Formularios

Switch

Encendido o apagado, con efecto inmediato. Dos tamaños y variante de acento.

import { Switch } from "sebs7n-ui/switch"

Ejemplos

Efecto inmediato

Si el cambio se aplica al apretar «Guardar», es un `Checkbox`.

Notificaciones

Recordatorios de vencimiento

Modo compacto

import { Label } from "sebs7n-ui/label"
import { Switch } from "sebs7n-ui/switch"
import { useId } from "react"

function Basico() {
  const a = useId()
  const b = useId()
  const c = useId()
  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center gap-3">
        <Switch defaultChecked id={a} />
        <Label htmlFor={a}>Notificaciones</Label>
      </div>
      <div className="flex items-center gap-3">
        <Switch defaultChecked id={b} variant="accent" />
        <Label htmlFor={b}>Recordatorios de vencimiento</Label>
      </div>
      <div className="flex items-center gap-3">
        <Switch id={c} size="sm" />
        <Label htmlFor={c}>Modo compacto</Label>
      </div>
    </div>
  )
}

Props

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

Switch

Hereda las props de Switch.Root.

Prop	Tipo	Por defecto
`size`	`"sm" \| "md"`	`"md"`
`variant`	`"default" \| "accent"`	`"default"`
`className`	`string`	—

Teclado

Espacio · Enter: Alterna.
Tab: Entra y sale.

Accesibilidad

Emite role="switch" con aria-checked: el lector dice «activado/desactivado», no «marcado».
Necesita Label asociado. El texto no debe cambiar al alternar («Notificaciones», no «Activar notificaciones»).

Reglas de uso

Efecto inmediato. Si el cambio se aplica al apretar «Guardar», es un Checkbox.
variant="accent" cuenta como el único acento de la pantalla: no lo combines con un Button variant="accent".

Relacionados

Checkbox Toggle