Checkbox — Sinapse Design System

Default

Click no label ou na caixa toggla. Suporta required, name, value padrão de form HTML.

Aceito os termos de uso

<Checkbox name="terms">Aceito os termos de uso</Checkbox>

<template>
<label class="inline-flex items-center gap-2 cursor-pointer">
  <input type="checkbox" name="terms" class="w-6 h-6 rounded border-input text-primary focus-visible:ring-2 focus-visible:ring-ring" />
  <span class="text-sm text-foreground">Aceito os termos de uso</span>
</label>
</template>

<label className="inline-flex items-center gap-2 cursor-pointer">
<input type="checkbox" name="terms" className="w-6 h-6 rounded border-input text-primary focus-visible:ring-2 focus-visible:ring-ring" />
<span className="text-sm text-foreground">Aceito os termos de uso</span>
</label>

<label class="inline-flex items-center gap-2 cursor-pointer">
<input type="checkbox" name="terms" class="w-6 h-6 rounded border-input text-primary focus-visible:ring-2 focus-visible:ring-ring" />
<span class="text-sm text-foreground">Aceito os termos de uso</span>
</label>

Estados

Default, checked, disabled, disabled+checked.

Default Selecionado Desabilitado Desabilitado + Selecionado

<Checkbox>Default</Checkbox>
<Checkbox checked>Selecionado</Checkbox>
<Checkbox disabled>Desabilitado</Checkbox>
<Checkbox checked disabled>Desabilitado + Selecionado</Checkbox>

Grupo

Use múltiplos com mesmo name para form submitir array.

Especialidades Cardiologia Neurologia Ortopedia

<Checkbox name="esp[]" value="cardio">Cardiologia</Checkbox>
<Checkbox name="esp[]" value="neuro" checked>Neurologia</Checkbox>
<Checkbox name="esp[]" value="orto">Ortopedia</Checkbox>

Acessibilidade

Input nativo (<input type="checkbox">) sr-only — toda semântica e foco preservados
Label envolve input + caixa visual + texto, click em qualquer parte funciona
peer-focus-visible exibe outline 2px no foco por teclado

Props

Prop	Tipo	Default	Descrição
`id`	`string`	—	ID do `<input>`.
`name`	`string`	—	name HTML para form submit.
`value`	`string`	—	Valor submetido quando checked.
`checked`	`boolean`	`false`	Estado inicial.
`disabled`	`boolean`	`false`	Bloqueia interação.
`required`	`boolean`	`false`	Marca como obrigatório no submit.
`class`	`string`	—	Classes adicionais.