Tabs

Switch between related panels.

Usage

Import the namespace and compose Tabs.Root, Tabs.List, Tabs.Trigger, and Tabs.Content. Use bind:value to track the active tab.

Manage your account details.

Props

Props for Tabs.Root. Tabs.Trigger and Tabs.Content require a matching value string. All parts accept class for custom overrides.

PropTypeDefault
value The active tab value. Use bind:value for two-way binding.string
onValueChange Called when the active tab changes.(value: string) => void
orientation 'horizontal' | 'vertical''horizontal'
activationMode 'automatic' | 'manual''automatic'
loop Keyboard focus loops from last trigger back to first.booleantrue
class Extra classes merged onto the root.string
children Compose Tabs.List and Tabs.Content inside.Snippet