Tabs

A component for toggling between related panels on the same page. There is no border. The selected tab rests on the wash, hover and focus shift that wash, and the indicator is the accent. Tabs are Regular and panels are Light.

Anatomy

<UiTabsRoot default-value="overview">
  <UiTabsList>
    <UiTabsTab value="overview">Overview</UiTabsTab>
    <UiTabsTab value="projects">Projects</UiTabsTab>
    <UiTabsIndicator />
  </UiTabsList>
  <UiTabsPanel value="overview">Workspace stats and activity.</UiTabsPanel>
  <UiTabsPanel value="projects">Milestones and deadlines.</UiTabsPanel>
</UiTabsRoot>

Parts

• Root — owns the active value. orientation is horizontal (default) or vertical.
• List — role="tablist".
• Tab — role="tab". Arrow keys move and activate. data-selected.
• Indicator — a CSS bar that follows the selected tab (left / width, or top / height when vertical).
• Panel — role="tabpanel". Hidden when not selected.