Tabs

The <Tabs> component allows you to organize and navigate between groups of content that are related and at the same level of hierarchy .

The <Tabs.List> component is used within Tabs to group tabs that a user can switch between. The ids of the items within the must match up with a corresponding item inside the .

The <Tabs.Item> component provides a title for an individual item within a TabList.

Import


import { Tabs } from '@marigold/components';

Appearance

Property	Type	Description
`variant`		The available variants of this component.
`size`	`small \| medium \| large`	The available sizes of this component.

Props

Tabs

Property	Type	Default	Description
`isDisabled`	`boolean`	`false`	Set All TabPanel disabled
`defaultSelectedKey`	`string`	`1`	Set the default selected tab
`selectedKey`	`string`	`defaultSelectedKey`	Choose the selected tab
`disabledKeys`	`Array of keys`	`none`	Disable particular tabs
`gap`	`number`	`1`	Preset the space between the tabs
`keyboardActivation`	`automatic \| manual`	`automatic`	Whether tabs are activated automatically on focus or manually.
`onSelectionChange`	`(key: Key) => any`	`-`	Callback executed when a new tab is selected.

Tabs.List

Property	Type	Default	Description
`children`	`ReactNode`	`none`	The children of the component.
`items`	`Iterable<object>`	`none`	Item objects in the collection.
`space (required)`	`number`	`none`	The space between tab items.

Tabs.Item

Property	Type	Default	Description
`id`	`Key`	`none`	The unique id of the tab.

Tabs.TabPanel

Property	Type	Default	Description
`id`	`Key`	`none`	The unique id of the panel, referencing a tab.
`children`	`ReactNode`	`none`	The children of the component.

Examples

Disabled Tab

A Tab can be disabled by setting the isabledKeys prop.

Preview

Code

profile

notifications

private

Tabs with default selected key

You can choose the selected key by setting the defaultSelectedKEy prop.

Preview

Code

Home

Settings

Messages

You're currently in the Settings tab. Here, you can customize your account preferences, manage privacy settings, and update your notification preferences. Personalize your experience and make the platform work exactly how you want it to.

Large Tabs Controllers

You can change the size of tab controller by setting the size prop.

Preview

Code

Mouse Settings

Keyboard Settings

Gamepad Settings