# Fieldset

El título de un grupo de campos u opciones que responden una sola pregunta.

## Playground

```html
<fieldset class="feitio-fieldset"><legend class="feitio-label">Avisar por</legend><div class="feitio-choices"><label class="feitio-choice"><input type="checkbox" checked>Discord</label><label class="feitio-choice"><input type="checkbox">Correo</label></div></fieldset>
```

## Cuándo usarlo

-   Alrededor de los grupos de radios y casillas de verificación, siempre.
-   Para campos que son una sola cosa: la hora, una dirección.

## Cuándo no usarlo

-   **Para separar partes de una página larga:** encabezados y bloques.

## Ejemplos

### Un grupo con la pregunta

El título es la pregunta; la pista está justo debajo (`space-1`); el grupo un poco más lejos (`space-3`); el grupo de error, `space-2` desde la última opción.

Mostrar código

```html
<fieldset class="feitio-fieldset">
  <legend class="feitio-label">Quando lembrar?</legend>
  <span class="feitio-hint">Horário de São Paulo</span>
  …
</fieldset>
```

## Anatomía

1.  **Título:** la pregunta de todo el grupo.
2.  **Pista**, opcional: justo debajo del título (`space-1`).
3.  **El grupo:** opciones o campos, un poco más lejos (`space-3`).

## Accesibilidad

-   El `<legend>` se anuncia antes de cada campo del grupo: escríbela como la pregunta.
-   Grupo de error: el mensaje justo debajo de las opciones, con el icono, en vino.

## Atributos

Atributo

Valores

Para qué sirve

`class="feitio-fieldset"`

obligatorio

El grupo titulado, con los espaciados de la escala.

`<legend>`

la pregunta

El título del grupo.

`class="feitio-hint"`

opcional

La pista, `space-1` del título.

`aria-invalid="true"`

con un error

El mensaje debajo del grupo.
