tabs

import { tabs } from '@markless/ui';

export default function Accountfunction Account(): Element() @{@{ · Component bodyOpens the body of a component, where ordinary statements and the markup they produce sit together.
	<tabs.root(alias) function root({ value, orientation, loop, selectOnFocus, onChange, children, ...rest }: tabs.TabsRootProps): Element value(property) value?: string | undefinedThe value of the tab that is showing. Omit it and no tab shows: a tab is named by its `value`, and nothing counts positions for you.="overview">
		<tabs.list(alias) function list({ children, ...rest }: tabs.TabsListProps): Element>
			<tabs.trigger(alias) function trigger({ value, children, onClick, onFocus, onKeydown, ...rest }: tabs.TabsTriggerProps): Element value(property) value: stringNames the tab. The content part with the same value is the panel it shows. Required.="overview">Overview</tabs.trigger(alias) function trigger({ value, children, onClick, onFocus, onKeydown, ...rest }: tabs.TabsTriggerProps): Element>
			<tabs.trigger(alias) function trigger({ value, children, onClick, onFocus, onKeydown, ...rest }: tabs.TabsTriggerProps): Element value(property) value: stringNames the tab. The content part with the same value is the panel it shows. Required.="billing">Billing</tabs.trigger(alias) function trigger({ value, children, onClick, onFocus, onKeydown, ...rest }: tabs.TabsTriggerProps): Element>
		</tabs.list(alias) function list({ children, ...rest }: tabs.TabsListProps): Element>
		<tabs.content(alias) function content({ value, children, ...rest }: tabs.TabsContentProps): Element value(property) value: stringNames the panel. The trigger part with the same value shows it. Required.="overview">Everything that happened this month.</tabs.content(alias) function content({ value, children, ...rest }: tabs.TabsContentProps): Element>
		<tabs.content(alias) function content({ value, children, ...rest }: tabs.TabsContentProps): Element value(property) value: stringNames the panel. The trigger part with the same value shows it. Required.="billing">Your next invoice is due on the 1st.</tabs.content(alias) function content({ value, children, ...rest }: tabs.TabsContentProps): Element>
	</tabs.root(alias) function root({ value, orientation, loop, selectOnFocus, onChange, children, ...rest }: tabs.TabsRootProps): Element>
}

A trigger and the panel with the same value are a pair. Every panel stays in the page — hidden decides which one shows — so focus, scroll position and anything typed inside a panel survive a tab change. A tab carries role="tab", which makes every child of it presentational: put label text in there and nothing else, because a close button or a link inside a tab is stripped of its own semantics.

Anatomy

• tabs.root — holds which tab is showing.
• tabs.list — the row of tabs, and the element the arrow keys walk inside.
• tabs.trigger — one tab, named by its required value. Label content only.
• tabs.content — one panel, named by its required value.

It writes ui-selected and ui-vertical.

Props on tabs.root

Prop	Type	What it does
value	string	The tab that is showing. Omit it and no tab shows.
orientation	'horizontal' | 'vertical'	Which axis the arrow keys walk. Omit it and the tabs run left to right.
loop	boolean	Arrow past the last tab and land on the first. Omit it and the ends stop.
selectOnFocus	boolean	Arrowing to a tab shows it. Turn it off and arrowing only moves focus; Enter or Space shows it.
onChange	(value) => void	Called with the new value when a person changes tab.

Everything a <div> accepts reaches the element too.