Toggles — Switch with dependent delivery options

An enabling switch sits above a separate bordered group of delivery choices that appears when enabled. Use for a parent preference with optional details.

ReactHTML

1440 × 480

Open in new tab

Component.tsx12 lines

export default function TogglesSwitchDependentOptions() {
  return (
    <div className="group w-72 text-neutral-900 sm:w-96"><div className="flex items-center justify-between gap-4"><div><label className="block cursor-pointer text-sm font-semibold" htmlFor="toggles-switch-dependent-options-enabled">Enable summaries</label>
    <p className="mt-1 text-xs text-neutral-500" id="toggles-switch-dependent-options-hint">Control summary delivery.</p></div>
    <label className="relative inline-flex shrink-0"><input className="peer sr-only focus-visible:outline-hidden" id="toggles-switch-dependent-options-enabled" name="toggles-switch-dependent-options-enabled" type="checkbox" role="switch" aria-label="Enable summaries" aria-describedby="toggles-switch-dependent-options-hint" defaultChecked />
    <span className="relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full border border-neutral-300 bg-neutral-200 p-px peer-checked:bg-neutral-900 peer-checked:[&>span]:translate-x-5 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-900 forced-colors:border-[ButtonText]" aria-hidden="true"><span className="size-5 rounded-full bg-white forced-colors:bg-[CanvasText]"></span></span></label></div>
    <fieldset className="mt-4 hidden rounded-lg border border-neutral-200 bg-neutral-50 p-4 group-has-[#toggles-switch-dependent-options-enabled:checked]:block"><legend className="px-1 text-xs font-medium text-neutral-600">Delivery choices</legend>
    <div className="grid gap-3"><label className="flex cursor-pointer items-center gap-2 text-sm text-neutral-600"><input className="size-4 shrink-0 accent-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" type="checkbox" name="daily" aria-describedby="toggles-switch-dependent-options-hint" defaultChecked />Daily summary</label>
    <label className="flex cursor-pointer items-center gap-2 text-sm text-neutral-600"><input className="size-4 shrink-0 accent-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" type="checkbox" name="weekly" aria-describedby="toggles-switch-dependent-options-hint"  />Weekly summary</label></div>
    <p className="mt-3 text-xs text-neutral-500">Choose one or both delivery intervals.</p></fieldset></div>
  )
}

Pattern notes

When to use: Use for one enabling preference with a few optional subordinate choices. Choose an always-visible switch list when settings are independent. Variations: add another interval, start the parent off, or replace delivery choices with content categories.
Hierarchy: Read Enable summaries and its hint, then Delivery choices when enabled. The switch has role=switch and a described-by hint. Delivery labels use at most 2 words and the note at most 8 words; native checkboxes remain independently named.
Responsive: The root changes from 288px to 384px at 640px. The header and dependent checkbox stack keep their arrangement. Hiding the dependent group reduces the component height.
Layout: A 288px root grows to 384px at sm. A justified header pairs a short label and hint with a 44px by 24px switch. The dependent fieldset sits 16px below with 16px padding and two checkbox rows separated by 12px. A note follows by 12px.
States: The switch starts on and reveals the fieldset through CSS. Switching off hides the dependent controls. The thumb shifts 20px; a system-color thumb and border preserve its position in forced colors. Focus outlines the track or native checkbox. Daily summary starts checked.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ Enable summaries                         [On]        │
│ Control summary delivery.                            │
│ ┌──────────────────────────────────────────────┐     │
│ │ Delivery choices                             │     │
│ │ [x] Daily summary                            │     │
│ │ [ ] Weekly summary                           │     │
│ │ Choose one or both delivery intervals.       │     │
│ └──────────────────────────────────────────────┘     │
└──────────────────────────────────────────────────────┘

View all

Toggles — Checkbox group with nested options
Layout tags: stacked,form,compact
Toggles — Checkbox tile grid
Layout tags: grid,form,compact
Toggles — Checklist rows with descriptions
Layout tags: list,form,compact

Toggles — Switch with dependent delivery options

Pattern notes

More in Toggles

Toggles — Checkbox group with nested options

Toggles — Checkbox tile grid

Toggles — Checklist rows with descriptions