Checkbox

Caixa de seleção com 3 estados: Checked, Unchecked e Mixed (indeterminado). 16×16px, border-radius 5px.

Formulário / Controles

Figma: 1462:18059

Código

Copie e cole no Claude Code para implementar este componente em pixel-perfect usando os tokens TRDR.

<!-- Checked -->
<label class="trdr-checkbox">
  <input type="checkbox" checked />
  <span class="trdr-checkbox-box trdr-checkbox-checked">
    <svg width="8" height="7" viewBox="0 0 8 7" fill="none">
      <path d="M1 3L3 5.5L7 1" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </span>
  <span>Aceitar termos</span>
</label>

<!-- Unchecked -->
<label class="trdr-checkbox">
  <input type="checkbox" />
  <span class="trdr-checkbox-box"></span>
  <span>Receber atualizações</span>
</label>

<!-- Mixed (indeterminado) -->
<label class="trdr-checkbox">
  <input type="checkbox" />
  <span class="trdr-checkbox-box trdr-checkbox-checked trdr-checkbox-mixed">
    <svg width="8" height="2" viewBox="0 0 8 2" fill="none">
      <path d="M1 1H7" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
    </svg>
  </span>
  <span>Selecionar todos</span>
</label>

Dimensões

Variante	Largura	Altura
Box	`16px`	`16px`

Props / Variantes

Prop	Tipo	Valores
`Type`	enum	`CheckedUncheckedMixed`
`State`	enum	`DefaultFocused`
`Disabled`	boolean	`truefalse`

Tokens Utilizados

Propriedade	Token	Valor
BG Checked / Mixed	`action-brand-default`	`#00D4FF`
BG Unchecked	`surface-secondary`	`#222222`
Border padrão	`border-default`	`#4A4A4A`
Border hover	`border-strong`	`#A4A4A4`
Focus ring	`border-focus`	`#00D4FF`
Check / Dash	`—`	`#FFFFFF`

Anatomia