mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
76 lines
3.5 KiB
Plaintext
76 lines
3.5 KiB
Plaintext
---
|
|
title: Fieldset
|
|
seoTitle: Form fieldset
|
|
order: 2
|
|
summary: A fieldset groups related fields under a legend, which makes long forms easier to scan and gives the group a name for assistive tech.
|
|
description: Group related form fields with a styled fieldset to make long forms better organized and easier to understand.
|
|
related: [/ui/forms/elements]
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
|
|
## Default markup
|
|
|
|
Wrap related fields in a `fieldset` to group them.
|
|
|
|
Give every fieldset a `legend`. The legend names the group, and it is the only thing that does - a heading placed above the fieldset looks the same but is not connected to the fields.
|
|
|
|
<Example background="primary" column>
|
|
<fieldset class="form-fieldset">
|
|
<legend class="form-label">Contact details</legend>
|
|
<div class="mb-3">
|
|
<label class="form-label required" for="fieldset-name">Full name</label>
|
|
<input type="text" id="fieldset-name" class="form-control" autocomplete="name" required />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label required" for="fieldset-company">Company</label>
|
|
<input type="text" id="fieldset-company" class="form-control" autocomplete="organization" required />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label required" for="fieldset-email">Email</label>
|
|
<input type="email" id="fieldset-email" class="form-control" autocomplete="email" required />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="fieldset-phone">Phone number</label>
|
|
<input type="tel" id="fieldset-phone" class="form-control" autocomplete="tel" />
|
|
</div>
|
|
<label class="form-check">
|
|
<input type="checkbox" class="form-check-input" required />
|
|
<span class="form-check-label required">I agree to the Terms & Conditions</span>
|
|
</label>
|
|
</fieldset>
|
|
</Example>
|
|
|
|
## Grouping choices
|
|
|
|
A fieldset is the only correct way to group a set of radios or checkboxes. Without it the options are read one by one with no idea what question they answer.
|
|
|
|
<Example background="primary" column>
|
|
<fieldset class="form-fieldset">
|
|
<legend class="form-label">How should we contact you?</legend>
|
|
<label class="form-check">
|
|
<input type="radio" class="form-check-input" name="fieldset-contact" checked />
|
|
<span class="form-check-label">By email</span>
|
|
</label>
|
|
<label class="form-check">
|
|
<input type="radio" class="form-check-input" name="fieldset-contact" />
|
|
<span class="form-check-label">By phone</span>
|
|
</label>
|
|
<label class="form-check">
|
|
<input type="radio" class="form-check-input" name="fieldset-contact" />
|
|
<span class="form-check-label">Do not contact me</span>
|
|
</label>
|
|
</fieldset>
|
|
</Example>
|
|
|
|
## Disabling a group
|
|
|
|
The `disabled` attribute on a `fieldset` disables every control inside it at once, so you do not have to set it on each field.
|
|
|
|
## Accessibility
|
|
|
|
- Every fieldset needs a `legend`, and it has to be the first child. A fieldset without one groups the fields visually but says nothing.
|
|
- Keep the legend short. It is read before every field in the group, so a long sentence is repeated on each one.
|
|
- Do not use a fieldset just to draw a box. A group that has no name is noise for a screen reader - use a plain `div` instead.
|
|
- Radios and checkboxes that belong to one question always go in a fieldset. Text fields only need one when they really form a set, such as an address.
|
|
- `disabled` on the fieldset takes every control inside out of the tab order and out of the submitted data. Use `readonly` on individual fields when the values should still be sent.
|