Lista wyboru

To prawdziwy <select> z własną listą rozwijaną przeglądarki — co oznacza, że działa bez JavaScriptu, otwiera się poprawnie na telefonie i da się go obsłużyć klawiaturą bez niczego z tej biblioteki.

select() to goła kontrolka; selectField() opakowuje ją w etykietę, tekst pomocy i komunikat błędu, tak samo jak robi to textField().

Podstawowa lista

Opcje mogą być zwykłymi ciągami znaków — wtedy wartość i etykieta są takie same.

Motyw

selectField({
  label: 'Motyw',
  name: 'theme',
  options: ['Jasny', 'Ciemny', 'Systemowy'],
})

Wartości i etykiety

Podaj obiekty, gdy wysyłana wartość różni się od tekstu, który czyta człowiek. value oznacza wybraną opcję.

Wyjście

selectField({
  label: 'Wyjście',
  name: 'output',
  value: 'dist',
  options: [
    { value: 'dist', label: 'dist/ — domyślne' },
    { value: 'build', label: 'build/' },
    { value: 'public', label: 'public/', disabled: true },
  ],
})

Tekst zastępczy

Tekst zastępczy renderuje się jako wyłączona pierwsza opcja, zaznaczona, gdy nie ma value — więc pole startuje puste, nie będąc przy tym poprawnym wyborem.

Cel wdrożenia

selectField({
  label: 'Cel wdrożenia',
  name: 'target',
  placeholder: 'Wybierz hosting…',
  options: ['Netlify', 'Vercel', 'Cloudflare Pages', 'GitHub Pages'],
})

Grupy

Wpis z własną tablicą options staje się elementem <optgroup>.

Rozszerzenie strony

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

Rozmiary

Mały

Średni

Duży

stack({ gap: 'md' },
  selectField({ label: 'Mały', name: 'sm', size: 'sm', options: ['Jeden', 'Dwa'] }),
  selectField({ label: 'Średni', name: 'md', size: 'md', options: ['Jeden', 'Dwa'] }),
  selectField({ label: 'Duży', name: 'lg', size: 'lg', options: ['Jeden', 'Dwa'] }),
)

Pomoc, błąd i wyłączenie

Język

Używany w atrybucie lang elementu html.

Framework

Wybierz framework, żeby przejść dalej.

Plan

stack({ gap: 'lg' },
  selectField({
    label: 'Język',
    name: 'locale',
    options: ['pl', 'es', 'fr'],
    help: 'Używany w atrybucie lang elementu html.',
  }),
  selectField({
    label: 'Framework',
    name: 'framework',
    placeholder: 'Wybierz jeden…',
    options: ['sitelo'],
    error: 'Wybierz framework, żeby przejść dalej.',
  }),
  selectField({
    label: 'Plan',
    name: 'plan',
    options: ['Darmowy'],
    disabled: true,
  }),
)

Z danych

Opcje to po prostu tablica, więc zwykle pochodzą z tego, co data() już wczytało dla strony.

Wyróżniony wpis

return (() => {
  const posts = [
    { slug: 'hello-world', title: 'Witaj świecie' },
    { slug: 'static-first', title: 'Najpierw statyczne' },
    { slug: 'no-runtime', title: 'Bez runtime’u' },
  ]

  return selectField({
    label: 'Wyróżniony wpis',
    name: 'featured',
    value: 'static-first',
    options: posts.map((post) => ({ value: post.slug, label: post.title })),
  })
})()

Propsy

Prop	Typ	Domyślnie	Opis
`options`	`SelectOption[]`	`[]`	Ciągi znaków, obiekty { value, label, disabled } albo { label, options } dla grupy.
`value`	`string \| number`	—	Która opcja jest wybrana.
`placeholder`	`string`	—	Wyłączona pierwsza opcja, zaznaczona, gdy nie ma wartości.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Wysokość kontrolki i rozmiar tekstu.
`name`	`string`	—	Nazwa pola formularza; z niej wyprowadzany jest id.
`invalid`	`boolean`	`false`	Ustawia aria-invalid. selectField ustawia to za Ciebie na podstawie error.
`disabled`	`boolean`	`false`	Wyłącza kontrolkę.

selectField() przyjmuje dodatkowo label, help, error, required i fieldClass — zobacz textField(). Dzieci dołączane są po wygenerowanych opcjach, więc możesz dopisać ręcznie te, których potrzebujesz.