Campo di testo

Qui ci sono due livelli. input() e textarea() sono i controlli nudi; textField() e textareaField() ne avvolgono uno in un’etichetta, un testo di aiuto e un messaggio di errore, e li collegano con for e aria-describedby. Ricorri ai secondi, a meno che tu non stia costruendo la disposizione da solo.

Campo di base

Nome

textField({ label: 'Nome', name: 'name', placeholder: 'Ada Lovelace' })

Testo di aiuto

Il testo di aiuto è collegato con aria-describedby, così uno screen reader lo legge come parte del campo invece che come testo sciolto dopo di esso.

La usiamo solo per segnalarti le build fallite.

textField({
  label: 'Email',
  name: 'email',
  type: 'email',
  help: 'La usiamo solo per segnalarti le build fallite.',
})

Obbligatorio ed errore

Un error marca il campo come non valido, colora il bordo, imposta aria-invalid e punta aria-describedby al messaggio — una prop, tutte e quattro le cose.

Progetto

Sito

Quello non è un URL.

stack({ gap: 'lg' },
  textField({ label: 'Progetto', name: 'project', required: true, value: '' }),
  textField({
    label: 'Sito',
    name: 'site',
    error: 'Quello non è un URL.',
    value: 'sitelo punto dev',
  }),
)

Dimensioni

Piccolo

Medio

Grande

stack({ gap: 'md' },
  textField({ label: 'Piccolo', name: 'small', size: 'sm', placeholder: 'sm' }),
  textField({ label: 'Medio', name: 'medium', size: 'md', placeholder: 'md' }),
  textField({ label: 'Grande', name: 'large', size: 'lg', placeholder: 'lg' }),
)

Ornamenti

Un prefisso o un suffisso attaccato al controllo stesso, per unità di misura e pezzi fissi di un valore.

Sito

https://

Timeout della build

secondi

stack({ gap: 'md' },
  textField({ label: 'Sito', name: 'url', startAdornment: 'https://', placeholder: 'example.com' }),
  textField({ label: 'Timeout della build', name: 'timeout', endAdornment: 'secondi', value: '30' }),
)

Disattivato e in sola lettura

Disattivato

Sola lettura

stack({ gap: 'md' },
  textField({ label: 'Disattivato', name: 'disabled', value: 'Non modificabile', disabled: true }),
  textField({ label: 'Sola lettura', name: 'readonly', value: 'dist/', readonly: true }),
)

Più righe

textareaField() è lo stesso campo attorno a un <textarea>. Il suo valore è contenuto dell’elemento invece che un attributo, cosa di cui il componente si occupa al posto tuo.

Descrizione

Mostrata nei risultati di ricerca e nelle schede social.

textareaField({
  label: 'Descrizione',
  name: 'description',
  rows: 4,
  help: 'Mostrata nei risultati di ricerca e nelle schede social.',
  value: 'Generazione di siti statici senza configurazione, mossa da Vite.',
})

In un form

Nome

Messaggio

card(
  cardBody(
    stack({ gap: 'md' },
      textField({ label: 'Nome', name: 'contact-name', required: true }),
      textField({ label: 'Email', name: 'contact-email', type: 'email', required: true }),
      textareaField({ label: 'Messaggio', name: 'message', rows: 3 }),
    ),
  ),
  cardFooter({ divided: true, style: 'justify-content: flex-end' },
    button({ variant: 'ghost', color: 'neutral' }, 'Annulla'),
    button({ type: 'submit' }, 'Invia'),
  ),
)

Costruirlo da sé

field() è il solo involucro — accetta come figli qualunque controllo, così puoi mettere due input su una riga, o un controllo che questa libreria non ha, sotto lo stesso trattamento di etichetta ed errore.

Una sola etichetta non può dare il nome a due controlli, quindi qui ogni input ha bisogno di un proprio nome accessibile. È quello che fanno gli aria-label: l’etichetta visibile dà il nome alla coppia, e ogni input dice quale estremità è.

Intervallo di date

Entrambi gli estremi sono inclusi.

field({ label: 'Intervallo di date', help: 'Entrambi gli estremi sono inclusi.' },
  stack({ direction: 'row', gap: 'sm' },
    input({ type: 'date', name: 'from', 'aria-label': 'Da' }),
    input({ type: 'date', name: 'to', 'aria-label': 'A' }),
  ),
)

Props

textField e textareaField

Prop	Tipo	Predefinito	Descrizione
`label`	`Child`	—	L’etichetta del campo. Da essa si ricava anche l’id del controllo quando non c’è name.
`name`	`string`	—	Nome del campo del form; da esso si ricava l’id.
`help`	`Child`	—	Suggerimento sotto il controllo, collegato con aria-describedby.
`error`	`Child \| false`	—	Messaggio di errore. Imposta anche aria-invalid sul controllo.
`required`	`boolean`	`false`	Marca l’etichetta e il controllo.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Altezza del controllo e dimensione del testo.
`type`	`string`	`'text'`	Qualunque tipo di input. Solo textField.
`startAdornment`	`Child`	—	Prefisso attaccato al controllo. Solo textField.
`endAdornment`	`Child`	—	Suffisso attaccato al controllo. Solo textField.
`value`	`string \| number`	—	Valore iniziale.
`fieldClass`	`string`	—	Classe per l’involucro invece che per il controllo.

Gli id si ricavano da name — o da label quando non c’è name — invece che da un contatore, così la stessa pagina produce lo stesso HTML a ogni build. Passa id per scavalcarli.

field

Prop	Tipo	Predefinito	Descrizione
`label`	`Child`	—	Il testo dell’etichetta.
`help`	`Child`	—	Suggerimento sotto il controllo.
`error`	`Child \| false`	—	Messaggio di errore; aggiunge anche lo stato non valido all’involucro.
`required`	`boolean`	`false`	Aggiunge il marcatore di obbligatorietà all’etichetta.
`for`	`string`	—	Id del controllo a cui l’etichetta si riferisce.