Components

RadioGroup

Gruppo di radio button custom per selezione singola con layout verticale e supporto disabilitazione per opzione.

Panoramica

RadioGroup è un componente custom (non un wrapper diretto PrimeVue) che rende automaticamente un gruppo di RadioButton di @pzeta/vue-components a partire da un array di opzioni. Supporta la disabilitazione globale o per singola opzione, la configurazione dei campi label/value/disabled tramite props e l'integrazione completa con label, helperText e messaggi di errore del sistema form.

Il layout è verticale con gap uniforme tra le opzioni.

Utilizzo nello schema

const schema = [
  {
    name: 'genere',
    type: 'radio',
    label: 'Genere',
    required: true,
    props: {
      name: 'genere',
      options: [
        { label: 'Maschio', value: 'M' },
        { label: 'Femmina', value: 'F' },
        { label: 'Non specificato', value: 'N' },
      ],
      optionLabel: 'label',
      optionValue: 'value',
    },
  },
  {
    name: 'piano',
    type: 'radio',
    label: 'Piano abbonamento',
    props: {
      name: 'piano',
      options: [
        { label: 'Free', value: 'free' },
        { label: 'Pro', value: 'pro' },
        { label: 'Enterprise', value: 'enterprise', disabled: true },
      ],
      optionLabel: 'label',
      optionValue: 'value',
      optionDisabled: 'disabled',
    },
  },
]

Prop	Tipo	Default	Descrizione
`modelValue`	`unknown`	`undefined`	Valore selezionato (v-model)
`options`	`Array<Record<string, unknown>>`	`[]`	Array di oggetti opzione
`optionLabel`	`string`	`'label'`	Proprietà dell'oggetto da usare come testo visualizzato
`optionValue`	`string`	`'value'`	Proprietà dell'oggetto da usare come valore
`optionDisabled`	`string`	`'disabled'`	Proprietà dell'oggetto che indica se l'opzione è disabilitata
`name`	`string`	—	Attributo `name` HTML per raggruppare i radio button
`label`	`string`	—	Label del gruppo
`helperText`	`string`	—	Testo di aiuto mostrato sotto il gruppo
`error`	`string`	—	Messaggio di errore da mostrare
`disabled`	`boolean`	`false`	Disabilita tutte le opzioni del gruppo
`invalid`	`boolean`	`false`	Marca il gruppo come non valido
`required`	`boolean`	`false`	Indica campo obbligatorio sulla label

Validazione suggerita

// Selezione obbligatoria
{ name: 'genere', type: 'radio', label: 'Genere', validation: 'required' }

// Valore tra quelli consentiti
{ name: 'piano', type: 'radio', label: 'Piano', validation: 'required|enum:free,pro,enterprise' }

Note

La prop name è importante per la corretta gestione del gruppo HTML: assicura che i radio button siano mutuamente esclusivi anche in presenza di più gruppi sullo stesso form.
La disabilitazione per singola opzione avviene impostando la proprietà corrispondente a optionDisabled a true nell'oggetto opzione. La prop disabled globale sovrascrive la disabilitazione individuale.
Il componente usa FormLabel e FormHelperText di @pzeta/vue-components per layout consistente con gli altri campi del form.
Il valore dell'opzione viene identificato tramite String(getOptionValue(option)) come chiave nel v-for, quindi è consigliabile usare valori primitivi unici (stringhe o numeri).

PickListRemote

Doppia lista per trasferimento elementi con caricamento remoto: spostamento tra lista disponibili e lista selezionati.

RadioGroupRemoteInput

Gruppo di radio button con opzioni caricate da sorgente remota e filtri dinamici.

RadioGroup

Panoramica

Utilizzo nello schema

Utilizzo diretto

Anteprima live tramite DynamicFormLayouts

Props

Validazione suggerita

Note