Select

Das ist ein echtes <select> mit dem browsereigenen Dropdown — es funktioniert also ohne JavaScript, öffnet sich am Telefon korrekt und lässt sich per Tastatur bedienen, ohne dass diese Bibliothek etwas beisteuert.

select() ist das nackte Steuerelement; selectField() wickelt es in Label, Hilfetext und Fehlermeldung, genau wie textField() es tut.

Einfaches Select

Optionen dürfen einfache Strings sein, dann sind Wert und Label dasselbe.

Theme

selectField({
  label: 'Theme',
  name: 'theme',
  options: ['Hell', 'Dunkel', 'System'],
})

Werte und Labels

Übergib Objekte, wenn der abgeschickte Wert vom gelesenen Text abweicht. value markiert die ausgewählte Option.

Ausgabe

selectField({
  label: 'Ausgabe',
  name: 'output',
  value: 'dist',
  options: [
    { value: 'dist', label: 'dist/ — der Standard' },
    { value: 'build', label: 'build/' },
    { value: 'public', label: 'public/', disabled: true },
  ],
})

Platzhalter

Ein Platzhalter erscheint als deaktivierte erste Option, ausgewählt, solange value fehlt — das Feld startet also leer, ohne eine gültige Wahl zu sein.

Deploy-Ziel

selectField({
  label: 'Deploy-Ziel',
  name: 'target',
  placeholder: 'Host wählen…',
  options: ['Netlify', 'Vercel', 'Cloudflare Pages', 'GitHub Pages'],
})

Gruppen

Ein Eintrag mit eigenem options-Array wird zu einer <optgroup>.

Seitenendung

selectField({
  label: 'Seitenendung',
  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'] },
  ],
})

Größen

Klein

Mittel

Groß

stack({ gap: 'md' },
  selectField({ label: 'Klein', name: 'sm', size: 'sm', options: ['Eins', 'Zwei'] }),
  selectField({ label: 'Mittel', name: 'md', size: 'md', options: ['Eins', 'Zwei'] }),
  selectField({ label: 'Groß', name: 'lg', size: 'lg', options: ['Eins', 'Zwei'] }),
)

Hilfe, Fehler und deaktiviert

Sprache

Wird für das lang-Attribut des html verwendet.

Framework

Wähle ein Framework, um fortzufahren.

Tarif

stack({ gap: 'lg' },
  selectField({
    label: 'Sprache',
    name: 'locale',
    options: ['en', 'es', 'fr'],
    help: 'Wird für das lang-Attribut des html verwendet.',
  }),
  selectField({
    label: 'Framework',
    name: 'framework',
    placeholder: 'Eines auswählen…',
    options: ['sitelo'],
    error: 'Wähle ein Framework, um fortzufahren.',
  }),
  selectField({
    label: 'Tarif',
    name: 'plan',
    options: ['Kostenlos'],
    disabled: true,
  }),
)

Aus Daten

Optionen sind nur ein Array, sie kommen also meist aus dem, was data() für die Seite ohnehin geladen hat.

Hervorgehobener Beitrag

return (() => {
  const posts = [
    { slug: 'hello-world', title: 'Hallo Welt' },
    { slug: 'static-first', title: 'Statisch zuerst' },
    { slug: 'no-runtime', title: 'Kein Runtime' },
  ]

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

Props

Prop	Typ	Standard	Beschreibung
`options`	`SelectOption[]`	`[]`	Strings, { value, label, disabled }-Objekte, oder { label, options } für eine Gruppe.
`value`	`string \| number`	—	Welche Option ausgewählt ist.
`placeholder`	`string`	—	Deaktivierte erste Option, ausgewählt, solange es keinen Wert gibt.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Höhe des Steuerelements und Textgröße.
`name`	`string`	—	Name des Formularfelds; die id wird daraus abgeleitet.
`invalid`	`boolean`	`false`	Setzt aria-invalid. selectField erledigt das anhand von error.
`disabled`	`boolean`	`false`	Deaktiviert das Steuerelement.

selectField() nimmt zusätzlich label, help, error, required und fieldClass — siehe textField(). Kinder werden nach den erzeugten Optionen angehängt, du kannst also beliebige von Hand schreiben.