# Field

A field’s label, hint, control and error, always in the same order and spacing.

## Playground

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

## When to use

-   Around every form field: TextInput, Textarea, Select, TimeInput.

## When not to use

-   **For a group of options** (Radios, Checkbox): the group uses Fieldset, with the title in the `legend`.

## Examples

### A complete field

Label on top, the hint right under it, the control, and the error below the control. All at `space-1`.

Show code

```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>
```

## Placeholder text

-   Allowed as a short extra example, under a label that stays.
-   Never instead of the label or hint: it disappears when the person types.
-   Never with needed information: that goes in the hint, which stays.

## Anatomy

1.  **Label:** always visible, on top.
2.  **Hint**, optional: right under the label.
3.  **Control:** as wide as the answer.
4.  **Error:** below the control, with icon and word.

## Writing

-   Label: a short noun or a direct question, without a colon.
-   Hint: only if it helps get it right the first time.
-   Optional: "(optional)" at the end of the label.

## Accessibility

-   The label is a real `<label for>`: clicking it focuses the field.
-   Hint and error go in `aria-describedby`; screen readers read them with the label.

## Attributes

Attribute

Values

What for

`class="feitio-field"`

around

Label, hint, control and error at `space-1`.

`class="feitio-label"`

on the `<label>`

The label, always visible.

`class="feitio-hint"`

optional

The hint, right after the label.

`class="feitio-error-message"`

when there is an error

Below the control, with icon and word.