Caixa de seleção

checkbox() desenha um <label> a envolver um <input type="checkbox"> a sério e a caixa que vês. O input está escondido visualmente mas continua lá, por isso recebe foco, é submetido, e a etiqueta toda é área de clique — o visto é desenhado a partir do próprio estado :checked do input, sem script nenhum pelo meio.

Caixa básica

Enviar-me novidades por emailSelecionada

stack({ direction: 'row', gap: 'lg' },
  checkbox({ label: 'Enviar-me novidades por email', name: 'updates' }),
  checkbox({ label: 'Selecionada', name: 'checked', checked: true }),
)

Cores

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' }),
)

Desativado

IndisponívelLigada e bloqueada

stack({ direction: 'row', gap: 'lg' },
  checkbox({ label: 'Indisponível', disabled: true }),
  checkbox({ label: 'Ligada e bloqueada', checked: true, disabled: true }),
)

Etiquetas longas

A caixa mantém-se alinhada com a primeira linha em vez de se centrar perante um parágrafo.

Correr uma auditoria Lighthouse depois de cada construção, e falhar a construção quando uma pontuação descer abaixo do limiar.

checkbox({
  label: 'Correr uma auditoria Lighthouse depois de cada construção, e falhar a construção quando uma pontuação descer abaixo do limiar.',
  name: 'lighthouse',
  checked: true,
})

Grupos

choiceGroup() constrói um conjunto de caixas a partir de dados, com legenda e name partilhados. Passa um array em value para selecionar várias.

Gerar

sitemap.xmlrss.xmlÍndice Pagefind

Cada um é escrito em dist/ no fim da construção.

choiceGroup({
  legend: 'Gerar',
  name: 'generate',
  type: 'checkbox',
  value: ['sitemap', 'rss'],
  options: [
    { value: 'sitemap', label: 'sitemap.xml' },
    { value: 'rss', label: 'rss.xml' },
    { value: 'pagefind', label: 'Índice Pagefind' },
  ],
  help: 'Cada um é escrito em dist/ no fim da construção.',
})

Em linha

Categorias

performanceaccessibilityseo

choiceGroup({
  legend: 'Categorias',
  name: 'categories',
  type: 'checkbox',
  direction: 'row',
  value: ['performance'],
  options: ['performance', 'accessibility', 'seo'],
})

Com um field

Uma caixa isolada raramente precisa também de uma etiqueta por cima. Quando um grupo precisa, field() dá-lhe o mesmo tratamento de etiqueta, ajuda e erro que a um campo de texto.

TermosAceito os termos

Tens de aceitar os termos para continuar.

field({ label: 'Termos', error: 'Tens de aceitar os termos para continuar.' },
  checkbox({ label: 'Aceito os termos', name: 'terms', color: 'danger' }),
)

Props

Prop	Tipo	Predefinição	Descrição
`label`	`Child`	—	Texto ao lado da caixa. Omite-o para um controlo nu.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Cor quando selecionada.
`checked`	`boolean`	`false`	Se começa selecionada.
`name`	`string`	—	Nome do campo do formulário.
`value`	`string \| number`	—	Valor submetido quando selecionada.
`disabled`	`boolean`	`false`	Desativa o input e esbate a etiqueta.

Tudo o resto aterra no <input>, não na etiqueta — por isso required, onchange e data-* vão para onde esperas. Usa class para estilizar a própria etiqueta.

Para um conjunto construído a partir de dados, vê choiceGroup() na página Grupo de opções — aceita as mesmas opções em qualquer dos casos, comutado por type: 'checkbox'.