Tab

Primary tabs component that serves as a container for tab triggers and content.

Attribute Type Documentation Default Value
Required id * :string

Unique identifier for the tabs component

default :string

Default selected tab value

class :string
on-tab-changed :any

Handler for tab change events

rest :global
Required inner_block * :slot
<.tabs_list class="grid w-full grid-cols-2">
  <.tabs_trigger value="account">Account</.tabs_trigger>
  <.tabs_trigger value="password">Password</.tabs_trigger>
</.tabs_list>
<.tabs_content value="account">
  <.card>
    <.card_header>
      <.card_title>Account</.card_title>
      <.card_description>
        Make changes to your account here. Click save when you're done.
      </.card_description>
    </.card_header>
    <.card_content class="space-y-2">
      <div class="space-y-1">
        <.label html-for="name">Name</.label>
        <.input id="name" default-value="Pedro Duarte" />
      </div>
      <div class="space-y-1">
        <.label html-for="username">Username</.label>
        <.input id="username" default-value="@peduarte" />
      </div>
    </.card_content>
    <.card_footer>
      <.button>Save changes</.button>
    </.card_footer>
  </.card>
</.tabs_content>
<.tabs_content value="password">
  <.card>
    <.card_header>
      <.card_title>Password</.card_title>
      <.card_description>
        Change your password here. After saving, you'll be logged out.
      </.card_description>
    </.card_header>
    <.card_content class="space-y-2">
      <div class="space-y-1">
        <.label html-for="current">Current password</.label>
        <.input id="current" type="password" />
      </div>
      <div class="space-y-1">
        <.label html-for="new">New password</.label>
        <.input id="new" type="password" />
      </div>
    </.card_content>
    <.card_footer>
      <.button>Save password</.button>
    </.card_footer>
  </.card>
</.tabs_content>