Fieldset
The title of a group of fields or options that answer a single question.
On this page
Playground
Hint
Background
<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
<fieldset class="feitio-fieldset">
<legend class="feitio-label">Quando lembrar?</legend>
<span class="feitio-hint">Horário de São Paulo</span>
…
</fieldset>Anatomy
- Title: the question of the whole group.
- Hint, optional: right under the title (
space-1). - 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. |