<a id="tabs"></a>

## Tabs  
**Category**: Navigation
Interactive tabbed interface components
### Examples

#### Basic Tabs  
```python
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"
)
```

#### Boxed with Radio Inputs  
```python
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"
)
```

#### Sizing Options  
```python
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'
)
```

#### Bordered Tabs  
```python
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'
)
```

#### Custom colors  
```python
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'
)
```

#### Radio Border with Content  
```python
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"
)
```

#### Lifted Tabs  
```python
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'
)
```

#### Radio Lift with Content  
```python
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"
)
```

#### Boxed Tabs  
```python
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 Bottom Lift with Content  
```python
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  
```python
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"
)
```