Выпадающий список

Это настоящий <select> с собственным выпадающим меню браузера — а значит, он работает без JavaScript, правильно открывается на телефоне и управляется с клавиатуры, ничего не получая от этой библиотеки.

select() — это голый элемент управления; selectField() оборачивает его подписью, подсказкой и сообщением об ошибке — ровно так же, как это делает textField().

Простой список

Опции могут быть обычными строками — тогда значение и подпись совпадают.

Тема

selectField({
  label: 'Тема',
  name: 'theme',
  options: ['Светлая', 'Тёмная', 'Системная'],
})

Значения и подписи

Передавайте объекты, когда отправляемое значение отличается от текста, который читает человек. value помечает выбранную опцию.

Каталог сборки

selectField({
  label: 'Каталог сборки',
  name: 'output',
  value: 'dist',
  options: [
    { value: 'dist', label: 'dist/ — по умолчанию' },
    { value: 'build', label: 'build/' },
    { value: 'public', label: 'public/', disabled: true },
  ],
})

Заполнитель

Заполнитель рисуется отключённой первой опцией, выбранной, когда value не задан, — так поле стартует пустым, не будучи при этом допустимым выбором.

Куда развёртывать

selectField({
  label: 'Куда развёртывать',
  name: 'target',
  placeholder: 'Выберите хостинг…',
  options: ['Netlify', 'Vercel', 'Cloudflare Pages', 'GitHub Pages'],
})

Группы

Запись с собственным массивом options превращается в <optgroup>.

Расширение страницы

selectField({
  label: 'Расширение страницы',
  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'] },
  ],
})

Размеры

Маленький

Средний

Большой

stack({ gap: 'md' },
  selectField({ label: 'Маленький', name: 'sm', size: 'sm', options: ['Раз', 'Два'] }),
  selectField({ label: 'Средний', name: 'md', size: 'md', options: ['Раз', 'Два'] }),
  selectField({ label: 'Большой', name: 'lg', size: 'lg', options: ['Раз', 'Два'] }),
)

Подсказка, ошибка и отключение

Язык

Используется для атрибута lang у html.

Фреймворк

Чтобы продолжить, выберите фреймворк.

Тариф

stack({ gap: 'lg' },
  selectField({
    label: 'Язык',
    name: 'locale',
    options: ['en', 'es', 'fr'],
    help: 'Используется для атрибута lang у html.',
  }),
  selectField({
    label: 'Фреймворк',
    name: 'framework',
    placeholder: 'Выберите один…',
    options: ['sitelo'],
    error: 'Чтобы продолжить, выберите фреймворк.',
  }),
  selectField({
    label: 'Тариф',
    name: 'plan',
    options: ['Бесплатный'],
    disabled: true,
  }),
)

Из данных

Опции — это просто массив, поэтому обычно они берутся из того, что data() уже загрузил для страницы.

Избранный пост

return (() => {
  const posts = [
    { slug: 'hello-world', title: 'Привет, мир' },
    { slug: 'static-first', title: 'Статика прежде всего' },
    { slug: 'no-runtime', title: 'Никакого рантайма' },
  ]

  return selectField({
    label: 'Избранный пост',
    name: 'featured',
    value: 'static-first',
    options: posts.map((post) => ({ value: post.slug, label: post.title })),
  })
})()

Пропсы

Проп	Тип	По умолчанию	Описание
`options`	`SelectOption[]`	`[]`	Строки, объекты { value, label, disabled } или { label, options } для группы.
`value`	`string \| number`	—	Какая опция выбрана.
`placeholder`	`string`	—	Отключённая первая опция, выбранная, когда значения нет.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Высота элемента и размер текста.
`name`	`string`	—	Имя поля формы; из него выводится id.
`invalid`	`boolean`	`false`	Выставляет aria-invalid. selectField делает это за вас на основе error.
`disabled`	`boolean`	`false`	Отключает элемент.

selectField() дополнительно принимает label, help, error, required и fieldClass — см. textField(). Потомки добавляются после сгенерированных опций, так что нужные можно дописать руками.