Selectalternative
Use Select for many options in compact spaceTabs
Organize content into switchable panels. Use for related content that benefits from a compact, navigable layout.
Setup
import { Tabs } from '@fragments-sdk/ui';Examples
Underline
Default underline style tabs
Loading preview...
Pills
Pill-style tabs for contained sections
Loading preview...
With Disabled
Tabs with a disabled option
Loading preview...
List Variant Override
Tabs sets a default variant, and Tabs.List can override it per list
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Tab list and panels (use Tabs.List, Tabs.Tab, Tabs.Panel) |
defaultValue | string | Not set | Initially active tab (uncontrolled) |
value | string | Not set | Controlled active tab value |
onValueChange | function | Not set | Called when active tab changes |
orientation | enumhorizontalvertical | horizontal | Tab list orientation |
variant | enumunderlinepills | underline | Default visual style for Tabs.List (can be overridden on Tabs.List) |
Usage Guidelines
When to use
- Organizing related content into sections
- Reducing page scrolling by grouping content
- Settings pages with multiple categories
- Dashboard views with different data perspectives
When not to use
- Primary navigation (use sidebar or header nav)
- Sequential steps (use Stepper or wizard)
- Comparing content side-by-side
- Very long lists of options (use Select or Menu)
Best practices
- Keep tab labels short (1-2 words)
- Order tabs by usage frequency or logical sequence
- Avoid more than 5-6 tabs; consider sub-navigation for more
- Tab content should be roughly equivalent in scope
- Use pills variant for contained sections, underline for page-level tabs
Accessibility
- Keyboard navigation with arrow keys
- Tab panels are properly labeled
- Focus management follows WAI-ARIA tabs pattern