Tabs

A component for organizing and switching between multiple sections of content within a single view.

Tab 1 Content

Anatomy

Usage

<script>
  import {Tabs} from 'ui-ingredients';

  let items = [
    {
      value: '1',
      label: 'Item 1',
      content: 'Item 1 Content',
    },
    {
      value: '2',
      label: 'Item 2',
      content: 'Item 2 Content',
    },
    {
      value: '3',
      label: 'Item 3',
      content: 'Item 3 Content',
    },
  ];
</script>

<Tabs.Root>
  <Tabs.List>
    {#each items as { value, label }}
      <Tabs.Trigger {value}>
        {label}
      </Tabs.Trigger>
    {/each}
  </Tabs.List>

  {#each items as { value, content }}
    <Tabs.Content {value}>
      {content}
    </Tabs.Content>
  {/each}
</Tabs.Root>

API Reference

Root

Prop	Default	Description
`activationMode`	`"automatic"`	`"manual" \| "automatic"` The activation mode of the tabs. Can be `manual` or `automatic` - `manual`: Tabs are activated when clicked or press `enter` key. - `automatic`: Tabs are activated when receiving focus
`composite`		`boolean` Whether the tab is composite
`defaultValue`		`string` The initial selected tab value when rendered. Use when you don't need to control the selected tab value.
`deselectable`		`boolean` Whether the active tab can be deselected when clicking on it.
`id`		`string` The unique identifier of the machine.
`ids`		`{ root?: string; trigger?: string; list?: string; content?: string; indicator?: string; }` The ids of the elements in the tabs. Useful for composition.
`loopFocus`	`true`	`boolean` Whether the keyboard navigation will loop from last tab to first, and vice versa.
`navigate`		`(details: NavigateDetails) => void` Function to navigate to the selected tab when clicking on it. Useful if tab triggers are anchor elements.
`onFocusChange`		`(details: FocusChangeDetails) => void` Callback to be called when the focused tab changes
`onValueChange`		`(details: ValueChangeDetails) => void` Callback to be called when the selected/active tab changes
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the tabs. Can be `horizontal` or `vertical` - `horizontal`: only left and right arrow key navigation will work. - `vertical`: only up and down arrow key navigation will work.
`translations`		`IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`value`		`string` The controlled selected tab value
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-focus`	Present when focused
`data-orientation`	The orientation of the tabs
`data-part`	root
`data-scope`	tabs

Content

Prop	Default	Description
`value`		`string` The value of the tab.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-orientation`	The orientation of the content
`data-part`	content
`data-scope`	tabs
`data-selected`	Present when selected

Indicator

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-orientation`	The orientation of the indicator
`data-part`	indicator
`data-scope`	tabs

List

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-focus`	Present when focused
`data-orientation`	The orientation of the list
`data-part`	list
`data-scope`	tabs

Trigger

Prop	Default	Description
`disabled`		`boolean` Whether the tab is disabled.
`value`		`string` The value of the tab.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-focus`	Present when focused
`data-orientation`	The orientation of the trigger
`data-part`	trigger
`data-scope`	tabs
`data-selected`	Present when selected
`data-ssr`
`data-value`	The value of the item

Accessibility

Keyboard Support

Key	Description
Tab	When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content.
ArrowDown	Moves focus to the next trigger in vertical orientation and activates its associated content.
ArrowRight	Moves focus to the next trigger in horizontal orientation and activates its associated content.
ArrowUp	Moves focus to the previous trigger in vertical orientation and activates its associated content.
ArrowLeft	Moves focus to the previous trigger in horizontal orientation and activates its associated content.
Home	Moves focus to the first trigger and activates its associated content.
End	Moves focus to the last trigger and activates its associated content.
Enter + Space	In manual mode, when a trigger is focused, moves focus to its associated content.