Componentes/Switch

Switch

Toggle on/off/mixed. Track de 32×16px com knob de 14px. Suporta estado indeterminado (mixed) com ícone de traço.

Formulário / Controles

Figma: 1359:1740

Preview

On / Off

Mixed (indeterminado)

Disabled

Código

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

<!-- On -->
<button class="trdr-switch" role="switch" aria-checked="true">
  <span class="trdr-switch-track trdr-switch-track-on">
    <span class="trdr-switch-knob"></span>
  </span>
  <span>Ativar notificações</span>
</button>

<!-- Off -->
<button class="trdr-switch" role="switch" aria-checked="false">
  <span class="trdr-switch-track">
    <span class="trdr-switch-knob"></span>
  </span>
  <span>Ativar notificações</span>
</button>

<!-- Mixed -->
<button class="trdr-switch" role="switch" aria-checked="mixed">
  <span class="trdr-switch-track trdr-switch-track-mixed">
    <span class="trdr-switch-mixed-icon">
      <span class="trdr-switch-mixed-dash"></span>
    </span>
  </span>
  <span>Ativar notificações</span>
</button>

<!-- Disabled -->
<button class="trdr-switch" role="switch" aria-checked="false" disabled>
  <span class="trdr-switch-track">
    <span class="trdr-switch-knob"></span>
  </span>
  <span>Desativado</span>
</button>

Dimensões

Variante	Largura	Altura
Track	`32px`	`16px`
Knob	`14px`	`14px`
Componente total	`—`	`24px`

Props / Variantes

Prop	Tipo	Valores
`Type`	enum	`OnOffMixed`
`Disabled`	boolean	`truefalse`

Tokens Utilizados

Propriedade	Token	Valor
Track On / Mixed	`action-brand-default`	`#00D4FF`
Track Off	`surface-primary`	`#4A4A4A`
Track Disabled	`surface-secondary`	`#222222`
Knob	`—`	`#FFFFFF`
Focus border	`border-focus`	`#00D4FF`
Label padrão	`content-primary`	`#FFFFFF`
Label disabled	`content-tertiary`	`#A4A4A4`

Anatomia

[button role=switch height=24px gap=8px]
  └── [Track 32×16px radius-full bg=action-brand-default|surface-primary]
        └── [Knob 14×14px radius-full white, esquerda=Off, direita=On]
        └── [Mixed: traço horizontal 8×1.5px branco centralizado]
  └── [Label 12px/500 font-secondary]

Notas

Knob: top=1px, left=1px (Off) ou right=1px (On). Foco via :focus-visible com outline border-focus.