FormHelperText

Import

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

Esempio Base

Props

Slot

Esempi

Helper text standard

Messaggio di errore

Con icona di errore

Con ID per accessibilità

Con slot personalizzati

Comportamento

• Quando error è presente, viene mostrato il messaggio di errore e helperText viene nascosto
• Quando error è null/undefined e helperText è presente, viene mostrato il testo di aiuto
• Il messaggio di errore ha role="alert" per notificare gli screen reader automaticamente
• Se entrambi sono null viene reso un segnaposto invisibile che riserva lo spazio del messaggio (reserveSpace, default true)

Spazio riservato al messaggio

Tutti i campi form riservano lo spazio del messaggio anche quando non c'è nulla da mostrare: al posto del testo viene reso un segnaposto .hs-form-message-placeholder (visibility: hidden, aria-hidden) con le stesse metriche del messaggio reale. La comparsa di un errore di validazione quindi non sposta i campi sottostanti.

Per rimuovere lo spazio riservato in un layout compatto:

.form-compatto .hs-form-message-placeholder {
  display: none;
}

Colonne strette: riservare più righe

Il segnaposto riserva una riga. In una colonna stretta il messaggio reale va a capo e la sua comparsa sposta comunque il contenuto sottostante: in una colonna da 136px Questo campo è obbligatorio occupa due righe, per 20px di scarto.

Messaggio e segnaposto condividono una min-height espressa in righe, regolata dalla custom property --hs-form-message-lines (default 1). Essendo ereditata si dichiara al livello che serve — un campo, una colonna o l'intero form — senza aggiungere spazio vuoto sotto i campi che non ne hanno bisogno:

/* Griglia a 3 colonne: i messaggi ci stanno in due righe */
.form-griglia-stretta {
  --hs-form-message-lines: 2;
}

In alternativa, sul singolo FormHelperText, la prop reserveLines:

<FormHelperText :error="errore" :reserve-lines="2" component-prefix="inputtext" />

Con due righe riservate l'altezza del campo resta identica con e senza errore.

Classi CSS Generate

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

Accessibilità

• Il contenitore dell'errore ha role="alert" per notifica immediata agli screen reader
• Le prop helperId e errorId permettono di collegare gli elementi all'input tramite aria-describedby
• InputMask usa questa feature internamente per gestire l'accessibilità degli ID

TypeScript

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

// FormHelperTextProps è definita internamente al componente
// Non è esportata come tipo dedicato dal package

const helperProps = {
  helperText: 'Testo di aiuto',
  error: null,
  showErrorIcon: false,
  componentPrefix: 'mycomponent',
}

Nota: FormHelperText è usato internamente da tutti i componenti form della libreria. Va usato direttamente solo quando si costruisce un campo form personalizzato.