Componentes/Radio Button

Radio Button

Seleção única com 2 variantes: Input (círculo 16×16px) e Button (pill 24px). Estados: Default, Active, Focused, Disabled.

Formulário / Controles

Figma: 1916:46361

Preview

Input variant

WINQ25WINFUTDesativado

Button variant

Código

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

<!-- Input On -->
<label class="trdr-radio-input">
  <input type="radio" name="mercado" checked />
  <span class="trdr-radio-circle trdr-radio-circle-on"></span>
  <span>WINQ25</span>
</label>

<!-- Input Off -->
<label class="trdr-radio-input">
  <input type="radio" name="mercado" />
  <span class="trdr-radio-circle"></span>
  <span>WINFUT</span>
</label>

<!-- Button Default -->
<button class="trdr-radio-button">Label</button>

<!-- Button Active -->
<button class="trdr-radio-button trdr-radio-button-active">Label</button>

Dimensões

Variante	Largura	Altura
Input circle	`16px`	`16px`
Button pill	`—`	`24px`

Props / Variantes

Prop	Tipo	Valores
`Variant`	enum	`InputButton`
`State`	enum	`DefaultActiveFocusedDisabled`
`Label`	boolean	`truefalse`

Tokens Utilizados

Propriedade	Token	Valor
Circle On bg	`action-brand-default`	`#00D4FF`
Circle Off bg	`surface-secondary`	`#222222`
Circle border	`border-default`	`#4A4A4A`
Dot (On)	`—`	`#FFFFFF`
Focus ring	`border-focus`	`#00D4FF`
Button border default	`border-subtle`	`#222222`
Button border active	`border-default`	`#4A4A4A`
Button bg active	`surface-brand`	`#00D4FF29`

Anatomia

[Input] → label > input[type=radio] hidden + círculo 16×16px + label text
[Button] → button pill 24px height | border varia por estado