Vai al contenuto
1.6k

Interruttore

Un pulsante on/off per impostazioni immediate — notifiche, modalità scura, feature flag — con quel tocco neobrutalista fatto di bordi e ombre.

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

Lo switch è un interruttore a due stati — acceso o spento, applicato nell’istante in cui scatta, senza pulsante di invio. Costruito sul componente Base UI Switch e rifinito secondo la ricetta neobrutalista: bordi spessi, ombre nette e tipografia in grassetto.

Quando usarlo:

  • Pannelli di impostazioni — notifiche, dark mode, riproduzione automatica: preferenze che hanno effetto immediato.
  • Feature flag — attiva una funzionalità beta o passa dalla fatturazione mensile a quella annuale.
  • Controlli per riga — attiva o metti in pausa elementi di una tabella o di un elenco senza aprire un modulo.

Installazione

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/switch.json
npx shadcn@latest add https://neobrutalism.com/r/base/switch.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/switch.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/switch.json

Installa le seguenti dipendenze:

pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Copia e incolla il seguente codice nel tuo progetto.

components/ui/switch.tsx
"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 }

Aggiorna i percorsi di importazione in base alla struttura del tuo progetto.

Utilizzo

import { Switch } from "@/components/ui/switch"
<Switch />

Esempi

Descrizione

import {
  Field,
  FieldContent,

Scheda di scelta

Selezione in stile scheda, dove FieldLabel avvolge l'intero Field per ottenere una scheda cliccabile.

import {
  Field,
  FieldContent,

Disabilitato

Aggiungi la prop disabled al componente Switch per disabilitare lo switch. Aggiungi la prop data-disabled al componente Field per lo stile.

import { Field, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"

Non valido

Aggiungi la prop aria-invalid al componente Switch per indicare uno stato non valido. Aggiungi la prop data-invalid al componente Field per lo stile.

import {
  Field,
  FieldContent,

Dimensione

Usa la prop size per cambiare la dimensione dello switch.

import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"

RTL

Per abilitare il supporto RTL in Neobrutalism, consulta la guida alla configurazione RTL.

"use client"

import * as React from "react"

Accessibilità

Lo switch segue il pattern WAI-ARIA Switch: rende un vero pulsante con role="switch" e aria-checked, più un input nascosto perché il valore venga inviato con il modulo circostante.

Interazioni da tastiera:

TastoAzione
Tab / Shift + TabSposta il focus sullo switch o via da esso
SpaceCommuta lo switch
EnterCommuta lo switch

Riferimento API

Consulta la documentazione di Base UI Switch.