Input
Input
Un <input> nativo stilizzato — ogni tipo nativo (text, email, password, number, file, ...) condivide lo stesso trattamento visivo.
import { Input } from "@pompeitech/vesuvius-ui";Default
Con un'etichetta
Dimensioni
Le quattro dimensioni usano la stessa scala di altezza di Button, Select e MultiSelect:
Disabilitato
Input di tipo file
Il selettore nativo type="file" riceve lo stesso trattamento di bordo/focus degli input di testo, con il proprio pulsante stilizzato in coerenza:
Stato non valido
Imposta aria-invalid — non esiste una prop separata error/invalid, così lo stesso attributo che usano gli screen reader guida anche lo stile:
API
Input
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
type | React.HTMLInputTypeAttribute | "text" | Qualsiasi tipo di input nativo. |
size | "xs" | "sm" | "default" | "lg" | "default" | Altezza del controllo: 28, 32, 36 o 40 px. |
aria-invalid | boolean | Guida lo stile di stato non valido/errore — non esiste una prop error separata. |
Più ogni altra prop nativa di <input> (disabled, placeholder, value/defaultValue, onChange, required, min/max, accept, ...).
Comunemente abbinato a Label per la didascalia del campo e (in un contesto di form) a testo di aiuto/errore sotto di esso.
Accessibilità
Associa sempre un Input a una Label tramite htmlFor/id corrispondenti (come sopra) invece di affidarti solo al placeholder — il testo placeholder scompare non appena l'utente inizia a scrivere e non è un nome accessibile affidabile per ogni tecnologia assistiva.