Documentation Playground
Skip to content
Docs

Tabs

Set of content sections to be displayed one at a time.
Make changes to your account. 
<.tabs id="docs-tabs-hero" default_value="account">
  <:list :let={ctx}>
    <.tabs_list size="2" tabs_id={ctx.tabs_id} default_value={ctx.default_value}>
      <:trigger value="account">Account</:trigger>
      <:trigger value="documents">Documents</:trigger>
      <:trigger value="settings">Settings</:trigger>
    </.tabs_list>
  </:list>
  <:content value="account">
    <.box pt="3">
      <.text size="2">Make changes to your account.</.text>
    </.box>
  </:content>
  <:content value="documents">
    <.box pt="3">
      <.text size="2">Access and update your documents.</.text>
    </.box>
  </:content>
  <:content value="settings">
    <.box pt="3">
      <.text size="2">Edit your profile or update contact information.</.text>
    </.box>
  </:content>
</.tabs>

API Reference

This component inherits props from the Tabs primitive and supports common margin props. Tabs should not be used for page navigation — use Tab Nav instead.

Use :list and :content slots on tabs/1 rather than separate trigger/content functions. Pass tabs_id and default_value from the list slot context into tabs_list/1.

Root

Contains all component parts.

Prop Type Default Description
class string nil Additional CSS classes to add to the root element.
color string — Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
default_value string — Initial active tab value.
high_contrast boolean — Whether to increase color contrast with the background.
id string nil Unique identifier for the tabs root.
m any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mb any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
ml any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mr any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mt any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mx any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
my any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
class Additional CSS classes to add to the root element.
Type string Default nil
color Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
Type string Default —
default_value Initial active tab value.
Type string Default —
high_contrast Whether to increase color contrast with the background.
Type boolean Default —
id Unique identifier for the tabs root.
Type string Default nil
m Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mb Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
ml Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mr Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mt Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mx Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
my Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —

List

Contains the triggers that sit alongside the active content. Render inside the :list slot.

Prop Type Default Description
class string nil Additional CSS classes
default_value string nil
high_contrast boolean — Whether to increase color contrast with the background.
size string "2" Tab size from 1 to 2. Controls overall dimensions.
tabs_id string nil
class Additional CSS classes
Type string Default nil
default_value
Type string Default nil
high_contrast Whether to increase color contrast with the background.
Type boolean Default —
size Tab size from 1 to 2. Controls overall dimensions.
Type string Default "2"
tabs_id
Type string Default nil

Trigger

Declared as a :trigger slot on tabs_list/1. The button that activates its associated content panel.

Content

Declared as a :content slot on tabs/1. Contains the content associated with each trigger.

Examples

Size

Use the size prop on tabs_list to control the size of the tab list.

Make changes to your account.
Make changes to your account. 
<.flex direction="column" gap="4">
  <.tabs id="docs-tabs-size-1" default_value="account">
    <:list :let={ctx}>
      <.tabs_list size="1" tabs_id={ctx.tabs_id} default_value={ctx.default_value}>
        <:trigger value="account">Account</:trigger>
        <:trigger value="documents">Documents</:trigger>
        <:trigger value="settings">Settings</:trigger>
      </.tabs_list>
    </:list>
    <:content value="account">
      <.box pt="2">
        <.text size="1">Make changes to your account.</.text>
      </.box>
    </:content>
    <:content value="documents">
      <.box pt="2">
        <.text size="1">Access and update your documents.</.text>
      </.box>
    </:content>
    <:content value="settings">
      <.box pt="2">
        <.text size="1">Edit your profile or update contact information.</.text>
      </.box>
    </:content>
  </.tabs>
  <.tabs id="docs-tabs-size-2" default_value="account">
    <:list :let={ctx}>
      <.tabs_list size="2" tabs_id={ctx.tabs_id} default_value={ctx.default_value}>
        <:trigger value="account">Account</:trigger>
        <:trigger value="documents">Documents</:trigger>
        <:trigger value="settings">Settings</:trigger>
      </.tabs_list>
    </:list>
    <:content value="account">
      <.box pt="3">
        <.text size="2">Make changes to your account.</.text>
      </.box>
    </:content>
    <:content value="documents">
      <.box pt="3">
        <.text size="2">Access and update your documents.</.text>
      </.box>
    </:content>
    <:content value="settings">
      <.box pt="3">
        <.text size="2">Edit your profile or update contact information.</.text>
      </.box>
    </:content>
  </.tabs>
</.flex>

Color

Use the color prop on tabs to assign a specific accent color to the tab list.

