Tabs

Interactive tabbed interface components

Basic

Basic Tabs

Preview Code Auto

Div(
    Button("Tab 1", role="tab", cls="tab"),
    Button("Tab 2", role="tab", cls="tab tab-active"),
    Button("Tab 3", role="tab", cls="tab"),
    role="tablist",
    cls="tabs"
)

Bordered Tabs

Preview Code Auto

Div(
    Button('Tab 1', role='tab', cls='tab'),
    Button('Tab 2', role='tab', cls='tab tab-active'),
    Button('Tab 3', role='tab', cls='tab'),
    role='tablist',
    cls='tabs tabs-border'
)

Lifted Tabs

Preview Code Auto

Tab 1 Tab 2 Tab 3

Div(
    A('Tab 1', role='tab', cls='tab'),
    A('Tab 2', role='tab', cls='tab tab-active'),
    A('Tab 3', role='tab', cls='tab'),
    role='tablist',
    cls='tabs tabs-lift'
)

Boxed Tabs

Preview Code Auto

Tab 1 Tab 2 Tab 3

Div(
    A('Tab 1', role='tab', cls='tab'),
    A('Tab 2', role='tab', cls='tab tab-active'),
    A('Tab 3', role='tab', cls='tab'),
    role='tablist',
    cls='tabs tabs-box'
)

Radio

For radio inputs, the name of each tab group must be unique

Boxed with Radio Inputs

Preview Code Auto

Div(
    Input(type='radio', name='my_tabs_radio_1', aria_label='Tab 1', cls='tab'),
    Input(type='radio', name='my_tabs_radio_1', aria_label='Tab 2', cls='tab', checked='checked'),
    Input(type='radio', name='my_tabs_radio_1', aria_label='Tab 3', cls='tab'),
    cls="tabs tabs-box"
)

Radio Border with Content

Preview Code Auto

Tab content 1

Tab content 2

Tab content 3

Div(
    Input(type='radio', name='my_tabs_radio_2', aria_label='Tab 1', cls='tab'),
    Div('Tab content 1', cls='tab-content border-base-200 bg-base-100 p-10'),
    Input(type='radio', name='my_tabs_radio_2', aria_label='Tab 2', cls='tab', checked='checked'),
    Div('Tab content 2', cls='tab-content border-base-200 bg-base-100 p-10'),
    Input(type='radio', name='my_tabs_radio_2', aria_label='Tab 3', cls='tab'),
    Div('Tab content 3', cls='tab-content border-base-200 bg-base-100 p-10'),
    cls="tabs tabs-border"
)

Radio Lift with Content

Preview Code Auto

Tab content 1

Tab content 2

Tab content 3

Div(
    Input(type='radio', name='my_tabs_radio_3', aria_label='Tab 1', cls='tab'),
    Div('Tab content 1', cls='tab-content border-base-200 bg-base-100 p-6'),
    Input(type='radio', name='my_tabs_radio_3', aria_label='Tab 2', cls='tab', checked='checked'),
    Div('Tab content 2', cls='tab-content border-base-200 bg-base-100 p-6'),
    Input(type='radio', name='my_tabs_radio_3', aria_label='Tab 3', cls='tab'),
    Div('Tab content 3', cls='tab-content border-base-200 bg-base-100 p-6'),
    cls="tabs tabs-lift"
)

Radio Bottom Lift with Content

Preview Code Auto

Tab content 1

Tab content 2

Tab content 3

Div(
    Input(type='radio', name='my_tabs_radio_4', aria_label='Tab 1', cls='tab'),
    Div('Tab content 1', cls='tab-content border-base-200 bg-base-100 p-6'),
    Input(type='radio', name='my_tabs_radio_4', aria_label='Tab 2', cls='tab', checked='checked'),
    Div('Tab content 2', cls='tab-content border-base-200 bg-base-100 p-6'),
    Input(type='radio', name='my_tabs_radio_4', aria_label='Tab 3', cls='tab'),
    Div('Tab content 3', cls='tab-content border-base-200 bg-base-100 p-6'),
    cls="tabs tabs-lift tabs-bottom"
)

Radio Box with Content

Preview Code Auto

Tab content 1

Tab content 2

Tab content 3

Div(
    Input(type='radio', name='my_tabs_radio_5', aria_label='Tab 1', cls='tab'),
    Div('Tab content 1', cls='tab-content border-base-200 bg-base-100 p-6'),
    Input(type='radio', name='my_tabs_radio_5', aria_label='Tab 2', cls='tab', checked='checked'),
    Div('Tab content 2', cls='tab-content border-base-200 bg-base-100 p-6'),
    Input(type='radio', name='my_tabs_radio_5', aria_label='Tab 3', cls='tab'),
    Div('Tab content 3', cls='tab-content border-base-200 bg-base-100 p-6'),
    cls="tabs tabs-box"
)

Customize

Sizing Options

Preview Code Auto

Tiny Tiny Tiny

Small Small Small

Normal Normal Normal

Large Large Large

Div(
    A('Tiny', role='tab', cls='tab'),
    A('Tiny', role='tab', cls='tab tab-active'),
    A('Tiny', role='tab', cls='tab'),
    role='tablist',
    cls='tabs tabs-lift tabs-xs'
),
Div(
    A('Small', role='tab', cls='tab'),
    A('Small', role='tab', cls='tab tab-active'),
    A('Small', role='tab', cls='tab'),
    role='tablist',
    cls='tabs tabs-lift tabs-sm'
),
Div(
    A('Normal', role='tab', cls='tab'),
    A('Normal', role='tab', cls='tab tab-active'),
    A('Normal', role='tab', cls='tab'),
    role='tablist',
    cls='tabs tabs-lift'
),
Div(
    A('Large', role='tab', cls='tab'),
    A('Large', role='tab', cls='tab tab-active'),
    A('Large', role='tab', cls='tab'),
    role='tablist',
    cls='tabs tabs-lift tabs-lg'
)

Custom colors

Preview Code Auto

Tab 1 Tab 2 Tab 3

Div(
    A('Tab 1', role='tab', cls='tab'),
    A('Tab 2', role='tab', cls='tab tab-active text-primary [--tab-bg:orange] [--tab-border-color:red]'),
    A('Tab 3', role='tab', cls='tab'),
    role='tablist',
    cls='tabs tabs-lift'
)

Class Reference

Class	Type	Description
tabs	Component	Container of multiple tab items
tab	Part	A single tab button (can be button, link, div, radio input, etc)
tab-content	Part	Tab content that comes immediately after a tab
tabs-box	Style	Box style
tabs-border	Style	Bottom border style
tabs-lift	Style	Lifted style
tab-active	Active state indicator
tab-disabled	Disabled state indicator
tabs-top	Placement	Puts tab buttons on top of the tab-content (default)
tabs-bottom	Placement	Puts tabs on under the tab-content
tabs-xs\|sm\|md\|lg\|xl	Size modifiers

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo