Forms

RadioButton

Pulsante radio per selezione esclusiva all'interno di un gruppo, con supporto v-model condiviso, varianti stilistiche e stati di caricamento.

Import

import { RadioButton } from '@pzeta/vue-components'

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`unknown`	`undefined`	Valore del gruppo radio (v-model condiviso tra tutti i radio del gruppo).
`value`	`unknown`	—	Obbligatorio. Valore univoco del singolo radio. Viene emesso quando il radio viene selezionato.
`label`	`string`	`undefined`	Etichetta visualizzata accanto al radio.
`helperText`	`string`	`undefined`	Testo di aiuto visualizzato sotto il label.
`error`	`string`	`undefined`	Messaggio di errore; attiva lo stato di errore visivo.
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Dimensione del radio button.
`severity`	`'primary' \| 'secondary' \| 'success' \| 'info' \| 'warn' \| 'danger' \| 'help' \| 'contrast'`	`'primary'`	Colore/severità visiva.
`variant`	`'default' \| 'outlined' \| 'filled'`	`'default'`	Variante stilistica del radio button.
`disabled`	`boolean`	`false`	Disabilita il componente.
`readonly`	`boolean`	`false`	Rende il componente non modificabile.
`loading`	`boolean`	`false`	Mostra il loading spinner.
`loadingIcon`	`string`	Da config	Icona personalizzata per il loading.
`required`	`boolean`	`false`	Marca il campo come obbligatorio.
`name`	`string`	`null`	Attributo name per raggruppare i radio in un form HTML.
`inputId`	`string`	`null`	ID dell'input (per associazione a label).
`inputClass`	`string \| object`	—	Classe CSS aggiuntiva sull'input.
`inputStyle`	`string \| object`	—	Style inline sull'input.
`ariaLabel`	`string`	—	Label accessibile per screen reader.
`ariaLabelledby`	`string`	—	Riferimento a elemento label esterno.
`tabindex`	`number`	—	Indice tab per navigazione da tastiera.
`autofocus`	`boolean`	—	Focus automatico al mount.

Emits

Evento	Payload	Descrizione
`update:modelValue`	`unknown`	Emesso quando il radio viene selezionato (emette il `value` del radio).
`change`	`{ originalEvent: Event; value: unknown }`	Emesso al cambio con l'evento originale e il valore selezionato.
`focus`	`FocusEvent`	Emesso quando il componente riceve il focus.
`blur`	`FocusEvent`	Emesso quando il componente perde il focus.

Slot

Slot	Scope	Descrizione
`label`	`{ checked: boolean; value: unknown; disabled: boolean }`	Contenuto custom della label. A differenza del prop `label`, viene reso fuori dall'elemento `<label>`, così eventuali control interattivi (es. `InputText`, link) restano cliccabili e ricevono il focus correttamente.

Usa lo slot #label solo quando la label deve contenere elementi interattivi. Per testo semplice è preferibile il prop label.

Il meccanismo di gruppo si realizza condividendo lo stesso v-model tra più RadioButton. Quando l'utente seleziona un radio, modelValue viene aggiornato con il value del radio selezionato; gli altri si deselezionano automaticamente.

Gruppi Indipendenti

Con Helper Text

Severità e Varianti

Label personalizzata con slot

Lo slot #label sostituisce il testo con qualsiasi contenuto. Le slot props (checked, value, disabled) permettono di stilare in base allo stato.

Control interattivo nello slot

Poiché lo slot #label è reso fuori dal <label>, può contenere control interattivi (pattern "Altro: ___").

RadioButtonGroup

RadioButtonGroup costruisce il gruppo da un array di opzioni: fieldset/legend, name condiviso (frecce e un solo tab-stop gestiti dal browser) ed errore unico a livello di gruppo.

Prop	Tipo	Default	Descrizione
`modelValue`	`unknown`	—	Valore selezionato (v-model)
`options`	`RadioButtonGroupOption[]`	`[]`	Voci: `{ value, label, disabled?, helperText? }`
`label`	`string`	—	Etichetta del gruppo (legend)
`ariaLabel`	`string`	—	Nome accessibile se manca `label`
`name`	`string`	generato	Nome condiviso dei radio
`required`	`boolean`	`false`	Campo obbligatorio
`disabled`	`boolean`	`false`	Disabilita tutte le voci
`error`	`string \| null`	`null`	Messaggio di errore del gruppo
`helperText`	`string \| null`	`null`	Testo di aiuto del gruppo
`orientation`	`'horizontal' \| 'vertical'`	`'vertical'`	Disposizione delle voci. In orizzontale ogni voce prende la larghezza del contenuto e le voci vanno a capo solo quando lo spazio finisce (dalla 1.22.0; prima restavano una per riga)
`size`	`SizeTouch`	`'medium'`	Dimensione dei radio
`severity`	`Severity`	`'primary'`	Colore dei radio

Emette update:modelValue e change con il valore della voce scelta.

Accessibilità

L'input <input type="radio"> è nascosto visivamente (sr-only) ma accessibile agli screen reader.
Usare il prop name per raggruppare i radio a livello di form HTML (navigazione da tastiera).
inputId associa il radio a un <label> esterno.
Per un nome accessibile usare il prop label (o lo slot #label) oppure ariaLabel/ariaLabelledby, applicati all'<input>.
Quando required è true, viene aggiunta * visivamente e un testo (obbligatorio) per screen reader.
Contrasto nel tema scuro (dalla 1.24.0): il radio selezionato usa la tinta 400 della severity (primary-600 su slate-800 era 2,8:1, sotto il 3:1 di WCAG 1.4.11) con il punto interno scuro; il bordo dei non selezionati usa --color-field-border (era neutral-600, 1,94:1). Il tema chiaro non cambia.

TypeScript

import type { RadioButtonProps, RadioButtonEmits } from '@pzeta/vue-components'

PinInput

Campo PIN con visualizzazione a cifre separate, mascheramento automatico con ritardo e supporto per completamento. Ideale per OTP, codici di sicurezza e PIN numerici.

Rating

Componente di valutazione a stelle con numero configurabile di stelle, icone personalizzabili, modalità readonly e pulsante di annullamento.