Make changes to your account.
Make changes to your account.
Make changes to your account.
Make changes to your account. 
<.flex direction="column" gap="4">
  <.tabs id="docs-tabs-color-indigo" default_value="account" color="indigo">
    <:list :let={ctx}>
      <.tabs_list tabs_id={ctx.tabs_id} default_value={ctx.default_value}>
        <:trigger value="account">Account</:trigger>
        <:trigger value="documents">Documents</:trigger>
        <:trigger value="settings">Settings</:trigger>
      </.tabs_list>
    </:list>
    <:content value="account">
      <.box pt="3">
        <.text size="2">Make changes to your account.</.text>
      </.box>
    </:content>
    <:content value="documents">
      <.box pt="3">
        <.text size="2">Access and update your documents.</.text>
      </.box>
    </:content>
    <:content value="settings">
      <.box pt="3">
        <.text size="2">Edit your profile or update contact information.</.text>
      </.box>
    </:content>
  </.tabs>
  <.tabs id="docs-tabs-color-cyan" default_value="account" color="cyan">
    <:list :let={ctx}>
      <.tabs_list tabs_id={ctx.tabs_id} default_value={ctx.default_value}>
        <:trigger value="account">Account</:trigger>
        <:trigger value="documents">Documents</:trigger>
        <:trigger value="settings">Settings</:trigger>
      </.tabs_list>
    </:list>
    <:content value="account">
      <.box pt="3">
        <.text size="2">Make changes to your account.</.text>
      </.box>
    </:content>
    <:content value="documents">
      <.box pt="3">
        <.text size="2">Access and update your documents.</.text>
      </.box>
    </:content>
    <:content value="settings">
      <.box pt="3">
        <.text size="2">Edit your profile or update contact information.</.text>
      </.box>
    </:content>
  </.tabs>
  <.tabs id="docs-tabs-color-orange" default_value="account" color="orange">
    <:list :let={ctx}>
      <.tabs_list tabs_id={ctx.tabs_id} default_value={ctx.default_value}>
        <:trigger value="account">Account</:trigger>
        <:trigger value="documents">Documents</:trigger>
        <:trigger value="settings">Settings</:trigger>
      </.tabs_list>
    </:list>
    <:content value="account">
      <.box pt="3">
        <.text size="2">Make changes to your account.</.text>
      </.box>
    </:content>
    <:content value="documents">
      <.box pt="3">
        <.text size="2">Access and update your documents.</.text>
      </.box>
    </:content>
    <:content value="settings">
      <.box pt="3">
        <.text size="2">Edit your profile or update contact information.</.text>
      </.box>
    </:content>
  </.tabs>
  <.tabs id="docs-tabs-color-crimson" default_value="account" color="crimson">
    <:list :let={ctx}>
      <.tabs_list tabs_id={ctx.tabs_id} default_value={ctx.default_value}>
        <:trigger value="account">Account</:trigger>
        <:trigger value="documents">Documents</:trigger>
        <:trigger value="settings">Settings</:trigger>
      </.tabs_list>
    </:list>
    <:content value="account">
      <.box pt="3">
        <.text size="2">Make changes to your account.</.text>
      </.box>
    </:content>
    <:content value="documents">
      <.box pt="3">
        <.text size="2">Access and update your documents.</.text>
      </.box>
    </:content>
    <:content value="settings">
      <.box pt="3">
        <.text size="2">Edit your profile or update contact information.</.text>
      </.box>
    </:content>
  </.tabs>
</.flex>

High-contrast

Use the high_contrast prop on tabs and tabs_list to increase color contrast with the background.

Make changes to your account.
Make changes to your account. 
<.flex direction="column" gap="4">
  <.tabs id="docs-tabs-hc-off" default_value="account" color="gray">
    <:list :let={ctx}>
      <.tabs_list tabs_id={ctx.tabs_id} default_value={ctx.default_value}>
        <:trigger value="account">Account</:trigger>
        <:trigger value="documents">Documents</:trigger>
        <:trigger value="settings">Settings</:trigger>
      </.tabs_list>
    </:list>
    <:content value="account">
      <.box pt="3">
        <.text size="2">Make changes to your account.</.text>
      </.box>
    </:content>
    <:content value="documents">
      <.box pt="3">
        <.text size="2">Access and update your documents.</.text>
      </.box>
    </:content>
    <:content value="settings">
      <.box pt="3">
        <.text size="2">Edit your profile or update contact information.</.text>
      </.box>
    </:content>
  </.tabs>
  <.tabs id="docs-tabs-hc-on" default_value="account" color="gray" high_contrast>
    <:list :let={ctx}>
      <.tabs_list
        tabs_id={ctx.tabs_id}
        default_value={ctx.default_value}
        high_contrast={ctx.high_contrast}
      >
        <:trigger value="account">Account</:trigger>
        <:trigger value="documents">Documents</:trigger>
        <:trigger value="settings">Settings</:trigger>
      </.tabs_list>
    </:list>
    <:content value="account">
      <.box pt="3">
        <.text size="2">Make changes to your account.</.text>
      </.box>
    </:content>
    <:content value="documents">
      <.box pt="3">
        <.text size="2">Access and update your documents.</.text>
      </.box>
    </:content>
    <:content value="settings">
      <.box pt="3">
        <.text size="2">Edit your profile or update contact information.</.text>
      </.box>
    </:content>
  </.tabs>
</.flex>
← Table Text Area →