Select

Questo è un vero <select> con il menu a tendina del browser — il che significa che funziona senza JavaScript, si apre correttamente su un telefono, ed è navigabile da tastiera senza nulla che arrivi da questa libreria.

select() è il controllo nudo; selectField() lo avvolge in un’etichetta, un testo di aiuto e un messaggio di errore, allo stesso modo di textField().

Select di base

Le opzioni possono essere semplici stringhe, nel qual caso il valore e l’etichetta coincidono.

selectField({
  label: 'Tema',
  name: 'theme',
  options: ['Chiaro', 'Scuro', 'Di sistema'],
})

Valori ed etichette

Passa degli oggetti quando il valore inviato è diverso dal testo che una persona legge. value segna l’opzione selezionata.

selectField({
  label: 'Output',
  name: 'output',
  value: 'dist',
  options: [
    { value: 'dist', label: 'dist/ — il predefinito' },
    { value: 'build', label: 'build/' },
    { value: 'public', label: 'public/', disabled: true },
  ],
})

Segnaposto

Un segnaposto viene renderizzato come prima opzione disattivata, selezionata quando value manca — così il campo parte vuoto senza essere una scelta valida.

selectField({
  label: 'Destinazione del deploy',
  name: 'target',
  placeholder: 'Scegli un host…',
  options: ['Netlify', 'Vercel', 'Cloudflare Pages', 'GitHub Pages'],
})

Gruppi

Una voce con un proprio array options diventa un <optgroup>.

selectField({
  label: 'Estensione della pagina',
  name: 'ext',
  value: '.ht.js',
  options: [
    { label: 'JavaScript', options: ['.ht.js', '.html.js'] },
    { label: 'TypeScript', options: ['.ht.ts', '.html.ts'] },
    { label: 'JSX', options: ['.ht.jsx', '.ht.tsx'] },
  ],
})

Dimensioni

stack({ gap: 'md' },
  selectField({ label: 'Piccolo', name: 'sm', size: 'sm', options: ['Uno', 'Due'] }),
  selectField({ label: 'Medio', name: 'md', size: 'md', options: ['Uno', 'Due'] }),
  selectField({ label: 'Grande', name: 'lg', size: 'lg', options: ['Uno', 'Due'] }),
)

Aiuto, errore e disattivato

Usata per l’attributo lang dell’html.
Scegli un framework per proseguire.
stack({ gap: 'lg' },
  selectField({
    label: 'Lingua',
    name: 'locale',
    options: ['it', 'es', 'fr'],
    help: 'Usata per l’attributo lang dell’html.',
  }),
  selectField({
    label: 'Framework',
    name: 'framework',
    placeholder: 'Scegline uno…',
    options: ['sitelo'],
    error: 'Scegli un framework per proseguire.',
  }),
  selectField({
    label: 'Piano',
    name: 'plan',
    options: ['Gratuito'],
    disabled: true,
  }),
)

Dai dati

Le opzioni sono semplicemente un array, quindi di solito arrivano da quello che data() ha già caricato per la pagina.

return (() => {
  const posts = [
    { slug: 'hello-world', title: 'Ciao mondo' },
    { slug: 'static-first', title: 'Prima lo statico' },
    { slug: 'no-runtime', title: 'Nessun runtime' },
  ]

  return selectField({
    label: 'Articolo in evidenza',
    name: 'featured',
    value: 'static-first',
    options: posts.map((post) => ({ value: post.slug, label: post.title })),
  })
})()

Props

PropTipoPredefinitoDescrizione
optionsSelectOption[][]Stringhe, oggetti { value, label, disabled }, oppure { label, options } per un gruppo.
valuestring | number—Quale opzione è selezionata.
placeholderstring—Prima opzione disattivata, selezionata quando non c’è alcun valore.
size'sm' | 'md' | 'lg''md'Altezza del controllo e dimensione del testo.
namestring—Nome del campo del form; da esso si ricava l’id.
invalidbooleanfalseImposta aria-invalid. selectField lo imposta per te a partire da error.
disabledbooleanfalseDisattiva il controllo.

selectField() accetta in più label, help, error, required e fieldClass — vedi textField(). I figli vengono aggiunti dopo le opzioni generate, così puoi scriverne a mano quante te ne servono.