Display / Tabs

Tabs

Index-card dividers. The active one comes forward and joins the page. Arrow keys move between them.

Client componentWCAG AASince v0.1

Flooding, Purok 4 · Road accident, Maharlika Hwy · Noise complaint, Brgy. 3

import { Tabs, TabList, Tab, TabPanel, Count } from "@plop-ui/react";

<Tabs defaultValue="active">
  <TabList label="Incident queue">
    <Tab value="active" badge={<Count label="3 active" size="sm">3</Count>}>Active</Tab>
    <Tab value="resolved">Resolved</Tab>
  </TabList>
  <TabPanel value="active">…</TabPanel>
  <TabPanel value="resolved">…</TabPanel>
</Tabs>

Change every prop live in the playground.

Props

`Tabs`

Prop	Type	Default	What it does
children required	ReactNode	—	—
className	string	none	—
defaultValue	string	none	—
onValueChange	(value: string) => void	none	—
value	string	none	—

`TabList`

Prop	Type	Default	What it does
children required	ReactNode	—	—
label required	string	—	Accessible name of the tab list, e.g. "Incident queue".
className	string	none	—

`Tab`

Prop	Type	Default	What it does
children required	ReactNode	—	—
value required	string	—	—
badge	ReactNode	none	A count badge after the label (e.g. a <Count>).
disabled	boolean	false	—

Use it well

DoUse tabs to switch between views of the same thing.

Don'tUse tabs as steps in a process. People can't tell they have to visit each one.

Accessibility

The WAI-ARIA tabs pattern: tablist, tabs with aria-selected and aria-controls, tabpanels.
Roving tabindex; Arrow keys, Home and End move and select.