Pular para o conteúdo
Faculdade PhorteDesign System

Input

Em andamento

Campo de texto de uma linha. A borda de 2px com foco diz se o que foi digitado já basta — cinza quando não há regra ou o dado ainda está incompleto (com ícone vermelho), verde com dado suficiente, vermelha só no erro de verdade —, sempre com ícone junto da cor.

Função
Formulário e ação
Também chamado de
campo de texto, caixa de texto, text field, input
Mora em
app/components/atoms/Input.tsx
Última mudança
2026-09-30
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Com valor
  3. Estados
  4. Senha de 6 dígitos
  5. Erro
  6. Somente leitura
  7. Desabilitado
  8. Senha
  9. Com encaixes
  10. Mostrar senha

Quando usar

Para qualquer dado de uma linha — nome, e-mail, telefone, senha, CPF —, dentro de um FormField, que dá o rótulo, a dica e o erro.

Faça

  • Use dentro de um FormField: é ele que liga rótulo, dica e erro ao campo.
  • Dê uma regra (validar ou minLength) quando houver critério de "pronto" — é ela que liga o vermelho e o verde.
  • Use o type certo (email, tel, password): muda o teclado do celular.
  • Largura e margem pela className; o <input> em si, por classNameDoCampo.

Evite

  • Usar o placeholder como rótulo: ele some quando a pessoa começa a digitar.
  • Somar um ring- pela className: o foco já é a borda de 2px, e o anel extra é seu para conferir o contraste.
  • Confundir readOnly com disabled: somente leitura é dado decidido que a pessoa vê e copia; desabilitado sai do Tab e não vai no envio.

Quando não usar. Para texto longo, um <textarea>. Para escolher entre opções conhecidas, o Select ou o Radio. Para buscar, o SearchBar, que já é um formulário de busca.

Nota de uso

O foco é a borda de 2px, e não um anel: cinza (--border-focus) com o campo vazio, vermelho com dado insuficiente, verde com dado suficiente — as quatro cores passam de 3:1. O contrato vem de campoVariants, o mesmo do Select e do SearchBar. Se você somar um ring- pela className, ele se soma à borda e é seu: confira o contraste contra o fundo. error pinta a borda e emite aria-invalid. A className vai para a caixa externa (largura, margem); para estilizar o <input> em si, use classNameDoCampo. `readOnly` ou `disabled`: somente leitura (tracejado) é para dado decidido que a pessoa precisa ver e copiar; desabilitado é para campo que não se aplica agora — sai da tabulação e não vai no envio.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Caixa — Borda de controle, `px-4 py-3`, cantos `rounded-md`.
  2. Texto e placeholder — `text-sm`; placeholder em `--muted-foreground`.
  3. Ícone de estado — Só com regra: X vermelho (incompleto) ou visto verde (suficiente), à direita.
  4. Encaixes — `inicio` e `fim` (ícone ou botão dentro da caixa); `limpavel` põe o botão de limpar; `type="password"` ganha "Mostrar senha". Todo botão tem 44×44.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
PadrãoBorda --border-interactive de 1px, vazio ou com dado.
FocoBorda --border-focus de 2px (sombra interna, para o texto não pular). É o estado com foco quando não há regra ou o campo está vazio.
IncompletoCom foco e regra não cumprida: a borda de foco (cinza, 2px) e o ícone X vermelho; anuncia "Ainda incompleto". Não é erro — o vermelho da borda fica para o erro vindo do formulário (E60).
Senha visível"Mostrar senha" com aria-pressed="true": o campo passa a type="text".
SuficienteCom foco e regra cumprida: borda verde de 2px e visto; anuncia "Completo".
Erroerror ou aria-invalid: borda vermelha, com ou sem foco, e aria-invalid no campo.
Somente leiturareadOnly: borda tracejada e fundo --muted.
Desabilitado50% de opacidade, cursor proibido, fora do Tab.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Digitar com regraO ícone X some e a borda fica verde quando a regra passa — conferido no teste da ficha: três dígitos num CEP de oito ficam incompletos, sem aria-invalid.
Esc num campo limpávelLimpa e mantém o foco; o botão de limpar some com o campo vazio — conferido no teste da ficha.
Sair do campoA borda volta ao padrão (ou ao vermelho, se houver erro de fora).
Sem regraNão há invólucro nem ícone: é o <input> de sempre.
Dentro de um FormField com erroO aria-invalid chega pelo FormField, e a borda vermelha sai do mesmo atributo.

Relacionados