Toggles — Checkbox group with nested options

A checkbox fieldset reveals two indented choices while its parent is checked. Use it for independent preferences with optional detail choices and a disabled example.

ReactHTML

1440 × 480

Open in new tab

Component.tsx44 lines

export default function TogglesCheckboxNested() {
  return (
    <fieldset aria-describedby="toggles-checkbox-nested-hint" className="w-72 text-neutral-900 sm:w-80">
      <legend className="text-sm font-semibold">Option group title</legend>
      <p id="toggles-checkbox-nested-hint" className="mt-1 text-sm text-neutral-500">Short selection guidance</p>
      <div className="mt-4 grid gap-4">
        <div className="group">
          <div className="flex items-start gap-3">
            <input id="toggles-checkbox-nested-parent" type="checkbox" defaultChecked aria-describedby="toggles-checkbox-nested-parent-hint" className="mt-0.5 size-4 shrink-0 accent-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
            <div>
              <label htmlFor="toggles-checkbox-nested-parent" className="cursor-pointer text-sm font-medium">Parent option</label>
              <p id="toggles-checkbox-nested-parent-hint" className="text-sm text-neutral-500">Description of the parent</p>
            </div>
          </div>
          <div className="mt-2 hidden space-y-2 pl-7 group-has-[#toggles-checkbox-nested-parent:checked]:block">
            <label className="flex items-start gap-3 text-sm">
              <input type="checkbox" defaultChecked className="mt-0.5 size-4 shrink-0 accent-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
              Child option
            </label>
            <label className="flex items-start gap-3 text-sm">
              <input type="checkbox" className="mt-0.5 size-4 shrink-0 accent-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
              Related child option
            </label>
          </div>
        </div>
        <div className="flex items-start gap-3">
          <input id="toggles-checkbox-nested-independent" type="checkbox" aria-describedby="toggles-checkbox-nested-independent-hint" className="mt-0.5 size-4 shrink-0 accent-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
          <div>
            <label htmlFor="toggles-checkbox-nested-independent" className="cursor-pointer text-sm font-medium">Independent option</label>
            <p id="toggles-checkbox-nested-independent-hint" className="text-sm text-neutral-500">Description of this option</p>
          </div>
        </div>
        <div className="flex items-start gap-3 opacity-50">
          <input id="toggles-checkbox-nested-disabled" type="checkbox" disabled aria-describedby="toggles-checkbox-nested-disabled-hint" className="mt-0.5 size-4 shrink-0 cursor-not-allowed accent-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
          <div>
            <label htmlFor="toggles-checkbox-nested-disabled" className="cursor-not-allowed text-sm font-medium">Unavailable option</label>
            <p id="toggles-checkbox-nested-disabled-hint" className="text-sm text-neutral-500">Reason this option is disabled</p>
          </div>
        </div>
      </div>
    </fieldset>
  )
}

Pattern notes

When to use: Use for preferences where a parent exposes optional detail choices. Pick toggles-switch-list when each setting is independent and always visible. Variations: reveal one child instead of two, start the parent unchecked, or add per-child hints. No automatic cascading selection is added; all inputs keep their native independent values.
Hierarchy: Read the option-group legend and one-line hint, then the parent and its children, an independent option, and an unavailable option. Label slots use two or three words. Descriptions use up to six words and may wrap to two lines on mobile. Unique ids connect top-level labels; each description is linked by aria-describedby.
Responsive: Below 640px the root is 288px and longer descriptions can wrap; at 640px it widens to 320px. Indentation, checkbox sizes and group gaps remain unchanged. Closing the parent reduces the fieldset height by the child container height.
Layout: A 288px-wide (w-72) fieldset becomes 320px (sm:w-80). A 14px semibold legend and supporting line after 4px precede three groups by 16px (mt-4); groups use gap-4. Each row has a native 16px checkbox aligned with a 2px top offset, a 12px gap, and a 14px medium label over a 14px neutral-500 description. The first group contains two child rows, indented 28px (pl-7), with an 8px top gap and space-y-2.
States: Parent and first child start checked. A hidden child container becomes block through group-has-[#toggles-checkbox-nested-parent:checked]; unchecking the parent hides children from layout and tab order without clearing their saved native checked values. Native checkboxes use accent-neutral-900 and preserve system checked marks in forced-colors mode. Every input shows a 2px neutral-900 focus-visible outline offset 2px. The last option is disabled with 50% group opacity and not-allowed cursors.

Desktop wireframe

┌────────────────────────────────────┐
│ Option group title                 │
│ Short selection guidance           │
│ [x] Parent option                  │
│     Description of the parent      │
│     [x] Child option               │
│     [ ] Related child option       │
│ [ ] Independent option             │
│     Description of this option     │
│ [ ] Unavailable option             │
│     Reason this option is disabled │
└────────────────────────────────────┘

View all

Toggles — Checkbox tile grid
Layout tags: grid,form,compact
Toggles — Checklist rows with descriptions
Layout tags: list,form,compact
Toggles — Consent row with a separate explanation
Layout tags: stacked,form,compact

Toggles — Checkbox group with nested options

Pattern notes

More in Toggles

Toggles — Checkbox tile grid

Toggles — Checklist rows with descriptions

Toggles — Consent row with a separate explanation