Tabs — Grouped view choices in two columns

Two labelled groups arrange four view choices in a two-column selector above one shared content panel. Use when related views fall into two clear categories.

ReactHTML

1440 × 480

Open in new tab

Component.tsx26 lines

export default function TabsGroupedNavigation() {
  return (
    <div className="group w-72 text-neutral-900 sm:w-[28rem]"><div className="grid grid-cols-2 gap-4" role="radiogroup" aria-label="Record view"><fieldset className="min-w-0"><legend className="mb-2 text-xs font-medium text-neutral-500">Information</legend>
    <div className="grid gap-1"><label className="flex h-9 items-center px-3 cursor-pointer rounded-md border border-neutral-300 bg-white text-sm text-neutral-600 hover:bg-neutral-50 has-[:checked]:border-neutral-900 has-[:checked]:font-medium has-[:checked]:text-neutral-900 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:has-[:checked]:border-[Highlight]" id="tabs-grouped-navigation-overview-label"><input className="sr-only focus-visible:outline-hidden" id="tabs-grouped-navigation-overview" name="tabs-grouped-navigation" value="overview" type="radio" aria-controls="tabs-grouped-navigation-overview-panel" defaultChecked />
    Overview</label>
    <label className="flex h-9 items-center px-3 cursor-pointer rounded-md border border-neutral-300 bg-white text-sm text-neutral-600 hover:bg-neutral-50 has-[:checked]:border-neutral-900 has-[:checked]:font-medium has-[:checked]:text-neutral-900 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:has-[:checked]:border-[Highlight]" id="tabs-grouped-navigation-details-label"><input className="sr-only focus-visible:outline-hidden" id="tabs-grouped-navigation-details" name="tabs-grouped-navigation" value="details" type="radio" aria-controls="tabs-grouped-navigation-details-panel"  />
    Details</label></div></fieldset>
    <fieldset className="min-w-0"><legend className="mb-2 text-xs font-medium text-neutral-500">History</legend>
    <div className="grid gap-1"><label className="flex h-9 items-center px-3 cursor-pointer rounded-md border border-neutral-300 bg-white text-sm text-neutral-600 hover:bg-neutral-50 has-[:checked]:border-neutral-900 has-[:checked]:font-medium has-[:checked]:text-neutral-900 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:has-[:checked]:border-[Highlight]" id="tabs-grouped-navigation-activity-label"><input className="sr-only focus-visible:outline-hidden" id="tabs-grouped-navigation-activity" name="tabs-grouped-navigation" value="activity" type="radio" aria-controls="tabs-grouped-navigation-activity-panel"  />
    Activity</label>
    <label className="flex h-9 items-center px-3 cursor-pointer rounded-md border border-neutral-300 bg-white text-sm text-neutral-600 hover:bg-neutral-50 has-[:checked]:border-neutral-900 has-[:checked]:font-medium has-[:checked]:text-neutral-900 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:has-[:checked]:border-[Highlight]" id="tabs-grouped-navigation-revisions-label"><input className="sr-only focus-visible:outline-hidden" id="tabs-grouped-navigation-revisions" name="tabs-grouped-navigation" value="revisions" type="radio" aria-controls="tabs-grouped-navigation-revisions-panel"  />
    Revisions</label></div></fieldset></div>
    <section className="mt-4 border-t border-neutral-200 pt-4 hidden group-has-[#tabs-grouped-navigation-overview:checked]:block" id="tabs-grouped-navigation-overview-panel" aria-labelledby="tabs-grouped-navigation-overview-label"><h2 className="text-base font-semibold">Overview heading</h2>
    <p className="mt-2 text-sm text-pretty text-neutral-600">Describe the selected category and its relevant records.</p>
    <p className="mt-3 text-xs text-neutral-500">Short supporting detail for this view.</p></section>
    <section className="mt-4 border-t border-neutral-200 pt-4 hidden group-has-[#tabs-grouped-navigation-details:checked]:block" id="tabs-grouped-navigation-details-panel" aria-labelledby="tabs-grouped-navigation-details-label"><h2 className="text-base font-semibold">Details heading</h2>
    <p className="mt-2 text-sm text-pretty text-neutral-600">Describe the selected category and its relevant records.</p>
    <p className="mt-3 text-xs text-neutral-500">Short supporting detail for this view.</p></section>
    <section className="mt-4 border-t border-neutral-200 pt-4 hidden group-has-[#tabs-grouped-navigation-activity:checked]:block" id="tabs-grouped-navigation-activity-panel" aria-labelledby="tabs-grouped-navigation-activity-label"><h2 className="text-base font-semibold">Activity heading</h2>
    <p className="mt-2 text-sm text-pretty text-neutral-600">Describe the selected category and its relevant records.</p>
    <p className="mt-3 text-xs text-neutral-500">Short supporting detail for this view.</p></section>
    <section className="mt-4 border-t border-neutral-200 pt-4 hidden group-has-[#tabs-grouped-navigation-revisions:checked]:block" id="tabs-grouped-navigation-revisions-panel" aria-labelledby="tabs-grouped-navigation-revisions-label"><h2 className="text-base font-semibold">Revisions heading</h2>
    <p className="mt-2 text-sm text-pretty text-neutral-600">Describe the selected category and its relevant records.</p>
    <p className="mt-3 text-xs text-neutral-500">Short supporting detail for this view.</p></section></div>
  )
}

Pattern notes

When to use: Use for peer views that belong to two small categories. Choose a vertical rail for a longer category list. Variations: group content and discussion views, rename History to Records, or replace Revisions with Files.
Hierarchy: Read Information and its two choices, History and its choices, then the selected heading and details. The four radios share one name across the two fieldsets. Group names and view labels use one word; panel copy stays under 12 words per paragraph.
Responsive: Below 640px the root is 288px; above it is 448px. The two selector groups stay side by side and each keeps its two stacked options. The content panel stays full width underneath.
Layout: A 288px root grows to 448px at sm. The selector has two equal columns with a 16px gap. Each fieldset places a 12px group heading 8px over two 36px choices separated by 4px. A single selected panel follows by 16px with a top divider and 16px top padding.
States: Overview starts selected. Checked radios use dark borders and medium text, preserving a Highlight border in forced colors. Hover fills neutral-50, keyboard focus outlines labels and CSS shows only the section controlled by the checked radio.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ Information                      History             │
│ [Overview]                       [Activity]          │
│ [Details]                        [Revisions]         │
│ ──────────────────────────────────────────────       │
│ Overview heading                                     │
│ Describe the selected category and records.          │
│ Short supporting detail for this view.               │
└──────────────────────────────────────────────────────┘

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 — Grouped view choices in two columns

Pattern notes

More in Tabs

Tabs — Bottom bar with icons

Tabs — Centered period choices and a metric

Tabs — Counted links with More menu