Input Text

Componentes/Entrada e seleção

ImplementaçãoHTML/CSS/JSArk/Zag — planejadaReact · shadcn/Base UIAngular

Componente Angular standalone sobre input nativo, com Form Field completo, ícones, validação e ControlValueAccessor.

DesignUsoImplementaçãoAcessibilidade

Seção da documentaçãoDesignUsoImplementaçãoAcessibilidade

Design

Preview funcional

Executado pelo componente Angular nativo com HTML input + Angular Forms.

Carregando preview funcional…

Abrir playground Angular

Anatomia

Email* 4

1 2 3

Please enter a valid email. 5

We'll never share your email. 6

1 Wrapper (.ds-input) — container com borda, radius, background, padding e gap.
2 Ícone (opcional, .ds-input__icon) — frame 24px; ícone 16/20/24px em sm/md/lg.
3 Campo (.ds-input__field) — o elemento nativo <input>.
4 Label (.ds-field__label) — externo, via Form Field.
5 Mensagem de erro (.ds-field__error) — externa, via Form Field.
6 Texto auxiliar (.ds-field__helper) — externo, via Form Field.

Padrão

Label

Helper text

Tamanhos

Com ícone

Estados

No Figma, State representa apenas estados visuais exclusivos: Default, Hover, Focus e Disabled. Filled, Error e Read-only são propriedades separadas; Error combina com Default/Hover/Focus, e Read-only combina com Default/Focus.

Error

Email address

Please enter a valid email address.

Disabled

Readonly

Figma property	Value / CSS trigger	Visual change	Token
State	Default	Neutral surface and border	component.field.bg.default, component.field.border-color.default
State	Hover / :hover	Darker border	component.field.border-color.hover
State	Focus / :focus-within	2px outline ring, component radius	component.field.border-color.focus, component.focus-ring.*, component.input.focus-ring.radius.default
State	Disabled / [disabled] or .ds-input--disabled	Muted bg, border and content	component.field.bg.disabled, component.field.value.color.disabled
Error	True / .ds-input--error or .ds-field--error .ds-input	Red border and error focus ring	component.field.border-color.error, component.focus-ring.color.error
Error + State	True + Hover / .ds-input--error:hover	Darker red border	component.field.border-color.error-hover
Read-only	True / [readonly] or .ds-input--readonly	Readonly bg with neutral focus ring	component.field.bg.readonly, component.focus-ring.color.readonly

Com Form Field

Full name

Enter your first and last name.

Email*

Please enter a valid email address. We'll never share your email.

Propriedades Figma

Propriedade	Tipo	Padrão	Descrição
Show Label	Boolean	true	Exibe ou oculta o label row (incluindo asterisco de obrigatório)
Label	Text	"Rótulo"	Texto do label (label/md)
Required	Boolean	false	Exibe o asterisco * em feedback/error/content/default ao lado do label
Show Helper Text	Boolean	true	Exibe ou oculta o texto auxiliar abaixo do controle
Helper Text	Text	"Texto auxiliar"	Anotação em caption/sm (content/secondary)

Uso

Quando usar

Use quando

O usuário precisa inserir um valor de texto curto, de uma única linha: nome, email, telefone, URL, consulta de busca, senha.

Não use quando

A entrada esperada é multilinha (use Textarea), o usuário deve escolher de um conjunto fixo de opções (use Select, Checkbox ou Radio), ou o valor é binário liga/desliga (use Toggle).

Situação	Use em vez disso
Texto multilinha	Textarea
Escolher de uma lista	Select
Sim/não ou liga/desliga	Toggle ou Checkbox
Busca com autocomplete	Componente de busca customizado (futuro)

Boas práticas

Full name

Faça

Sempre use dentro de um wrapper Form Field com um label visível.

Não faça

Usar placeholder como único label — ele desaparece quando o usuário começa a digitar.

Email address

Zip code

Faça

Ajuste o tamanho do input ao comprimento esperado do conteúdo. Use largura total para emails, larguras menores para CEPs.

