# Fieldset

O título de um grupo de campos ou de opções que respondem uma pergunta só.

## 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">E-mail</label></div></fieldset>
```

## Quando usar

-   Em volta de Radios e de grupos de Checkbox, sempre.
-   Para campos que são uma coisa só: o horário, um endereço.

## Quando não usar

-   **Para separar partes de uma página longa:** títulos (Heading) e blocos.

## Exemplos

### Um grupo com a pergunta

O título é a pergunta; a dica fica colada nele (`space-1`); o grupo, um pouco mais longe (`space-3`); o erro do grupo, a `space-2` da última opção.

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

## Anatomia

1.  **Título:** a pergunta do grupo inteiro.
2.  **Dica**, opcional: colada no título (`space-1`).
3.  **O grupo:** opções ou campos, um pouco mais longe (`space-3`).

## Acessibilidade

-   O `<legend>` é anunciado antes de cada campo do grupo: escreva-o como a pergunta.
-   Erro do grupo: a mensagem logo abaixo das opções, com o ícone e em vinho.

## Atributos

Atributo

Valores

Para quê

`class="feitio-fieldset"`

obrigatório

O grupo com título, nos espaços da régua.

`<legend>`

a pergunta

O título do grupo.

`class="feitio-hint"`

opcional

A dica, a `space-1` do título.

`aria-invalid="true"`

com erro

A mensagem embaixo do grupo.