Skip to content
quartiledocsv0.1
GitHub

Tabs

Preview

Tabs switch between views of the same data, with an optional count after each label.

Example

Revenue, orders and conversion for the period.

<Tabs
  label="Report"
  defaultValue="overview"
  items={[
    { value: 'overview', label: 'Overview' },
    { value: 'orders', label: 'Orders', count: orders.length.toLocaleString('en-US') },
    { value: 'archived', label: 'Archived', disabled: true },
  ]}
>
  <TabPanel value="overview">Revenue, orders and conversion for the period.</TabPanel>
  <TabPanel value="orders">Every order in the period, newest first.</TabPanel>
</Tabs>

Usage

Children are <TabPanel value> elements, or a function of the active value that renders one panel. A panel renders only while its tab is active. Leave children empty when the tabs drive content elsewhere.

Props

Tabs

PropTypeDefaultDescription
itemsrequiredTabItem[]——
valuestring——
defaultValuestring——
onChange(value: string) => void——
labelstring—Names the tab list for assistive technology.
childrenReactNode | ((value: string) => ReactNode)—Panels: <TabPanel value> elements, or a function of the active value that renders the one panel. Leave empty when the tabs drive content elsewhere.

Also accepts the props of Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'>, spread onto the root element.

TabItem

PropTypeDefaultDescription
valuerequiredstring——
labelrequiredReactNode——
countReactNode—Small mono count after the label.
disabledboolean——

Accessibility

  • A tablist named by label; each panel is labelled by its tab.
  • Arrow keys move between tabs and select them; Home and End jump to the ends; disabled tabs are skipped.
Report an issueBuilt Oct 21, 2026