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
defaultValue	If not controlled, a default-value needs to be set. `string`	-
fill	Stretches each tab to fill available space in container. `boolean`	`false`
iconPosition	Icon position in Tab. `"left"` `"top"`	`"left"`
loop	Loops back to start when navigating past last item. `boolean`	`true`
selectionFollowsFocus	Automatically activates tab on focus/navigation. `boolean`	`false`
size	Changes padding and font-size. `"small"` `"medium"`	`"medium"`
value bindable	Controlled selected value. `string`	`defaultValue ?? ""`
Snippets
children	`TabList` and `TabPanel` components.		-
Events
onChange	onChange callback for selected Tab.		-

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`	-
label	Label of the tab. `string`	-
Snippets
children	Label of the tab as a snippet.		-
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`	-
lazy	If true, will only render children when selected. `boolean`	`true`
Snippets
children	Content of the tab panel.		-

Properties included from: HTMLAttributes<HTMLDivElement>