Email address

Zip code

Não faça

Usar todos os inputs com a mesma largura independente do conteúdo.

Email*

Email is required. Enter a valid email address.

Faça

Mostre o estado de erro com ds-input--error E ds-field--error, com aria-invalid="true" e uma mensagem de erro clara.

Email*

Não faça

Mostrar estilização de erro sem uma mensagem de erro — o usuário precisa saber o que deu errado.

Diretrizes de conteúdo

Regra	Exemplo
O texto do placeholder deve ser um valor de exemplo, não uma instrução	"john@example.com" — não "Enter your email"
Labels devem ter 1-3 palavras, substantivo ou frase nominal	"Email address", "Phone number"
Texto auxiliar é opcional, use para dicas de formato	"Deve ter pelo menos 8 caracteres"
Mensagens de erro devem dizer o que deu errado E como corrigir	"Email é obrigatório. Insira um endereço de email válido."
Campos obrigatórios: adicione indicador de obrigatório ao label	<span class="ds-field__required">*</span>

Relacionados

Textarea Select

Quando escolher esta saída

Adote esta saída Angular nativa quando a aplicação já usa Angular. Ela consome o mesmo CSS do DS e não depende do runtime Web nem dos adapters React.

Implementação

Status

Beta

Distribuição

Tarball Angular validado

Instalação

npm

npm install ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

pnpm

pnpm add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

yarn

yarn add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

bun

bun add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

Beta de workspace validada

O comando instala o tarball local gerado e validado no consumer. @tis/angular ainda não está publicado no registry público do npm.

Estilos do DS

@import "ds-tis/css";

Importações Angular

import { FormsModule } from '@angular/forms'
import { TisInput, TisInputIconStart } from '@tis/angular/input'

Template

<tis-input
  name="email"
  label="E-mail"
  type="email"
  [(ngModel)]="email"
  helperText="Use seu e-mail corporativo."
  [required]="true"
>
  <svg tisInputIconStart aria-hidden="true">…</svg>
</tis-input>

Contrato público

Pacote

@tis/angular

Entrypoint

@tis/angular/input

Primitive

HTML input + Angular Forms

Status

Beta

Acessibilidade

Interação por teclado

Tecla	Ação
Tab	Move o foco para dentro / fora do input
Qualquer caractere	Digita no campo
Escape	Remove o foco (padrão do navegador)

Accessibility

Critério WCAG	Requisito	Status
1.3.1 Info and Relationships (A)	Label associado via for/id	✓
1.3.5 Identify Input Purpose (AA)	Use o atributo autocomplete para campos de dados pessoais	✓ (when implemented)
2.4.11 Focus Appearance (AA)	Focus ring 2px + offset de 2px	✓
3.3.1 Error Identification (A)	Estado de erro + mensagem via aria-invalid + aria-describedby	✓
3.3.2 Labels or Instructions (A)	Label visível sempre presente	✓
4.1.2 Name, Role, Value (A)	O <input> nativo fornece o role	✓

Resumo de atributos ARIA

for / id — sempre associe <label> com <input> usando atributos correspondentes.
aria-invalid="true" — definido no input nativo quando em estado de erro.
aria-describedby — vincule o input ao ID do elemento de mensagem de erro para que leitores de tela anunciem o erro.
autocomplete — use valores apropriados (name, email, tel, etc.) para campos de dados pessoais.

Required e label invisível

Quando Required = true, adicione aria-required="true" no <input> — o asterisco visual (.ds-field__required) é decorativo (aria-hidden="true"). Quando Show Label = false, use aria-label no <input>. O Helper Text deve ser vinculado via aria-describedby.

Responsabilidade da saída

Preserve a semântica nativa do button, submit, nomes acessíveis, estado disabled e foco visível.

Evidência de validação

Coberta pelo Storybook da saída independente e por verificações de browser, responsividade, teclado, Axe e bundle.

Abrir referência estável