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.
`defaultValue`	`unknown \| null`	—	Valore predefinito se modelValue non è fornito.
`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

Il componente RadioButton non espone slot personalizzabili. Il label è definito tramite 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

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.
ariaLabel e ariaLabelledby forniscono descrizioni accessibili aggiuntive.
Quando required è true, viene aggiunta * visivamente e un testo (obbligatorio) per screen reader.

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.