Switch
Switch
Uno Switch.Root di Radix — un interruttore on/off, stilizzato come quello di iOS.
import { Switch } from "@pompeitech/vesuvius-ui";Con un'etichetta
Selezionato / disabilitato
In una riga di impostazioni
Il posizionamento più comune nel mondo reale — etichetta e descrizione a sinistra, switch ancorato a destra:
Notifiche email
Ricevi notifiche sull'attività dell'account.
API
Switch
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
checked | boolean | Stato controllato. | |
defaultChecked | boolean | false | Stato iniziale, non controllato. |
onCheckedChange | (checked: boolean) => void | ||
disabled | boolean | false | |
required | boolean | false | Segna il campo come obbligatorio per la validazione nativa del form. |
name / value | string | Per l'invio nativo del form senza JS — renderizza un checkbox nativo nascosto accanto al pulsante stilizzato. |
Più ogni altra prop nativa di <button> (lo Switch.Root di Radix renderizza un <button role="switch">).
Accessibilità
Tab per il focus, Spazio per attivare/disattivare — come Checkbox, l'elemento renderizzato è un <button>, quindi necessita di una propria <Label htmlFor> o aria-label invece di affidarsi a un'associazione nativa implicita.