Флажок

checkbox() рисует <label>, оборачивающий настоящий <input type="checkbox"> и тот квадратик, который вы видите. Input визуально скрыт, но никуда не делся: он получает фокус, отправляется вместе с формой, а вся подпись служит зоной нажатия — галочка рисуется из собственного состояния :checked, без всякого скрипта.

Простой флажок

stack({ direction: 'row', gap: 'lg' },
  checkbox({ label: 'Присылать новости на почту', name: 'updates' }),
  checkbox({ label: 'Отмечен', name: 'checked', checked: true }),
)

Цвета

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

Отключено

stack({ direction: 'row', gap: 'lg' },
  checkbox({ label: 'Недоступно', disabled: true }),
  checkbox({ label: 'Включено и закреплено', checked: true, disabled: true }),
)

Длинные подписи

Квадратик остаётся на одной линии с первой строкой, а не центрируется относительно всего абзаца.

checkbox({
  label: 'Запускать аудит Lighthouse после каждой сборки и валить сборку, когда оценка падает ниже порога.',
  name: 'lighthouse',
  checked: true,
})

Группы

choiceGroup() строит набор флажков из данных, с общей легендой и общим name. Передайте массив в value, чтобы отметить несколько.

Генерировать
Каждый из них записывается в dist/ в конце сборки.
choiceGroup({
  legend: 'Генерировать',
  name: 'generate',
  type: 'checkbox',
  value: ['sitemap', 'rss'],
  options: [
    { value: 'sitemap', label: 'sitemap.xml' },
    { value: 'rss', label: 'rss.xml' },
    { value: 'pagefind', label: 'Индекс Pagefind' },
  ],
  help: 'Каждый из них записывается в dist/ в конце сборки.',
})

В строку

Категории
choiceGroup({
  legend: 'Категории',
  name: 'categories',
  type: 'checkbox',
  direction: 'row',
  value: ['performance'],
  options: ['performance', 'accessibility', 'seo'],
})

С field

Одиночному флажку подпись сверху нужна редко. Когда она нужна группе, field() даёт ей то же оформление подписи, подсказки и ошибки, что и текстовому полю.

Чтобы продолжить, нужно принять условия.
field({ label: 'Условия', error: 'Чтобы продолжить, нужно принять условия.' },
  checkbox({ label: 'Я принимаю условия', name: 'terms', color: 'danger' }),
)

Пропсы

ПропТипПо умолчаниюОписание
labelChild—Текст рядом с квадратиком. Опустите для голого элемента.
color'primary' | 'neutral' | 'success' | 'warning' | 'danger''primary'Цвет в отмеченном состоянии.
checkedbooleanfalseОтмечен ли изначально.
namestring—Имя поля формы.
valuestring | number—Значение, отправляемое в отмеченном состоянии.
disabledbooleanfalseОтключает input и приглушает подпись.

Всё остальное попадает на <input>, а не на подпись — так что required, onchange и data-* идут туда, куда вы и ждёте. Для оформления самой подписи используйте class.

Про набор, построенный из данных, см. choiceGroup() на странице Радиогруппа: он принимает одни и те же опции в обоих случаях, переключаясь через type: 'checkbox'.