Tabs — Enclosed tabs on a bordered panel

Folder-shaped radio choices merge into a bordered content panel. Use to group a short explanation and action within one framed record view.

ReactHTML

1440 × 480

Open in new tab

Component.tsx37 lines

export default function TabsEnclosedPanel() {
  return (
    <div className="group w-72 bg-white text-neutral-900 sm:w-[28rem]">
      <div role="radiogroup" aria-label="Record view" className="flex">
        <label id="tabs-enclosed-panel-overview-label" className="relative -mb-px -ml-px flex h-10 cursor-pointer items-center justify-center rounded-t-md border border-neutral-200 bg-neutral-50 px-4 text-sm text-neutral-600 transition-colors first:ml-0 hover:bg-white hover:text-neutral-900 has-[:checked]:z-10 has-[:checked]:border-b-white has-[:checked]:bg-white has-[:checked]:font-medium has-[:checked]:text-neutral-900 has-[:focus-visible]:z-20 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:has-[:checked]:border-b-[Canvas]">
          <input id="tabs-enclosed-panel-overview" type="radio" name="tabs-enclosed-panel" aria-controls="tabs-enclosed-panel-overview-panel" defaultChecked className="sr-only focus-visible:outline-hidden" />
          Overview
        </label>
        <label id="tabs-enclosed-panel-details-label" className="relative -mb-px -ml-px flex h-10 cursor-pointer items-center justify-center rounded-t-md border border-neutral-200 bg-neutral-50 px-4 text-sm text-neutral-600 transition-colors first:ml-0 hover:bg-white hover:text-neutral-900 has-[:checked]:z-10 has-[:checked]:border-b-white has-[:checked]:bg-white has-[:checked]:font-medium has-[:checked]:text-neutral-900 has-[:focus-visible]:z-20 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:has-[:checked]:border-b-[Canvas]">
          <input id="tabs-enclosed-panel-details" type="radio" name="tabs-enclosed-panel" aria-controls="tabs-enclosed-panel-details-panel" className="sr-only focus-visible:outline-hidden" />
          Details
        </label>
        <label id="tabs-enclosed-panel-notes-label" className="relative -mb-px -ml-px flex h-10 cursor-pointer items-center justify-center rounded-t-md border border-neutral-200 bg-neutral-50 px-4 text-sm text-neutral-600 transition-colors first:ml-0 hover:bg-white hover:text-neutral-900 has-[:checked]:z-10 has-[:checked]:border-b-white has-[:checked]:bg-white has-[:checked]:font-medium has-[:checked]:text-neutral-900 has-[:focus-visible]:z-20 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:has-[:checked]:border-b-[Canvas]">
          <input id="tabs-enclosed-panel-notes" type="radio" name="tabs-enclosed-panel" aria-controls="tabs-enclosed-panel-notes-panel" className="sr-only focus-visible:outline-hidden" />
          Notes
        </label>
      </div>
      <div className="rounded-b-lg rounded-tr-lg border border-neutral-200 bg-white p-4">
        <section id="tabs-enclosed-panel-overview-panel" aria-labelledby="tabs-enclosed-panel-overview-label" className="hidden group-has-[#tabs-enclosed-panel-overview:checked]:block">
          <h2 className="text-base font-semibold">Panel heading</h2>
          <p className="mt-2 text-sm text-pretty text-neutral-600">Describe this content group and the next step readers can take from it.</p>
          <a href="#" className="mt-6 inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Secondary action</a>
        </section>
        <section id="tabs-enclosed-panel-details-panel" aria-labelledby="tabs-enclosed-panel-details-label" className="hidden group-has-[#tabs-enclosed-panel-details:checked]:block">
          <h2 className="text-base font-semibold">Detail heading</h2>
          <p className="mt-2 text-sm text-pretty text-neutral-600">Explain the supporting information and where readers can inspect it more closely.</p>
          <a href="#" className="mt-6 inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Review details</a>
        </section>
        <section id="tabs-enclosed-panel-notes-panel" aria-labelledby="tabs-enclosed-panel-notes-label" className="hidden group-has-[#tabs-enclosed-panel-notes:checked]:block">
          <h2 className="text-base font-semibold">Note heading</h2>
          <p className="mt-2 text-sm text-pretty text-neutral-600">Use a short note to explain the context that belongs with this record.</p>
          <a href="#" className="mt-6 inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">View notes</a>
        </section>
      </div>
    </div>
  )
}

Pattern notes

When to use: Use for related content groups that benefit from a shared visible frame. Choose tabs-underline-panels for an unframed presentation or tabs-vertical-rail for more category labels. Variations: put notes first, replace the action with a compact definition list, or show a different view initially.
Hierarchy: The checked folder visually joins its matching section. Read a one-word view label, a heading up to 4 words, body up to 18 words and one action up to 3 words. A labelled radiogroup supplies native choice semantics and aria-controls identifies each matching section.
Responsive: Below 640px the root is 288px and all three folder labels fit without wrapping. At 640px it becomes 448px. The panel remains stacked and its body text reflows; label heights and padding stay fixed.
Layout: A 288px (w-72) root expands to 448px (sm:w-[28rem]) at 640px. Three 40px folder labels have 16px horizontal padding, rounded-t-md corners and neutral-200 borders overlapping by 1px. Their row overlaps a rounded-b-lg rounded-tr-lg bordered panel by 1px. The panel has 16px padding, a 16px semibold heading, 8px to 14px body and 24px to a 44px outlined action.
States: Overview is checked on entry. Unchecked folders are neutral-50 with neutral-600 text; hover makes them white with neutral-900 text. The checked folder has medium neutral-900 text, white fill and a white bottom border, raised to z-10. Focus raises a label to z-20 with a 2px outline offset 2px. Canvas keeps the joined bottom edge in forced colors. Arrow keys switch radios. Actions hover neutral-50 and show the standard focus outline.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ ┌──────────┬──────────┬──────────┐                   │
│ │ Overview │ Details  │ Notes    │                   │
│ ├──────────┴──────────┴──────────┴───────────────┐   │
│ │ Panel heading                                  │   │
│ │ Two lines that explain this content group.     │   │
│ │                                                │   │
│ │ [Secondary action]                             │   │
│ └────────────────────────────────────────────────┘   │
└──────────────────────────────────────────────────────┘

View all

Tabs — Bottom bar with icons
Layout tags: stacked,icons,media,compact
Tabs — Centered period choices and a metric
Layout tags: centered,stacked,numbers,compact
Tabs — Counted links with More menu
Layout tags: row,layered,numbers,compact

Tabs — Enclosed tabs on a bordered panel

Pattern notes

More in Tabs

Tabs — Bottom bar with icons

Tabs — Centered period choices and a metric

Tabs — Counted links with More menu