Forms

FloatLabel

Wrapper che trasforma una label statica in una label fluttuante che si anima sopra l'input al focus o quando il campo ha un valore. Supporta tre varianti di posizionamento.

Import

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

Esempio Base

Importante: Il campo deve avere placeholder=" " (spazio) affinché l'animazione della label funzioni correttamente.

Props

Prop	Tipo	Default	Descrizione
`variant`	`'over' \| 'in' \| 'on'`	`'over'`	Variante di posizionamento della label
`invalid`	`boolean`	`false`	Stato di errore: applica stile invalid alla label
`disabled`	`boolean`	`false`	Stato disabilitato: riduce l'opacità del wrapper
`class`	`string`	—	Classi CSS aggiuntive per il container

Varianti

Variante	Comportamento
`over`	La label parte dentro il campo e si sposta sopra al focus o con valore (default)
`in`	La label parte dentro il campo e si sposta in alto all'interno al focus
`on`	La label si posiziona sul bordo superiore del campo

Slot

Slot	Scope	Descrizione
`default`	—	Input e label da raggruppare (in questo ordine: prima l'input, poi il `<label>`)

Esempi

Tre varianti a confronto

Con stato invalid

<template>
  <FloatLabel :invalid="!email" class="max-w-md">
    <InputText
      id="email-field"
      v-model="email"
      type="email"
      placeholder=" "
      class="w-full"
      :invalid="!email"
    />
    <label for="email-field">Email</label>
  </FloatLabel>
</template>

Con Textarea

Con Select

Note di Utilizzo

Il <label> deve essere inserito dopo l'input nel DOM (lo stile CSS usa il selettore +)
L'attributo for della label deve corrispondere all'id dell'input
L'attributo placeholder=" " (con uno spazio) è necessario per il corretto comportamento dell'animazione CSS

Accessibilità

La label è collegata all'input tramite for/id standard HTML
FloatLabel è un wrapper puramente visivo: l'accessibilità dipende dalla corretta associazione label/input tramite attributi HTML nativi
Lo stato invalid aggiunge classe CSS ma non attributi ARIA (gestiti dall'input sottostante)

TypeScript

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

const floatLabelProps: FloatLabelProps = {
  variant: 'over',
  invalid: false,
  disabled: false,
}

FileUpload

Componente upload file con selezione tramite click o drag-and-drop, validazione dimensione e tipo, preview immagini e gestione lista file selezionati.

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.