Tabs | Zalify UI

Know React? Check out Solid!

React

Usage

import { Tabs } from '@zalify-ui/react'

<Tabs.Root>
  <Tabs.List>
    <Tabs.Trigger />
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Content />
</Tabs.Root>

Examples

Use the size prop to change the size of the tabs.

React

Variants

Use the variant prop to change the appearance of the tabs.

React

Orientation

Use the orientation prop to change the orientation of the tabs.

React

Lazy Loading

Optimize performance by using the lazyMount and unmountOnExit props to conditionally render tab content.

Tab 1: Content 0

React

Fitted

Use the fitted prop to make the tabs fit the width of the container.

React

Props

Root

Prop	Default	Type
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg'`
`variant`	`'line'`	`'line' \| 'subtle' \| 'enclosed'`
`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
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`loopFocus`	`true`	`boolean` Whether the keyboard navigation will loop from last tab to first, and vice versa.
`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.
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.
`fitted`		`boolean`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`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`		`Partial<{ root: string trigger: (value: string) => string list: string content: (value: string) => string indicator: string }>` The ids of the elements in the tabs. Useful for composition.
`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
`translations`		`IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`value`		`string` The controlled selected tab value

TabContent

Prop	Default	Type
`value`*		`string` The value of the tab
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.

TabTrigger

Prop	Default	Type
`value`*		`string` The value of the tab
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`		`boolean` Whether the tab is disabled