Tabs
A navigation component that organizes content into multiple panels with clickable tabs.
Usage
Use standalone.
<Tabs {...props} />Anatomy
The class attribute values represent part names. Other attributes represent their corresponding props.
<div class="whole">
<div class="top" {...rest} role="tablist" aria-orientation={orientation} aria-label>
{#each tabs as tab}
<button class="label" type="button" role="tab">{tab.label}</button>
{/each}
</div>
{#each tabs as tab}
<div class="main" role="tabpanel" hidden={!selected}>{tab.panel}</div>
{/each}
</div>Props
| Name | Type | Default | Description |
|---|---|---|---|
tabs* | TabItem[] | - | Array of tabs; each needs a unique value, a label, and a panel; disabled prevents selection |
current | string | - | Bindable selected tab value; defaults to the first enabled tab |
manual | boolean | false | Manual activation: arrows move focus only, Enter/Space selects |
orientation | <enum> | "horizontal" | Tablist orientation for keyboard nav and aria-orientation |
styling | SVSClass | - | Styling override |
variant | SVSVariant | NEUTRAL | Variant |
* required. Other <div> attributes are passed to the role="tablist" element via rest props; class is merged onto the tablist.
Name the tablist with aria-label / aria-labelledby through the rest props.
Styling
To learn more, see Styling.
Variant Management
The selected tab (button) gets active; a disabled tab gets inactive; all remaining tabs follow variant.
Default Class Name
svs-tabs
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
ArrowRight / ArrowLeft | With orientation="horizontal" (default), moves focus to the next or previous selectable tab, wrapping at the ends |
ArrowDown / ArrowUp | With orientation="vertical", moves focus to the next or previous selectable tab, wrapping at the ends |
Home / End | Moves focus to the first or last selectable tab |
Enter / Space | With manual set, selects the focused tab |
Disabled tabs are skipped. By default, activation follows focus; with manual set, arrow keys only move focus and Enter or Space selects the focused tab.
ARIA Roles and Attributes
The component applies these automatically:
- Tab list (
top):role="tablist"andaria-orientation. - Tab button (
label):role="tab",aria-selected,aria-controlspointing to its panel,aria-disabledwhen disabled, and rovingtabindex. - Panel (
main):role="tabpanel",aria-labelledbypointing to its tab, andhiddenwhen inactive.
Each tab's accessible name comes from its label content. Name the tablist with aria-label or aria-labelledby through rest props when the tab group needs a separate name.
Exports
Types
type TabComponent = { component: Component<any>; props?: Record<string, unknown> };
type TabItem = {
value: string; // REQUIRED, unique within `tabs`
label: string | Snippet | TabComponent;
panel: Snippet | TabComponent;
disabled?: boolean; // (false)
};
interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-orientation" | "onfocusin"> {
tabs: TabItem[];
current?: string; // bindable (first enabled tab value)
manual?: boolean; // (false) manual activation: Arrow keys move focus only; Enter/Space selects
orientation?: "horizontal" | "vertical"; // ("horizontal")
styling?: SVSClass;
variant?: SVSVariant; // (VARIANT.NEUTRAL)
// other div attributes are passed to the role="tablist" element via ...rest; `class` is merged onto the tablist
// aria-label / aria-labelledby name the tablist
}
type TabsReqdProps = "tabs";
type TabsBindProps = "current";Others
// Wraps a component and optional props as a TabComponent for use as a `label` or `panel`.
function toPanel(component: Component<any>, props?: Record<string, unknown>): TabComponent;Examples
The example code uses Tailwind CSS along with SVSClass.