Radio Group
Radio Group
Una coppia RadioGroup.Root + RadioGroup.Item di Radix — selezione singola tra un insieme di opzioni.
import { RadioGroup, RadioGroupItem } from "@pompeitech/vesuvius-ui";Default
Disabilitato
Disabilita l'intero gruppo, o un singolo elemento al suo interno:
Layout orizzontale
Il layout proprio di RadioGroup è solo grid gap-3 (verticale) — sovrascrivilo con className per una riga:
API
RadioGroup
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
value | string | Valore selezionato controllato. | |
defaultValue | string | Valore iniziale, non controllato. | |
onValueChange | (value: string) => void | ||
disabled | boolean | false | Disabilita ogni elemento del gruppo. |
name | string | Per l'invio nativo del form senza JS. | |
loop | boolean | true | Se la navigazione con le frecce torna dall'ultimo elemento al primo. |
RadioGroupItem
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
value | string | Obbligatorio — il valore rappresentato da questo elemento. | |
disabled | boolean | false | Disabilita solo questo elemento. |
Accessibilità
Le frecce (↑/↓/←/→) spostano la selezione tra gli elementi e selezionano immediatamente quello appena focalizzato — replicando il comportamento nativo di un gruppo <input type="radio">, non una lista che navighi con le frecce e confermi separatamente. Solo un elemento del gruppo è mai nell'ordine di tabulazione alla volta. Abbina ogni elemento a una Label htmlFor (come in ogni esempio sopra) — stessa regola di associazione di Checkbox.