Tabs
Switch between related routes or views with explicit state.
Preview
Example
<.tabs id="settings"><:tab label="Profile" patch={~p"/settings/profile"} active /></.tabs>API contract
tabs/1 uses declared Phoenix attributes and slots. This table is generated from the compiled component metadata.
| Attribute | Type | Required | Default | Accepted values |
|---|---|---|---|---|
id |
:string |
Yes | — |
Any value matching the declared type |
label |
:string |
No | "Sections" |
Any value matching the declared type |
variant |
:atom |
No | :border |
[:box, :border, :lift] |
size |
:atom |
No | :md |
[:xs, :sm, :md, :lg, :xl] |
class |
:any |
No | nil |
Any value matching the declared type |
| Slot | Required | Slot attributes |
|---|---|---|
tab |
Yes | label: :string required, active: :boolean, disabled: :boolean, href: :string, navigate: :string, patch: :string |
States and behavior
Active and disabled tabs expose selected and disabled state through ARIA and visible styling.
Keyboard and accessibility
Each enabled tab is a real link and follows normal link keyboard behavior. Use stable URLs for every tab destination.