Forms

Textarea

Campo di testo multiriga con supporto per auto-resize, contatore caratteri e controllo del ridimensionamento manuale.

Import

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

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`string \| null`	`null`	Valore corrente (v-model)
`defaultValue`	`string \| null`	`null`	Valore di default (modalità non controllata)
`label`	`string \| null`	`null`	Label mostrata sopra il campo
`placeholder`	`string \| null`	`null`	Testo placeholder
`helperText`	`string \| null`	`null`	Testo di aiuto sotto il campo
`error`	`string \| null`	`null`	Messaggio di errore (sovrascrive helperText)
`variant`	`'outlined' \| 'filled'`	`'outlined'`	Variante visiva del campo. Il bordo di `outlined` usa `--color-field-border`, almeno 3:1 su ogni superficie (dalla 1.24.0)
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Dimensione del campo
`severity`	`'primary' \| 'secondary' \| 'success' \| 'info' \| 'warn' \| 'danger' \| 'contrast' \| 'help'`	`'primary'`	Colore focus e accenti
`rows`	`number`	`3`	Numero di righe visibili
`cols`	`number`	—	Numero di colonne
`autoResize`	`boolean`	`false`	Auto ridimensionamento altezza in base al contenuto
`minHeight`	`number`	—	Altezza minima per autoResize (in px)
`maxHeight`	`number`	—	Altezza massima per autoResize (in px)
`maxlength`	`number`	—	Lunghezza massima caratteri
`showCount`	`boolean`	`false`	Mostra contatore caratteri sotto il campo. Nel colore normale è `neutral-500` (chiaro) / `neutral-400` (scuro), almeno 4,5:1: prima `neutral-400` sul bianco dava 2,56:1 (dalla 1.24.0)
`resize`	`'none' \| 'both' \| 'horizontal' \| 'vertical'`	`'vertical'`	Direzione di ridimensionamento manuale (ignorato se `autoResize` è attivo)
`disabled`	`boolean`	`false`	Disabilita il campo
`readonly`	`boolean`	`false`	Campo in sola lettura
`required`	`boolean`	`false`	Campo obbligatorio
`invalid`	`boolean`	`false`	Stato di validazione invalido
`fluid`	`boolean`	`true`	Occupa tutta la larghezza disponibile
`loading`	`boolean`	`false`	Mostra indicatore di caricamento
`loadingIcon`	`string`	config globale	Classe CSS icona di caricamento
`inputId`	`string \| null`	auto-generato	ID dell'elemento textarea
`inputClass`	`string \| null`	—	Classe CSS aggiuntiva per la textarea
`inputStyle`	`string \| object \| null`	—	Stile inline per la textarea
`ariaLabel`	`string \| null`	—	Label ARIA per screen reader
`ariaLabelledby`	`string \| null`	—	ID elemento che funge da label ARIA
`autofocus`	`boolean`	`false`	Focus automatico al mount
`name`	`string \| null`	`null`	Nome del campo per form nativi

Emits

Evento	Payload	Descrizione
`update:modelValue`	`string \| null`	Aggiornamento v-model (null se stringa vuota)
`input`	`Event`	Ad ogni input dell'utente
`change`	`Event`	Al cambio del valore
`focus`	`FocusEvent`	Quando il campo riceve il focus
`blur`	`FocusEvent`	Quando il campo perde il focus
`keydown`	`KeyboardEvent`	Alla pressione di un tasto
`keyup`	`KeyboardEvent`	Al rilascio di un tasto

Slot

Slot	Scope	Descrizione
`counter`	`{ current: number, max: number \| undefined }`	Personalizzazione del contatore caratteri

Esempi

Con auto-resize

Con contatore caratteri

Con contatore personalizzato

Resize disabilitato

Con varianti

Accessibilità

La label è collegata alla textarea tramite for/id (ID auto-generato se non specificato)
aria-invalid viene impostato automaticamente quando invalid è true o quando error è presente
aria-busy viene impostato durante il caricamento (loading)
In stato loading il campo diventa non modificabile e non interattivo

TypeScript

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

const textareaProps: TextareaProps = {
  label: 'Descrizione',
  rows: 4,
  autoResize: true,
  maxlength: 500,
  showCount: true,
}

Slider

Cursore per la selezione di valori numerici con supporto range (due handle), orientamento verticale, step personalizzato e navigazione da tastiera completa.

TimePicker

Input orario con popup Clock picker analogico o compatto. Supporta formato 24h, step personalizzabili e modalita durata.