Input
Campo de entrada de texto com label, ícone opcional e mensagem de apoio. Suporta variante textarea. Dark mode automático via tokens semânticos.
Padrão
Campo de texto simples. Interaja com o primeiro exemplo para ver hover e foco.
Carregando exemplo...
Com ícone
Ícone posicionado à direita do campo. No erro, o ícone também assume a cor de erro.
Carregando exemplo...
Textarea
Variante para textos longos. Usa a mesma classe `.input` aplicada ao elemento `textarea`.
Carregando exemplo...
Anatomia
Estrutura interna do componente e seus elementos.
| Parte | Elemento | Descrição |
|---|---|---|
| Grupo | .input-group | Wrapper flex column |
| Label | .input-label | Inter 14px medium, line-height 24px |
| Container | .input-container | Position relative para ícones |
| Campo | .input | Altura 40px, padding 12px, radius 6px, borda 1px |
| Ícone | .input-icon | 18x18, position absolute, pointer-events none |
| Helper | .input-helper | Inter 12px regular, margin-top 4px |
Propriedades
Classes disponíveis para configurar o input.
| Propriedade | Tipo | Default | Descrição |
|---|---|---|---|
.input-group | classe | — | Wrapper flex column do campo. |
.input-label | classe | — | Label do campo (14px medium). |
.input-label-required | classe | — | Adiciona asterisco vermelho ao label. |
.input-container | classe | — | Container relativo para posicionar ícones. |
.input | classe | — | Campo de entrada (input ou textarea). |
.input-icon | classe | — | Ícone posicionado dentro do campo (18x18). |
.input-icon-right | classe | — | Posiciona o ícone à direita. |
.input-has-icon-right | classe | — | Aplica padding-right no input para acomodar o ícone. |
.input-helper | classe | — | Texto de apoio abaixo do campo (12px). |
.has-error | classe | — | Aplicar no .input-group para ativar estado de erro. |
Código
Snippets prontos para copiar e usar no seu projeto.
Input simples
html
<div class="input-group">
<label class="input-label">Nome completo</label>
<div class="input-container">
<input type="text" class="input" placeholder="Digite seu nome">
</div>
</div>Input com ícone
html
<div class="input-group">
<label class="input-label">Pesquisar</label>
<div class="input-container">
<input type="text" class="input input-has-icon-right" placeholder="Buscar...">
<span class="input-icon input-icon-right">
<!-- SVG do ícone (18x18, viewBox 48x48) -->
</span>
</div>
</div>Input com erro
html
<div class="input-group has-error">
<label class="input-label">E-mail</label>
<div class="input-container">
<input type="email" class="input" value="email-invalido">
</div>
<span class="input-helper">Informe um e-mail válido</span>
</div>Label obrigatório
html
<div class="input-group">
<label class="input-label input-label-required">Campo obrigatório</label>
<div class="input-container">
<input type="text" class="input" placeholder="Preencha este campo">
</div>
</div>Textarea
html
<div class="input-group">
<label class="input-label">Descrição</label>
<div class="input-container">
<textarea class="input" placeholder="Digite uma descrição"></textarea>
</div>
</div>Desativado
html
<div class="input-group">
<label class="input-label">Campo bloqueado</label>
<div class="input-container">
<input type="text" class="input" placeholder="Indisponível" disabled>
</div>
</div>Tokens utilizados
Variáveis semânticas aplicadas ao componente.
| Token | Uso |
|---|---|
--surface-base-neutral-container-default | Background do campo |
--surface-base-neutral-container-hover | Background no hover |
--surface-base-neutral-container-emphasis | Background no disabled |
--border-base-neutral-default | Borda padrão |
--border-base-neutral-strong | Borda no foco |
--border-base-neutral-subtle | Borda no disabled |
--border-base-error-default | Borda no erro |
--text-base-neutral-default | Cor do label e texto digitado |
--text-base-neutral-subtle | Cor do placeholder |
--text-base-error-default | Cor do texto e helper no erro |
--icon-base-neutral-default | Cor do ícone |
--icon-base-error-default | Cor do ícone no erro |
--radius-default | Border-radius do campo (6px) |
--spacing-2 | Padding vertical / gap label→campo (8px) |
--spacing-3 | Padding horizontal (12px) |
--spacing-1 | Gap campo→helper (4px) |