Field Group

Wraps related controls (typically radios or checkboxes) in a <fieldset> with a shared accessible <legend>.

Vertical (default)

Notifications

Email SMS Push

Live example

<fieldset class="re-field-group" id="fg-vertical">
  <legend class="re-field-group__legend">Notifications</legend>
  <div class="re-field-group__items">
    <label class="re-field re-field--inline">
      <input class="re-checkbox" type="checkbox" name="email" checked />
      <span class="re-field__label">Email</span>
    </label>
    <label class="re-field re-field--inline">
      <input class="re-checkbox" type="checkbox" name="sms" />
      <span class="re-field__label">SMS</span>
    </label>
    <label class="re-field re-field--inline">
      <input class="re-checkbox" type="checkbox" name="push" />
      <span class="re-field__label">Push</span>
    </label>
  </div>
</fieldset>

Horizontal

Theme

Light Dark System

Live example

<fieldset class="re-field-group" data-orientation="horizontal" id="fg-horizontal">
  <legend class="re-field-group__legend">Theme</legend>
  <div class="re-field-group__items">
    <label class="re-field re-field--inline">
      <input class="re-radio" type="radio" name="theme" value="light" checked />
      <span class="re-field__label">Light</span>
    </label>
    <label class="re-field re-field--inline">
      <input class="re-radio" type="radio" name="theme" value="dark" />
      <span class="re-field__label">Dark</span>
    </label>
    <label class="re-field re-field--inline">
      <input class="re-radio" type="radio" name="theme" value="system" />
      <span class="re-field__label">System</span>
    </label>
  </div>
</fieldset>

Disabled group

Frozen options

Cannot toggle

Live example

<fieldset class="re-field-group" id="fg-disabled" disabled>
  <legend class="re-field-group__legend">Frozen options</legend>
  <div class="re-field-group__items">
    <label class="re-field re-field--inline">
      <input class="re-checkbox" type="checkbox" id="fg-disabled-cb" />
      <span class="re-field__label">Cannot toggle</span>
    </label>
  </div>
</fieldset>

Accessibility

• Keyboard — fully native. Tab moves between the controls in the group (radios within a shared name form a single tab stop; Arrow keys move the selection between them, as the browser provides). Space toggles a checkbox or selects a radio. There is no extra JavaScript keyboard model — the group is a <fieldset> and behaves exactly like native form controls.
• Focus — each .re-checkbox / .re-radio shows a visible :focus-visible ring (--re-shadow-focus); the <legend> itself is not focusable.
• Semantics — a native <fieldset> with a <legend> associates the group name with every control inside it, so screen readers announce it (e.g. “Notifications, Email checkbox”) as you move through the controls. data-orientation="horizontal" is presentational only and changes nothing about the announced structure.
• Notes — adding disabled to the <fieldset> natively cascades to every control inside it, no extra wiring; disabled controls render at reduced opacity with a not-allowed cursor. The checked-state glyph is drawn so the control stays a native input, and a forced-colors block re-establishes the checked fill with system Highlight / HighlightText so it stays distinct in Windows High Contrast. See the accessibility guide.