Fieldset

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<fieldset class="tui-fieldset tui-fieldset--choices" aria-describedby="alerts-hint alerts-error" data-min="1">
  <legend class="tui-fieldset__legend">Send me alerts for</legend>
  <p class="tui-fieldset__hint" id="alerts-hint">Pick the events that should send an email.</p>
  <div class="tui-fieldset__fields">
    <label class="tui-choice"><input class="tui-check" type="checkbox" name="alert" value="failed"> Failed payments</label>
    <label class="tui-choice"><input class="tui-check" type="checkbox" name="alert" value="refunds"> Refunds</label>
  </div>
  <p class="tui-fieldset__error" id="alerts-error" role="alert"></p>
</fieldset>

<!-- Fields in a row, on their own tray -->
<fieldset class="tui-fieldset tui-fieldset--row tui-fieldset--well">
  <legend class="tui-fieldset__legend">Billing contact</legend>
  <div class="tui-fieldset__fields"> <div class="tui-field">…</div> <div class="tui-field">…</div> </div>
</fieldset>

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.'

Needs kit.css and kit.mjs. How to install the kit.

• 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.

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.