Tabs

Sections of one surface that the reader switches between; only the chosen section is rendered. underline is for the sections of a page or a record, with an ink rule under the chosen tab; segmented sits inside a card, a drawer or a panel. A count after the label is a neutral Badge. Arrow keys move between tabs, and a disabled tab is skipped.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@puckoops/camelot";
Client
Nordvik Atelier
Budget
£28,000
Status
In Progress
NameDescriptionDefaultControl
defaultValue
string		-
onValueChange
function		--
activationMode
manual waits for Enter or Space
string		-
activationMode
variant
underline for the sections of a page or record; segmented inside a card, drawer or panel.
"underline""segmented"		"underline"
variant

Also takes ComponentPropsWithoutRef<typeof RTabs.Root>.

When to use

Use Tabs when each option shows a different section below, such as Overview · Tasks · Files on a project. Underline is the default; segmented sits inside a card, a drawer or a panel. Keep labels to one or two words and put a count on the tab rather than in its label.

  • Use SegmentedControl instead to switch the view of the same data, such as Month · Week.
  • Use Accordion instead when several sections may be open at once or are read in order.
  • Use Stepper instead when the sections are steps that must be done in order.

Examples

Segmented

Inside a panel: the chosen tab rises onto the surface.

Client
Nordvik Atelier
Budget
£28,000
Status
In Progress

Without Counts

One or two words per tab.

Nordvik Atelier, Oslo. Client since March 2024.

Disabled Tab

Files is unavailable until the project has a folder; the arrow keys skip it.

Client
Nordvik Atelier
Budget
£28,000
Status
In Progress

In A Card

Segmented tabs, controlled, at the top of a card.

14 tasks due, 3 invoices to send.

All Variants

Both variants with counts and a disabled tab.

underline

Open tasks

Signage proofs
03 Oct
Stationery print run
09 Oct
Website header
15 Oct

segmented

Open tasks

Signage proofs
03 Oct
Stationery print run
09 Oct
Website header
15 Oct