Componentes/SearchInput

SearchInput

Input de busca com ícone lupa à esquerda. Baseado no TextInput (.trdr-input) com wrapper posicional para o ícone. Modo controlado (value/onChange) ou URL-sync (paramName).

Formulário / Controles

Figma: —

Preview

Controlado

Placeholder

Código

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

<!-- Search Input -->
<div class="trdr-search-input">
  <svg class="trdr-search-input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="11" cy="11" r="8" />
    <line x1="21" y1="21" x2="16.65" y2="16.65" />
  </svg>
  <input type="text" class="trdr-input" placeholder="Buscar..." />
</div>

Dimensões

Variante	Largura	Altura
Default	`100% (fill, max 400px)`	`24px`

Props / Variantes

Prop	Tipo	Valores
`Placeholder`	string	`Buscar...`
`Mode`	enum	`ControlledURL-sync`

Tokens Utilizados

Propriedade	Token	Valor
Icon color	`content-tertiary`	`#A4A4A4`
Input BG	`surface-primary`	`#141519`
Input border	`border-default`	`#4A4A4A`
Input text	`content-primary`	`#FFFFFF`
Placeholder	`content-disabled`	`#4A4A4A`

Anatomia

[div.trdr-search-input]
  ├── [svg.trdr-search-input-icon 16×16]  ← absolute, left 10px, vertical-center
  └── [input.trdr-input]  ← padding-left 36px para dar espaço ao ícone

Herda todos os estilos de .trdr-input (TextInput)