# Field

Una etiqueta, pista, control y error de un campo, siempre en el mismo orden y espaciado.

## Playground

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

## Cuándo usarlo

-   Alrededor de cada campo de formulario: TextInput, Textarea, Select, TimeInput.

## Cuándo no usarlo

-   **Para un grupo de opciones** (Radios, Checkbox): el grupo usa Fieldset, con el título en el `legend`.

## Ejemplos

### Un campo completo

Etiqueta arriba, la pista a la derecha debajo, el control y el error debajo del control. Todo en `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 marcador de posición

-   Permitido como un ejemplo extra corto, debajo de una etiqueta que permanece.
-   Nunca en lugar de la etiqueta o la pista: desaparece cuando la persona escribe.
-   Nunca con información necesaria: eso va en la pista, que permanece.

## Anatomía

1.  **Etiqueta:** siempre visible, arriba.
2.  **Pista**, opcional: a la derecha de la etiqueta.
3.  **Control:** tan ancho como la respuesta.
4.  **Error:** debajo del control, con icono y palabra.

## Escritura

-   Etiqueta: un sustantivo corto o una pregunta directa, sin dos puntos.
-   Pista: solo si ayuda a acertar la primera vez.
-   Opcional: "(opcional)" al final de la etiqueta.

## Accesibilidad

-   La etiqueta es un `<label for>` real: hacer clic en ella enfoca el campo.
-   Pista y error van en `aria-describedby`; los lectores de pantalla los leen con la etiqueta.

## Atributos

Atributo

Valores

Para qué sirve

`class="feitio-field"`

alrededor

Etiqueta, pista, control y error en `space-1`.

`class="feitio-label"`

sobre el `<label>`

La etiqueta, siempre visible.

`class="feitio-hint"`

opcional

La pista, justo después de la etiqueta.

`class="feitio-error-message"`

cuando hay un error

A continuación del control, con icono y palabra.