Salad UI

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>
  <.tabs_trigger value="enabled1">Enabled Tab</.tabs_trigger>
  <.tabs_trigger value="disabled1" disabled>Disabled Tab</.tabs_trigger>
  <.tabs_trigger value="enabled2">Another Enabled Tab</.tabs_trigger>
</.tabs_list>
<.tabs_content value="enabled1">
  <div class="p-4 bg-muted mt-2 rounded-md">
    This tab is enabled and accessible.
  </div>
</.tabs_content>
<.tabs_content value="disabled1">
  <div class="p-4 bg-muted mt-2 rounded-md">
    This content belongs to a disabled tab and shouldn't be visible.
  </div>
</.tabs_content>
<.tabs_content value="enabled2">
  <div class="p-4 bg-muted mt-2 rounded-md">
    This is another enabled tab's content.
  </div>
</.tabs_content>