Tabs
Importing
Add rh-tabs to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-tabs/rh-tabs.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Usage
<rh-tabs>
<rh-tab id="users" slot="tab">Users</rh-tab>
<rh-tab-panel>Users</rh-tab-panel>
<rh-tab slot="tab">Containers</rh-tab>
<rh-tab-panel>Containers <a href="#">Focusable element</a></rh-tab-panel>
<rh-tab slot="tab">Database</rh-tab>
<rh-tab-panel>Database</rh-tab-panel>
<rh-tab slot="tab">Servers</rh-tab>
<rh-tab-panel>Servers</rh-tab-panel>
<rh-tab slot="tab">Cloud</rh-tab>
<rh-tab-panel>Cloud</rh-tab-panel>
</rh-tabs>
<script type="module">
import '@rhds/elements/rh-tabs/rh-tabs.js';
</script>
<style>
a {
color: var(--rh-color-interactive-primary-default);
&:hover { color: var(--rh-color-interactive-primary-hover); }
&:focus-within { color: var(--rh-color-interactive-primary-focus); }
&:active { color: var(--rh-color-interactive-primary-active); }
&:visited {
color: var(--rh-color-interactive-primary-visited);
&:hover { color: var(--rh-color-interactive-primary-visited-hover); }
&:focus-within { color: var(--rh-color-interactive-primary-visited-focus); }
&:active { color: var(--rh-color-interactive-primary-visited-active); }
}
}
</style>rh-tabs
Tabs are used to organize and navigate between sections of content. They feature a horizontal or a vertical list of section text labels with a content panel below or to the right of the component.
| Slot Name | Description |
|---|---|
tab |
Must contain one or more |
|
Must contain one or more |
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
label-scroll-left |
labelScrollLeft |
Label for the scroll left button |
|
|
label-scroll-right |
labelScrollRight |
Label for the scroll right button |
|
|
manual |
manual |
|
|
|
active-index |
activeIndex |
Index of the active tab |
|
|
color-palette |
colorPalette |
Sets color context for child components, overrides parent context |
|
|
centered |
centered |
Aligns tabs to the center |
|
|
box |
box |
Sets tabs to a boxed style with or without an inset |
|
|
vertical |
vertical |
Sets the alignment of the tabs vertical |
|
|
| Method Name | Description |
|---|---|
select(option: RhTab | number) |
| Part Name | Description |
|---|---|
container |
outer container |
tabs-container |
tabs container |
tabs |
tablist |
panels |
panels |
| CSS Property | Description | Default |
|---|---|---|
--rh-tabs-inset |
Tabs inset |
auto
|
| Token | Copy |
|---|---|
--rh-border-width-lg
|
|
--rh-border-width-sm
|
|
--rh-color-accent-base
|
|
--rh-color-border-subtle
|
|
--rh-color-gray-40
|
|
--rh-color-gray-50
|
|
--rh-color-surface
|
|
--rh-color-text-primary
|
|
--rh-color-text-secondary
|
|
--rh-font-size-body-text-md
|
|
--rh-space-2xl
|
|
--rh-space-3xl
|
|
--rh-space-4xl
|
|
--rh-space-lg
|
|
rh-tab-panel
The tab panel for use within a rh-tabs element, must be paired with a rh-tab.
| Slot Name | Description |
|---|---|
|
Panel content should follow guidelines for tab panel content layout |
| Token | Copy |
|---|---|
--rh-color-surface
|
|
--rh-space-2xl
|
|
rh-tab
The tab button for use within a rh-tabs element, must be paired with a rh-tab-panel.
| Slot Name | Description |
|---|---|
icon |
Can contain an |
|
Tab title text |
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
active |
active |
True when the tab is selected |
|
|
disabled |
disabled |
True when the tab is disabled |
|
|
| Event Name | Description |
|---|---|
expand |
when a tab expands |
| Part Name | Description |
|---|---|
button |
element that contains the interactive part of a tab |
icon |
icon |
text |
tile text |
| CSS Property | Description | Default |
|---|---|---|
--rh-tabs-link-color |
Tab link text color |
#4d4d4d
|
--rh-tabs-active-border-color |
Tab active border color |
#ff442b
|
--rh-tabs-link-padding-inline-start |
Tab padding inline start |
32px
|
--rh-tabs-link-padding-block-start |
Tab padding block start |
16px
|
--rh-tabs-link-padding-inline-end |
Tab padding inline end |
32px`
|
--rh-tabs-link-padding-block-end |
Tab padding block end |
16px
|
| Token | Copy |
|---|---|
--rh-border-width-lg
|
|
--rh-border-width-sm
|
|
--rh-color-accent-brand
|
|
--rh-color-border-subtle
|
|
--rh-color-interactive-primary-default
|
|
--rh-color-interactive-secondary-default
|
|
--rh-color-surface
|
|
--rh-color-surface-dark
|
|
--rh-color-surface-lighter
|
|
--rh-color-text-primary
|
|
--rh-color-text-secondary
|
|
--rh-line-height-heading
|
|
--rh-space-2xl
|
|
--rh-space-lg
|
|
--rh-space-md
|
|
--rh-space-xl
|
|
