components

Tab

A single tab button, used inside TabList. Arrow Left/Right (wrapping) and Home/End move focus and activate the tab immediately — WAI-ARIA APG's "automatic activation" pattern, right for a tablist whose panels are cheap to show.

tsx
<Tab value="a">
  ...
</Tab>
value

Examples

disabled skips a tab during arrow-key navigation entirely — for a tab that isn't available yet (a report that hasn't finished generating, say), rather than showing an empty panel behind it:

tsx
Overview panel content.
<Tab value="report" disabled={!reportReady}>
  Report
</Tab>

Props

PropTypeDefaultDescription
disabledboolean
value *text