Componentes/Text Input

Text Input

Campo de texto com 3 variantes (Single Line, Multi Line, Quick Action), estados de validação e 2 tamanhos.

Formulário / Controles

Figma: 1327:17000

Preview

Single Line — Default (24px)

Single Line — Large (32px)

Com Ícone — Default (24px)

Com Ícone — Large (32px)

Variable

Quick Action (32px)

Validação de Estado

Multi Line (textarea)

Código

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

<!-- Single Line Default (14px) -->
<div class="trdr-text-input">
  <input type="text" placeholder="Placeholder" />
</div>

<!-- Single Line Large (14px, 32px height) -->
<div class="trdr-text-input trdr-text-input-lg">
  <input type="text" placeholder="Placeholder" />
</div>

<!-- Com ícone esquerdo e botão clear -->
<div class="trdr-text-input trdr-text-input-icon">
  <span class="trdr-text-input-icon-slot" aria-hidden="true">
    <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
      <circle cx="5.5" cy="5.5" r="4.5" stroke="currentColor" stroke-width="1.5"/>
      <path d="M9 9L12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
    </svg>
  </span>
  <input type="text" placeholder="Buscar..." value="WINFUT" />
  <button class="trdr-text-input-clear" type="button" aria-label="Limpar campo">
    <svg width="11" height="11" viewBox="0 0 11 11" fill="none" aria-hidden="true">
      <path d="M1 1L10 10M10 1L1 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
    </svg>
  </button>
</div>

<!-- Quick Action (32px, texto tertiary, gap 8px) -->
<div class="trdr-text-input trdr-text-input-quick">
  <span class="trdr-text-input-icon-slot" aria-hidden="true">
    <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
      <circle cx="5.5" cy="5.5" r="4.5" stroke="currentColor" stroke-width="1.5"/>
      <path d="M9 9L12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
    </svg>
  </span>
  <input type="text" placeholder="Filtrar..." />
</div>

<!-- Variable state (borda sempre visível, 11px) -->
<div class="trdr-text-input trdr-text-input-variable">
  <input type="text" value="WINFUT" />
</div>

<!-- Multi Line -->
<div class="trdr-text-input trdr-text-input-multiline">
  <textarea rows="3" placeholder="Observações..."></textarea>
</div>

<!-- Error / Warning / Success -->
<div class="trdr-text-input trdr-text-input-error">
  <input type="text" value="Valor inválido" />
</div>

<!-- Disabled -->
<div class="trdr-text-input trdr-text-input-disabled">
  <input type="text" value="Indisponível" disabled />
</div>

Dimensões

Variante	Largura	Altura
Default (Single Line)	`—`	`24px`
Large (Single Line)	`—`	`32px`
Quick Action	`—`	`32px`
Multi Line	`—`	`auto (min 56px)`
Icon slot	`24px`	`24px`

Props / Variantes

Prop	Tipo	Valores
`variant`	enum	`single-linemulti-linequick-action`
`size`	enum	`defaultlarge`
`validation`	enum	`defaulterrorwarningsuccess`
`iconLeft`	boolean	`truefalse`
`disabled`	boolean	`truefalse`
`readOnly`	boolean	`truefalse`
`placeholder`	string
`onClear`	function

Tokens Utilizados

Propriedade	Token	Valor
Background	`surface-primary`	`#4A4A4A`
Border focus	`border-focus`	`#00D4FF`
Border multi-line/variable/disabled	`border-strong`	`#A4A4A4`
Texto Single Line	`content-primary`	`#FFFFFF`
Texto Quick Action	`content-tertiary`	`#A4A4A4`
Placeholder	`content-tertiary`	`#A4A4A4`
Texto disabled	`content-disabled`	`#4A4A4A`
Borda error	`content-error`	`#F34F45`
Borda warning	`content-warning`	`#FFD35A`
Borda success	`content-success`	`#4FE290`

Anatomia

[div wrapper h=24px border-radius=5px bg=surface-primary border=transparent gap=4px]
  └── [span icon-slot 24×24px, opcional] → ícone de busca 13px
  └── [input flex=1 bg=transparent no-border 14px/400]
  └── [button clear 24×24px, opcional, aparece quando iconLeft + value]
— Large: h=32px, mesma tipografia (14px/400)
— Multi Line: [div wrapper padding=4px_8px border=border-strong auto-height]
  └── [textarea flex=1 resize=none 11px/450]
— Quick Action: h=32px padding=0_4px gap=8px sempre com icon-slot, texto 11px/450 cor tertiary
— Variable: padding=0_4px border=border-strong sempre visível, texto 11px/450

Notas

Quick Action é uma variante compacta para inputs em toolbars — texto em cor tertiary (#A4A4A4), sempre com ícone de busca. Variable é o estado de input de fórmula/variável com borda sempre visível. Border radius fixo: 5px. O botão clear só aparece quando iconLeft=true e há valor digitado.