# Fieldset

The title of a group of fields or options that answer a single question.

## Playground

```html
<fieldset class="feitio-fieldset"><legend class="feitio-label">Notify by</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>
```

## When to use

-   Around Radios and Checkbox groups, always.
-   For fields that are one thing: the time, an address.

## When not to use

-   **To separate parts of a long page:** headings and blocks.

## Examples

### A group with the question

The title is the question; the hint sits right under it (`space-1`); the group a little further (`space-3`); the group error, `space-2` from the last option.

Show code

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

## Anatomy

1.  **Title:** the question of the whole group.
2.  **Hint**, optional: right under the title (`space-1`).
3.  **The group:** options or fields, a little further (`space-3`).

## Accessibility

-   The `<legend>` is announced before each field of the group: write it as the question.
-   Group error: the message right below the options, with the icon, in wine.

## Attributes

Attribute

Values

What for

`class="feitio-fieldset"`

required

The titled group, with the scale’s spacing.

`<legend>`

the question

The group’s title.

`class="feitio-hint"`

optional

The hint, `space-1` from the title.

`aria-invalid="true"`

with an error

The message below the group.