# TextInput

Um campo de uma linha para texto curto: um nome, um e-mail, um código.

## Playground

```html
<div class="feitio-field"><label class="feitio-label" for="pg-t">Nome do lembrete</label><input class="feitio-input" id="pg-t" value="Regar as plantas"></div>
```

## Quando usar

-   Para respostas que cabem numa linha e que a pessoa precisa digitar.

## Quando não usar

-   **Texto longo:** Textarea.
-   **Horário:** TimeInput.
-   **Opções conhecidas:** Radios ou Select.

## Exemplos

### Larguras

A largura conta os caracteres da resposta (4, 10, 20, 40), mais o recuo: o tamanho do campo diz à pessoa o tamanho da resposta.

Mostrar código

```html
<input class="feitio-input" data-width="4" inputmode="numeric" autocomplete="one-time-code">
<input class="feitio-input" data-width="10" autocomplete="postal-code">
<input class="feitio-input" data-width="20">
<input class="feitio-input" data-width="40">
```

## Estados

Vazio

Com exemplo

Preenchido

Mouse por cima

Foco

Erro

Escreva um assunto

Desativado

Desativado é raro: traço tracejado e fundo apagado. Se o valor nunca muda, mostre como texto, não como campo.

## Bons e maus padrões

Faça assim

Código de verificação

Quatro dígitos, campo para quatro.

Não faça

Código de verificação

Um campo enorme para quatro dígitos faz a pessoa duvidar do que deve escrever.

## Acessibilidade

-   Use o `type` e o `autocomplete` certos (`email`, `tel`, `one-time-code`): o mobile mostra o teclado certo e o navegador preenche sozinho.
-   Números que não são quantidade (códigos, CEP) usam `inputmode="numeric"`, não `type="number"`.

## Atributos

Atributo

Valores

Para quê

`class="feitio-input"`

obrigatório

A forma do campo.

`data-width`

`"2"`, `"4"`, `"10"`, `"20"`, `"40"`

Quantos caracteres a resposta tem. Sem o atributo, ocupa a coluna.

`type`, `inputmode`, `autocomplete`

os da resposta

O teclado certo e o preenchimento automático.

`aria-invalid="true"`

com erro

O traço em vinho.

`disabled`

—

Raro: prefira mostrar o valor como texto.