# Fieldset Related fields under one engraved legend, with one hint and one error line for the group. It is the browser’s own fieldset and legend, so the group has a name for a screen reader and a disabled fieldset disables every field inside. The legend runs on into a groove cut in the plate; the error waits at the foot, not drawn, until it has something to say. Kit part · Free · https://tactileui.dev/parts/fieldset - Element: `

` - Needs: `kit.css` and `kit.mjs` ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Categories: Forms - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### Plain · legend, fields ```html

Delivery

Street

Town

``` ### With a hint ```html

Send me alerts for

Pick the events that should send an email.

Failed payments Refunds

``` ### With an error ```html

Send me alerts for

Pick the events that should send an email.

Failed payments Refunds

Choose at least one.

``` ### Fields in a row · --row ```html

Billing contact

Name

``` ### On its own tray · --well ```html

Plan

Billed monthly.

Team Scale

``` ### Disabled ```html

Delivery

Locked while the order is packed.

Street

``` ## Every state - Rest - With a hint - Error - Disabled Hover, pressed and focus are forced with `.is-hover`, `.is-down` and `.is-focus`; checked and disabled are real. ## API | Name | Kind | Values | What it does | | - | - | - | - | | | element | with aria-describedby | The group. List the ids of the hint and then the error in aria-describedby, and both are read as the focus enters. | | | element | first child | The group’s name, printed small with the engraved rule running on from it. Keep it a few words. | | .tui-fieldset__hint · .tui-fieldset__error | class | paragraphs with ids | How to fill the group in, and what is wrong with it. The error is empty until it has words and has role="alert", so it is read out when it appears. | | .tui-fieldset__fields | class | around the fields | A grid with a gap. Add --row to the fieldset to set fields side by side, --choices for a tighter column of checks or radios, --well to set the group on a tray. | | data-min · data-max | attribute | on the fieldset, numbers | How many checkboxes must be down. The form is stopped on submit if the count is out of range; the next change re-checks it. | | data-error | attribute | set by the script | Marks the group as wrong: the legend’s rule turns red. Add it yourself when you set the error with your own code. | | fieldsetError(fieldset, words) | function | a fieldset, a string or empty | Puts words in the error line, or takes them away, and marks the fieldset. | | fieldsetValidate(fieldset) · fieldsetCheck(count, { min, max }) | function | kit.mjs | Checks a fieldset that has a count and returns whether it is right; the words for a count, pure. | ## Markup ```html

Send me alerts for

Pick the events that should send an email.

Failed payments Refunds

Billing contact

…

``` ```js import { fieldsetError, fieldsetValidate, fieldsetCheck } from '/kit/kit.mjs'; // data-min and data-max on the fieldset are checked on submit and on change. Or say it yourself: fieldsetError(document.querySelector('#alerts'), 'Choose at least one.'); fieldsetError(document.querySelector('#alerts'), ''); // take it away fieldsetValidate(fieldset); // true when the count is right fieldsetCheck(0, { min: 1 }); // 'Choose at least one.' ``` The demo on the page: ```html ``` ## Usage notes Press Save with nothing ticked: the form is stopped, the error line is given its words, the groove under the legend turns red and the focus goes to the first box. Tick one and the error clears by itself. The billing contact has fields in a row. ## Accessibility - The legend and the fieldset are the browser’s, so a screen reader announces “Send me alerts for, group” as the focus enters it, then the field, with no ARIA added. - `aria-describedby` on the fieldset has the hint and the error read after the legend. The error line is a `role="alert"`, empty until needed, so it is spoken the moment it is given words. - The error is never red alone: a lit red lamp and the words, “Choose at least one.”, and the groove under the legend turns red too. The focus is sent to the first box that can be changed. - The keyboard needs nothing new: Tab goes through the fields in the order they are written, Space ticks a box, and Enter submits as in any form. - A `disabled` fieldset disables every field in it, which the browser already does; the legend and hint go quieter and the group stays readable. - The legend is floated so it can carry its rule; it remains a legend in the document, so the group keeps its name. On a phone the fields stack and every box is 44px tall to hit. ## How it’s built There is one native element and four lines of drawing. The legend is floated so that it stops being the border’s special case and can hold a rule: a flex row with the words and a 2px groove after them, dark with the light on its lower lip, the cut the toolbar and the toggle group already use between clusters. The error is the kit’s red lamp and a line of words. The count check is the only script, and it runs on the form’s own submit and the field’s own change. ## Rules Name a group of fields once, say how to fill it in once, and say what is wrong with it once, in a place a screen reader will read. The full rules are in `fieldset.rules.md` in the brain, which ships with the Kit. ## Related parts - [Field](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error. - [Form validation](https://tactileui.dev/parts/validation): A form that says what is wrong, on the browser’s own checks. Press submit with something missing and each field in error gets a line under it with a red lamp lit and words that say how to put it right, its well ringed red; at the top of the form an annunciator lights over a count and a list that links to each field, and takes the focus. From then on each field is checked again as it changes. - [Check](https://tactileui.dev/parts/check): An option in a form: a small square key that presses below the plate when chosen, with a tick printed on it. - [Radio](https://tactileui.dev/parts/radio): One choice from a short list in a form: small round keys in a fieldset, the chosen one pressed with a printed dot.