Tabs — Underline with panels

Three underline radio choices switch between a heading, supporting copy and compact label/value rows. Use for related views of one record.

ReactHTML

1440 × 480

Open in new tab

Component.tsx74 lines

export default function TabsUnderlinePanels() {
  return (
    <div className="group w-72 bg-white text-neutral-900 sm:w-[28rem]">
      <div role="radiogroup" aria-label="Content view" className="flex border-b border-neutral-200 sm:gap-6">
        <label id="tabs-underline-panels-overview-label" className="-mb-px flex h-10 flex-1 cursor-pointer items-center justify-center border-b-2 border-transparent px-1 text-sm font-medium text-neutral-500 transition-colors hover:border-neutral-300 hover:text-neutral-700 has-[:checked]:border-neutral-900 has-[:checked]:text-neutral-900 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 sm:flex-none sm:px-0">
          <input id="tabs-underline-panels-overview" type="radio" name="tabs-underline-panels" aria-controls="tabs-underline-panels-overview-panel" defaultChecked className="sr-only focus-visible:outline-hidden" />
          Overview
        </label>
        <label id="tabs-underline-panels-details-label" className="-mb-px flex h-10 flex-1 cursor-pointer items-center justify-center border-b-2 border-transparent px-1 text-sm font-medium text-neutral-500 transition-colors hover:border-neutral-300 hover:text-neutral-700 has-[:checked]:border-neutral-900 has-[:checked]:text-neutral-900 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 sm:flex-none sm:px-0">
          <input id="tabs-underline-panels-details" type="radio" name="tabs-underline-panels" aria-controls="tabs-underline-panels-details-panel" className="sr-only focus-visible:outline-hidden" />
          Details
        </label>
        <label id="tabs-underline-panels-activity-label" className="-mb-px flex h-10 flex-1 cursor-pointer items-center justify-center border-b-2 border-transparent px-1 text-sm font-medium text-neutral-500 transition-colors hover:border-neutral-300 hover:text-neutral-700 has-[:checked]:border-neutral-900 has-[:checked]:text-neutral-900 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 sm:flex-none sm:px-0">
          <input id="tabs-underline-panels-activity" type="radio" name="tabs-underline-panels" aria-controls="tabs-underline-panels-activity-panel" className="sr-only focus-visible:outline-hidden" />
          Activity
        </label>
      </div>
      <section id="tabs-underline-panels-overview-panel" aria-labelledby="tabs-underline-panels-overview-label" className="mt-4 hidden group-has-[#tabs-underline-panels-overview:checked]:block">
        <h2 className="text-base font-semibold">Panel heading</h2>
        <p className="mt-2 text-sm text-pretty text-neutral-600">Describe the selected view and the information readers should notice first.</p>
        <dl className="mt-4 text-sm">
          <div className="flex justify-between gap-4 border-b border-neutral-200 py-2 last:border-b-0">
            <dt className="text-neutral-500">Status</dt>
            <dd className="font-medium text-neutral-900">Active</dd>
          </div>
          <div className="flex justify-between gap-4 border-b border-neutral-200 py-2 last:border-b-0">
            <dt className="text-neutral-500">Items</dt>
            <dd className="font-medium text-neutral-900">24</dd>
          </div>
          <div className="flex justify-between gap-4 border-b border-neutral-200 py-2 last:border-b-0">
            <dt className="text-neutral-500">Updated</dt>
            <dd className="font-medium text-neutral-900">Mar 14</dd>
          </div>
        </dl>
      </section>
      <section id="tabs-underline-panels-details-panel" aria-labelledby="tabs-underline-panels-details-label" className="mt-4 hidden group-has-[#tabs-underline-panels-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 scope of these details and how to interpret the values below.</p>
        <dl className="mt-4 text-sm">
          <div className="flex justify-between gap-4 border-b border-neutral-200 py-2 last:border-b-0">
            <dt className="text-neutral-500">Owner</dt>
            <dd className="font-medium text-neutral-900">Alex Rivera</dd>
          </div>
          <div className="flex justify-between gap-4 border-b border-neutral-200 py-2 last:border-b-0">
            <dt className="text-neutral-500">Access</dt>
            <dd className="font-medium text-neutral-900">Shared</dd>
          </div>
          <div className="flex justify-between gap-4 border-b border-neutral-200 py-2 last:border-b-0">
            <dt className="text-neutral-500">Created</dt>
            <dd className="font-medium text-neutral-900">Mar 10</dd>
          </div>
        </dl>
      </section>
      <section id="tabs-underline-panels-activity-panel" aria-labelledby="tabs-underline-panels-activity-label" className="mt-4 hidden group-has-[#tabs-underline-panels-activity:checked]:block">
        <h2 className="text-base font-semibold">Activity heading</h2>
        <p className="mt-2 text-sm text-pretty text-neutral-600">Summarize recent changes and give each entry a clear label and value.</p>
        <dl className="mt-4 text-sm">
          <div className="flex justify-between gap-4 border-b border-neutral-200 py-2 last:border-b-0">
            <dt className="text-neutral-500">Added</dt>
            <dd className="font-medium text-neutral-900">12 items</dd>
          </div>
          <div className="flex justify-between gap-4 border-b border-neutral-200 py-2 last:border-b-0">
            <dt className="text-neutral-500">Reviewed</dt>
            <dd className="font-medium text-neutral-900">8 items</dd>
          </div>
          <div className="flex justify-between gap-4 border-b border-neutral-200 py-2 last:border-b-0">
            <dt className="text-neutral-500">Pending</dt>
            <dd className="font-medium text-neutral-900">4 items</dd>
          </div>
        </dl>
      </section>
    </div>
  )
}

Pattern notes

When to use: Use for compact record views with comparable metadata. Choose tabs-segmented-pills for lists or tabs-vertical-rail for a longer category rail. Variations: replace values with dates, add a fourth metadata row, or change the default selected view.
Hierarchy: Read the selected view label, panel heading, short explanation and three right-aligned values. Labels are one word; headings up to 4 words; body up to 18 words; row labels and values up to 3 words. A labelled native radiogroup controls sections through aria-controls. This uses radio semantics.
Responsive: Below 640px labels divide the 288px row into equal thirds with centred text. At 640px the root is 448px, labels size to their content and have 24px gaps. Panels and definition rows remain stacked; body copy wraps naturally.
Layout: A 288px (w-72) white root expands to 448px (sm:w-[28rem]) at 640px. Three 40px-high labels sit on a 1px neutral-200 bottom border, with a 2px indicator overlapping it by 1px. Panels start 16px below the row. Each has a 16px semibold heading, 8px to 14px body copy and 16px to three definition rows with 8px vertical padding and 1px dividers.
States: The first radio is checked by default. Checked labels show neutral-900 text and an underline; unchecked hover uses neutral-700 text and a neutral-300 underline. Only the checked panel displays. Native arrow keys change the selection. A focused radio draws a 2px neutral-900 outline offset 2px around its label through :has(:focus-visible). No disabled choices are shown.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ [Overview]   [Details]   [Activity]                  │
│ ──────────                                           │
│ Panel heading                                        │
│ Two lines that explain the selected view.            │
│ Label                                          Value │
├──────────────────────────────────────────────────────┤
│ Label                                          Value │
├──────────────────────────────────────────────────────┤
│ Label                                          Value │
└──────────────────────────────────────────────────────┘

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 — Underline with panels

Pattern notes

More in Tabs

Tabs — Bottom bar with icons

Tabs — Centered period choices and a metric

Tabs — Counted links with More menu