Tabs — dotmatrix

A set of switchable panels, each with a corresponding tab button. Composed from Tab, TabList, and TabPanel — see those pages for the individual pieces.

tsx

Overview panel content.

<Tabs defaultValue="a">
  <TabList aria-label="Demo tabs">
    <Tab value="a">Overview</Tab>
    <Tab value="b">Activity</Tab>
  </TabList>
  <TabPanel value="a">Overview panel content.</TabPanel>
  <TabPanel value="b">Activity panel content.</TabPanel>
</Tabs>

tsx

Overview panel content.

<Tabs defaultValue="a">
  ...
</Tabs>

defaultValue

Examples

Controlled, for when the active tab needs to sync with something else — a URL query param, say:

tsx

Overview panel content.

const [tab, setTab] = useState("overview");

<Tabs value={tab} onChange={setTab}>
  <TabList aria-label="Project sections">
    <Tab value="overview">Overview</Tab>
    <Tab value="activity">Activity</Tab>
  </TabList>
  <TabPanel value="overview">...</TabPanel>
  <TabPanel value="activity">...</TabPanel>
</Tabs>;

Every TabPanel renders into the DOM up front (just hidden while inactive), so switching tabs never re-triggers a mount — safe for a panel that holds form state a user shouldn't lose by clicking away and back.

Props

Prop	Type	Default	Description
defaultValue	text	—	—
onChange	readonly	—	—
value	text	—	—