Forms

FormLabel

Etichetta accessibile per campi form. Supporta stato di errore, indicatore di campo obbligatorio con testo nascosto per screen reader e personalizzazione tramite slot.

Import

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

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`label`	`string`	obbligatorio	Testo della label
`htmlFor`	`string`	—	ID dell'input associato (corrisponde all'attributo `for`)
`id`	`string`	—	ID della label (per `aria-labelledby`)
`required`	`boolean`	`false`	Mostra asterisco e testo "obbligatorio" per screen reader
`error`	`boolean`	`false`	Stato di errore (cambia classe CSS)
`componentPrefix`	`string`	`'form'`	Prefisso per le classi CSS BEM (`hs-{prefix}-label`)
`labelClass`	`string`	`''`	Classe CSS aggiuntiva per la label

Slot

Slot	Scope	Descrizione
`default`	—	Testo personalizzato della label (sovrascrive la prop `label`)

Esempi

Label standard

Campo obbligatorio

Con stato di errore

<template>
  <FormLabel
    label="Email"
    html-for="email"
    :error="!emailValida"
  />
</template>

Con slot personalizzato

Integrazione con input custom

<template>
  <div class="space-y-1">
    <FormLabel
      label="Codice Fiscale"
      html-for="cf-input"
      :required="true"
      :error="cfError"
      component-prefix="inputmask"
    />
    <input id="cf-input" type="text" />
    <p v-if="cfError" class="text-red-500 text-sm">Codice fiscale non valido</p>
  </div>
</template>

Classi CSS Generate

Le classi CSS seguono la convenzione BEM con prefisso hs-{componentPrefix}:

Condizione	Classi applicate
Stato normale	`hs-{prefix}-label hs-{prefix}-label-default`
Stato errore	`hs-{prefix}-label hs-{prefix}-label-error`

Accessibilità

L'elemento <label> è associato all'input tramite l'attributo for (prop htmlFor)
Per i campi required viene renderizzato:
- <span aria-hidden="true">*</span> — asterisco visivo, ignorato dagli screen reader
- <span class="sr-only">(obbligatorio)</span> — testo leggibile solo dagli screen reader
Gli attributi HTML aggiuntivi passati al componente vengono propagati all'elemento <label> tramite v-bind="attrs"

TypeScript

import type { FormLabelProps } from '@pzeta/vue-components'

// FormLabelProps è definita internamente al componente
// Non è esportata come tipo dedicato dal package
// Usare le prop direttamente nel template

Nota: FormLabel è usato internamente da tutti i componenti form della libreria (InputText, InputNumber, Password, Textarea, InputMask). Va usato direttamente solo quando si costruisce un campo form personalizzato.

FormHelperText

Componente per testo di aiuto e messaggi di errore sotto i campi form. Il messaggio di errore ha priorità sul testo di aiuto. Supporta icona errore opzionale e ID per aria-describedby.

InputGroup

Wrapper per raggruppare un input con addon testuali o iconografici (prefix/suffix). Deve essere usato insieme a InputGroupAddon per aggiungere decoratori prima o dopo l'input.