Tabs

A client-driven, accessible tabs component with keyboard roving-focus support.

Make changes to your account here. Click save when you're done.

<.tabs></.tabs>

Examples

Basic

Two tabs with content panels wired by value.

Make changes to your account here. Click save when you're done.

<.tabs id="example-tabs" default="account">
  <.tabs_list id="example-tabs">
    <.tabs_trigger id="example-tabs" value="account" default="account">Account</.tabs_trigger>
    <.tabs_trigger id="example-tabs" value="password" default="account">Password</.tabs_trigger>
  </.tabs_list>
  <.tabs_content id="example-tabs" value="account" default="account">
    <p class="text-sm text-muted-foreground">
      Make changes to your account here. Click save when you're done.
    </p>
  </.tabs_content>
  <.tabs_content id="example-tabs" value="password" default="account">
    <p class="text-sm text-muted-foreground">
      Change your password here. After saving, you'll be logged out.
    </p>
  </.tabs_content>
</.tabs>

Show code

Props

Name	Type	Default	Values
class	:string
default	:string
id	:string
rest	:global
inner_block (slot)	:slot