Toggles — Enabled mode with a summary preview

A checkbox header switches between a disabled note and a compact two-column summary preview. Use when one mode changes the information shown below it.

ReactHTML

1440 × 480

Open in new tab

Component.tsx11 lines

export default function TogglesMasterDetailSummary() {
  return (
    <div className="group w-72 rounded-lg border border-neutral-200 bg-white p-4 text-neutral-900 sm:w-96"><label className="flex cursor-pointer items-center gap-3 text-sm font-semibold"><input className="size-4 shrink-0 accent-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" id="toggles-master-detail-summary-active" name="mode" type="checkbox" defaultChecked aria-describedby="toggles-master-detail-summary-hint" />Enable shared mode</label>
    <p className="mt-2 text-xs text-neutral-500" id="toggles-master-detail-summary-hint">Share this item with the selected group.</p>
    <div className="mt-4 hidden grid-cols-2 gap-3 rounded-lg border border-neutral-200 bg-neutral-50 p-3 group-has-[#toggles-master-detail-summary-active:checked]:grid"><div><p className="text-xs text-neutral-500">Access</p>
    <p className="mt-1 text-sm font-medium text-neutral-900">Read only</p></div>
    <div className="border-l border-neutral-200 pl-3"><p className="text-xs text-neutral-500">Members</p>
    <p className="mt-1 text-sm font-medium text-neutral-900">12 people</p></div></div>
    <p className="mt-4 text-sm text-neutral-600 group-has-[#toggles-master-detail-summary-active:checked]:hidden">Shared access is turned off.</p></div>
  )
}

Pattern notes

When to use: Use when a binary mode needs a concise preview of its effect. Choose dependent options when users must configure subordinate controls. Variations: show duration and scope, start unchecked, or replace member count with a group name.
Hierarchy: Read Enable shared mode, the sharing hint, then Access and Members in the visible preview. The checkbox references the hint. Keep the label under 4 words, hint under 10 words and preview values under 3 words.
Responsive: The root grows from 288px to 384px at 640px. The summary remains two columns, and the off note occupies a single compact text region when the checkbox is cleared.
Layout: A 288px card grows to 384px at sm with 16px padding. Its header pairs a 16px native checkbox with a 14px semibold title and 12px gap. An 8px-spaced hint precedes the preview by 16px. The neutral-50 preview has two equal columns, a middle divider and 12px padding.
States: Shared mode starts checked. CSS displays the summary while checked and replaces it with an off note when unchecked. The native checkbox shows a checkmark in forced colors and a standard focus outline. The summary values are supplied content rather than additional controls.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ [x] Enable shared mode                               │
│ Share this item with the selected group.             │
│ ┌──────────────────────────────────────────────┐     │
│ │ Access                 Members               │     │
│ │ Read only              12 people             │     │
│ └──────────────────────────────────────────────┘     │
└──────────────────────────────────────────────────────┘

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 — Enabled mode with a summary preview

Pattern notes

More in Toggles

Toggles — Checkbox group with nested options

Toggles — Checkbox tile grid

Toggles — Checklist rows with descriptions