Checkbox
Checkbox
Un Checkbox.Root di Radix — controllato o non controllato, capace di tre stati (checked, unchecked, "indeterminate").
import { Checkbox } from "@pompeitech/vesuvius-ui";Con un'etichetta
Selezionato / disabilitato / indeterminato
"indeterminate" è un vero terzo stato, non solo visivo — è ciò che mostra una checkbox "seleziona tutto" quando solo alcuni dei suoi figli sono selezionati:
Controllato, con un "seleziona tutto"
Il pattern classico per cui esiste questo stato — una checkbox genitore che riflette l'unione delle sue figlie:
API
Checkbox
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
checked | boolean | "indeterminate" | Stato selezionato controllato. | |
defaultChecked | boolean | "indeterminate" | false | Stato iniziale, non controllato. |
onCheckedChange | (checked: boolean | "indeterminate") => void | Chiamata con il nuovo stato a ogni toggle da click/tastiera. | |
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 input nativo nascosto accanto al pulsante stilizzato. |
Più ogni altra prop nativa di <button> (il Checkbox.Root di Radix renderizza un <button role="checkbox">, non un <input type="checkbox"> nativo).
Accessibilità
Completamente operabile da tastiera fuori dalla scatola: Tab per il focus, Spazio per attivare/disattivare. Abbinala sempre a un <Label htmlFor> (come in ogni esempio sopra) o a un aria-label esplicito sulla checkbox stessa — l'elemento renderizzato è un <button>, non un <input>, quindi non ha un nome accessibile implicito come invece ottiene gratuitamente l'associazione checkbox+label nativa.