Tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Name@spark-ui/tabs
Version2.2.0
LicenseMIT
Tabs#
Contains all the tabs component parts.
| Attribute | Type | Description | Default |
| asChild | boolean | Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node. | false |
| defaultValue | string | The value of the tab to select by default, if uncontrolled | null |
| dir | "ltr" | "rtl" | The direction of navigation between toolbar items. | null |
| value | string | The value for the selected tab, if controlled | null |
| onValueChange | (value: string) => void | A function called when a new tab is selected | null |
| orientation | "horizontal" | "vertical" | The orientation the tabs are layed out. Mainly so arrow navigation is done accordingly (left & right vs. up & down) @defaultValue horizontal | null |
| intent | "main" | "support" | "basic" | Change the color scheme of the tabs | basic |
| size | "xs" | "sm" | "md" | Change the size of the tabs | md |
Tabs.List#
Contains the triggers that are aligned along the edge of the active content.
| Attribute | Type | Description | Default |
| asChild | boolean | Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node. | {"value":false} |
| loop | boolean | When true, keyboard navigation will loop from last tab to first, and vice versa. | {"value":false} |
Tabs.Trigger#
The button that activates its associated content.
| Attribute | Type | Description | Default |
| value* | string | A unique value that associates the trigger with a content. | null |
| asChild | boolean | Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node. | {"value":false} |
| disabled | boolean | When true, prevents the user from interacting with the tab. | {"value":false} |
Tabs.Content#
Contains the content associated with each trigger.
| Attribute | Type | Description | Default |
| value* | string | A unique value that associates the content with a trigger. | null |
| asChild | boolean | Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node. | {"value":false} |
| forceMount | true | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. | null |