Interruptor
Un botón de encendido/apagado para ajustar al instante cosas como las notificaciones, el modo oscuro o las opciones de funciones, con ese estilo neobrutalista de bordes y sombras.
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
El interruptor es un control de dos estados: activado o desactivado, aplicado en el mismo instante en que cambia, sin botón de envío. Está construido sobre el componente Base UI Switch y sigue la receta neobrutalista: bordes gruesos, sombras marcadas y tipografía en negrita.
Recurre a este componente cuando:
- Paneles de ajustes — notificaciones, modo oscuro, reproducción automática: preferencias que surten efecto al instante.
- Feature flags — activa una función beta o alterna entre facturación mensual y anual.
- Controles por fila — activa o pausa elementos de una tabla o una lista sin abrir un formulario.
Instalación#
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/switch.jsonnpx shadcn@latest add https://neobrutalism.com/r/base/switch.jsonyarn dlx shadcn@latest add https://neobrutalism.com/r/base/switch.jsonbunx --bun shadcn@latest add https://neobrutalism.com/r/base/switch.json
Instala las siguientes dependencias:
pnpm add @base-ui/reactnpm install @base-ui/reactyarn add @base-ui/reactbun add @base-ui/react
Copia y pega el siguiente código en tu proyecto.
"use client"
import * as React from "react"
import { Switch as SwitchPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
function Switch({
className,
size = "default",
...props
}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
size?: "sm" | "default"
}) {
return (
<SwitchPrimitive.Root
data-slot="switch"
data-size={size}
className={cn(
"peer group/switch relative inline-flex shrink-0 cursor-pointer items-center border-2 border-foreground transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-invalid:border-destructive data-[size=default]:h-6 data-[size=default]:w-11 data-[size=sm]:h-5 data-[size=sm]:w-9 data-checked:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
className
)}
{...props}
>
<SwitchPrimitive.Thumb
data-slot="switch-thumb"
className="pointer-events-none mx-0.5 block border-2 border-foreground bg-primary transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-5 group-data-[size=sm]/switch:data-checked:translate-x-4 data-checked:bg-background data-unchecked:translate-x-0"
/>
</SwitchPrimitive.Root>
)
}
export { Switch }
Ajusta las rutas de importación según la configuración de tu proyecto.
Uso#
import { Switch } from "@/components/ui/switch"<Switch />Ejemplos#
Descripción#
import {
Field,
FieldContent,Tarjeta de opción#
Selección tipo tarjeta, donde FieldLabel envuelve todo el Field para lograr un patrón de tarjeta clicable.
import {
Field,
FieldContent,Desactivado#
Añade la prop disabled al componente Switch para desactivar el interruptor. Añade la prop data-disabled al componente Field para aplicarle estilos.
import { Field, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
No válido#
Añade la prop aria-invalid al componente Switch para indicar un estado no válido. Añade la prop data-invalid al componente Field para aplicarle estilos.
import {
Field,
FieldContent,Tamaño#
Usa la prop size para cambiar el tamaño del interruptor.
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
RTL#
Para activar el soporte RTL en Neobrutalism, consulta la guía de configuración RTL.
"use client"
import * as React from "react"Accesibilidad#
El interruptor sigue el patrón Switch de WAI-ARIA: renderiza un botón real con role="switch" y aria-checked, más un input oculto para que el valor se envíe con el formulario que lo contiene.
Interacciones de teclado:
| Tecla | Acción |
|---|---|
Tab / Shift + Tab | Lleva el foco al interruptor o lo saca de él |
Space | Alterna el interruptor |
Enter | Alterna el interruptor |
Referencia de API#
Consulta la documentación de Base UI Switch.