Tabs

Tabs are used to switch between panels on a page. This helps users navigate between related content without changing context. The component consists of a row of tab buttons. A tab button is always selected, because a panel is always displayed.

Read more about this component in the Aksel documentation.

Note: This component does not yet follow all best practices regarding accessibility.

Inbox content

Properties

Tabs

Property	Description	Default	Control
Properties
value required bindable	Controlled selected value. `string`	-
iconPosition	Icon position in Tab. `"left"` `"top"`	`"left"`
loop	Loops back to start when navigating past last item. `boolean`	`false`
selectionFollowsFocus	Automatically activates tab on focus/navigation. `boolean`	`false`
size	Changes padding and font-size. `"small"` `"medium"`	`"medium"`
Snippets
children	`TabList` and `TabPanel` components.		-

Properties included from: HTMLAttributes<HTMLDivElement>

TabList

Property	Description	Default	Control
Snippets
children	Tab list items.		-

Properties included from: HTMLAttributes<HTMLDivElement>

Tab

Tab is an individual tab in a Tabs component. It should be used inside a TabList component.

Property	Description	Default	Control
Properties
value required	Value of the tab. `string`	-
as	Element to render as. `"button"` `"a"`	`"button"`
href	URL to navigate to if `as` is set to "a". `string`	-
Snippets
children	Label of the tab.		-
icon	Icon to display in the tab.		-

Properties included from: HTMLAttributes<HTMLElement>

TabPanel

Property	Description	Default	Control
Properties
value required	Value of the tab. `string`	-
Snippets
children	Content of the tab panel.		-

Properties included from: HTMLAttributes<HTMLDivElement>