Tabs
Tabs organize related content into panels where only one is visible at a time, such as settings sections, product details, or dashboards.
Try it
Account settings
Security settings
Usage
Compose RuiTabList, RuiTab, RuiTabPanels, and RuiTabPanel. Set value to control the active tab.
import { RuiTabs, RuiTabList, RuiTab, RuiTabPanels, RuiTabPanel } from '@ecopages/radiant-ui/tabs';
<RuiTabs value="account" variant="boxed">
<RuiTabList>
<RuiTab id="account">Account</RuiTab>
<RuiTab id="security">Security</RuiTab>
</RuiTabList>
<RuiTabPanels>
<RuiTabPanel id="account">Account settings</RuiTabPanel>
<RuiTabPanel id="security">Security settings</RuiTabPanel>
</RuiTabPanels>
</RuiTabs>Boxed or ghost
boxed tabs have a contained background and work well in settings panels. ghost tabs sit flush with the page header.
Manual activation
Set automatic=\{false} when switching tabs should require an explicit Enter/Space press.
Theming
Tabs map to semantic surface + primary roles, never Tailwind palette steps:
| Part / variant | CSS roles |
|---|---|
| Tab text | on-background |
| Active indicator | primary border (underline / top of boxed card) |
| Focus | focus-ring at reduced alpha |
| Boxed card | background + border + rounded-container + shadow-sm |
| Boxed tab strip | surface-container-low background |
| Panels | background + p-inset body |
Overrides go at the theme layer, not in component CSS.
Accessibility
- Tab list exposes
role="tablist"witharia-selectedon the active tab. - Arrow keys move between tabs; activation follows the
automaticsetting. - Each panel is labelled by its corresponding tab via
aria-labelledby.
API
RuiTabs is a custom element (<rui-tabs>) coordinating role="tablist" / role="tab" / role="tabpanel" markup authored via the view helpers.
Attributes (<rui-tabs>)
| Attribute | Type | Default | Description |
|---|---|---|---|
variant | ghost ยท boxed | boxed | Visual treatment. |
value | string | '' | Selected tab id; defaults to the first tab. |
label | string | '' | Accessible name for the tab list (prefer aria-label on RuiTabList). |
automatic | boolean | true | Automatic (focus activates) vs manual (Enter/Space) activation. |
Slots
| Slot | Description |
|---|---|
| (default) | RuiTabList and RuiTabPanels (or matching tablist / tabpanel markup). |
Events
| Event | Detail | Description |
|---|---|---|
rui-change | { value: string } | Emitted when the selected tab changes. |
View helpers
| Component | Renders |
|---|---|
RuiTabList | role="tablist" strip. |
RuiTab | role="tab" button; id pairs with a RuiTabPanel. |
RuiTabPanels | Panel group below the tab list. |
RuiTabPanel | role="tabpanel"; id pairs with a RuiTab. |
CSS classes
Public BEM classes (documented via @cssclass):
| Class | Description |
|---|---|
.rui-tabs__list | role="tablist" strip. |
.rui-tabs__tab | role="tab" button; underline/border per variant. |
.rui-tabs__panels | Panel group. |
.rui-tabs__panel | role="tabpanel"; hidden when not selected. |
Theme roles
| Part | CSS variables consumed |
|---|---|
| Active indicator | --primary |
| Focus ring | --focus-ring |
| Boxed card / panels | --background, --border, --surface-container-low, --shadow-sm, --radius-container, --p-inset |