# Field

Rótulo, dica, controle e erro de um campo, sempre na mesma ordem e no mesmo espaço.

## Playground

```html
<div class="feitio-field"><label class="feitio-label" for="pg-name">Nome do lembrete</label><input class="feitio-input" id="pg-name"></div>
```

## Quando usar

-   Em volta de todo campo de formulário: TextInput, Textarea, Select, TimeInput.

## Quando não usar

-   **Para um grupo de opções** (Radios, Checkbox): o grupo usa Fieldset, com o título no `legend`.

## Exemplos

### Um campo completo

Rótulo em cima, a dica colada nele, o controle, e o erro embaixo do controle. Tudo a `space-1`.

Mostrar código

```html
<div class="feitio-field">
  <label class="feitio-label" for="nome">Nome do lembrete</label>
  <span class="feitio-hint" id="nome-dica">Aparece na notificação</span>
  <input class="feitio-input" id="nome" aria-describedby="nome-dica nome-erro" aria-invalid="true">
  <span class="feitio-error-message" id="nome-erro">…Escreva um nome</span>
</div>
```

## Texto de exemplo (placeholder)

-   Permitido como exemplo extra, curto, embaixo de um rótulo que continua lá.
-   Nunca no lugar do rótulo nem da dica: some quando a pessoa digita.
-   Nunca com informação necessária: isso vai na dica, que fica.

## Anatomia

1.  **Rótulo:** sempre visível, em cima.
2.  **Dica**, opcional: colada no rótulo.
3.  **Controle:** a largura do tamanho da resposta.
4.  **Erro:** embaixo do controle, com ícone e palavra.

## Como escrever

-   Rótulo: substantivo curto ou pergunta direta, sem dois-pontos.
-   Dica: só se ajudar a acertar de primeira.
-   Opcional: "(opcional)" no fim do rótulo.

## Acessibilidade

-   O rótulo é um `<label for>` de verdade: clicar nele foca o campo.
-   Dica e erro entram no `aria-describedby`; o leitor de tela lê junto com o rótulo.

## Atributos

Atributo

Valores

Para quê

`class="feitio-field"`

em volta

Rótulo, dica, controle e erro a `space-1`.

`class="feitio-label"`

no `<label>`

O rótulo, sempre visível.

`class="feitio-hint"`

opcional

A dica, logo depois do rótulo.

`class="feitio-error-message"`

quando há erro

Embaixo do controle, com ícone e palavra.