Тумблер

Тумблер нужен для настройки, которая применяется, как только его переключили. Флажок — для выбора, который вы подтверждаете позже кнопкой отправки. Если ваш элемент стоит в форме с «Сохранить» внизу, это флажок.

Компонент называется toggle(), а не switch(), по скучной, но неустранимой причине: switch — зарезервированное слово, и именем импорта быть не может. Внутри это настоящий <input type="checkbox"> с role="switch".

Простой тумблер

Публичный сайтВключено

stack({ direction: 'row', gap: 'lg' },
  toggle({ label: 'Публичный сайт', name: 'public' }),
  toggle({ label: 'Включено', name: 'on', checked: true }),
)

Цвета

stack({ direction: 'row', gap: 'lg', wrap: true },
  toggle({ label: 'Primary', checked: true, color: 'primary' }),
  toggle({ label: 'Neutral', checked: true, color: 'neutral' }),
  toggle({ label: 'Success', checked: true, color: 'success' }),
  toggle({ label: 'Warning', checked: true, color: 'warning' }),
  toggle({ label: 'Danger', checked: true, color: 'danger' }),
)

Отключено

Выключено и закрепленоВключено и закреплено

stack({ direction: 'row', gap: 'lg' },
  toggle({ label: 'Выключено и закреплено', disabled: true }),
  toggle({ label: 'Включено и закреплено', checked: true, disabled: true }),
)

Без подписи

Тумблеру без видимой подписи всё равно нужно доступное имя. Передайте aria-label — он проваливается на input.

toggle({ 'aria-label': 'Включить поиск Pagefind', checked: true })

Список настроек

Обычная форма: подпись слева, тумблер справа, по строке на настройку.

Поиск Pagefind
Индексирует каждую страницу в конце сборки.
Оптимизация изображений
Меняет размер и формат картинок на сборке. Нужен sharp.
Серверные острова
Рендерит помеченные области в момент запроса.

return list(
  [
    ['Поиск Pagefind', 'Индексирует каждую страницу в конце сборки.', true],
    ['Оптимизация изображений', 'Меняет размер и формат картинок на сборке. Нужен sharp.', true],
    ['Серверные острова', 'Рендерит помеченные области в момент запроса.', false],
  ].map(([name, description, on]) =>
    listItem({
      title: name,
      description,
      end: toggle({ 'aria-label': name, checked: on }),
    }),
  ),
)

Пропсы

Проп	Тип	По умолчанию	Описание
`label`	`Child`	—	Текст рядом с тумблером. Если его нет, используйте aria-label.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Цвет дорожки во включённом состоянии.
`checked`	`boolean`	`false`	Включён ли изначально.
`name`	`string`	—	Имя поля формы.
`disabled`	`boolean`	`false`	Отключает input и приглушает строку.

Всё остальное проваливается на <input>, где и место для onchange и aria-*.