Componentes/Combo Input

Combo Input

Input numérico split: área de valor (flex-1) + botão chevron (24×24px) separados por 1px gap. Altura 24px.

Formulário / Controles

Figma: 1551:11643

Preview

Estados

Com ícone

Código

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

<!-- Default -->
<div class="trdr-combo-input">
  <div class="trdr-combo-input-value">16</div>
  <button class="trdr-combo-input-chevron" aria-label="Abrir opções">
    <svg width="10" height="6" viewBox="0 0 10 6" fill="none">
      <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </button>
</div>

<!-- Hover -->
<div class="trdr-combo-input trdr-combo-input-hover">
  <div class="trdr-combo-input-value">16</div>
  <button class="trdr-combo-input-chevron">...</button>
</div>

<!-- Selected Input -->
<div class="trdr-combo-input trdr-combo-input-selected-input">
  <div class="trdr-combo-input-value">16</div>
  <button class="trdr-combo-input-chevron">...</button>
</div>

Dimensões

Variante	Largura	Altura
Altura	`—`	`24px`
Chevron	`24px`	`24px`

Props / Variantes

Prop	Tipo	Valores
`State`	enum	`DefaultHoverSelected InputSelected Chevron`
`Icon Lead`	boolean	`truefalse`

Tokens Utilizados

Propriedade	Token	Valor
BG value	`surface-primary`	`#4A4A4A`
BG chevron default	`surface-primary`	`#4A4A4A`
Chevron border	`border-focus`	`#00D4FF`
Border hover	`border-strong`	`#A4A4A4`
Selected chevron bg	`surface-brand`	`#00D4FF29`
Texto	`content-primary`	`#FFFFFF`

Anatomia

[div display=flex gap=1px height=24px]
  └── [Input Value: flex=1, radius=5px 0 0 5px, bg=surface-primary]
        └── [Icon Lead 24×24px opcional]
        └── [Valor numérico 12px/500]
  └── [Chevron: 24×24px, radius=0 5px 5px 0, border=border-focus]
        └── [ChevronDown SVG]