---
title: Tabs
url: "https://native-sdk.dev/docs/components/tabs"
docs_index: /llms.txt
lastUpdated: 2026-10-16
---

> For an index of all documentation, see [/llms.txt](/llms.txt).

Use `tabs` for a strip of choices with conditional content below it. Bind each child button’s `selected` state to the model and handle `on-press` to change the active tab. Render each panel through an `if`.

Markup lowers buttons inside `tabs` to segmented-control widgets. In Zig, use `segmented_control` children directly. Standalone segments are available through [segmented-control](/docs/components/segmented-control).

## Markup

```html
<column gap="16">
  <row>
    <tabs>
      <button selected="{tab == 'account'}" on-press="show_account">Account</button>
      <button selected="{tab == 'password'}" on-press="show_password">Password</button>
      <button selected="{tab == 'team'}" on-press="show_team">Team</button>
    </tabs>
    <spacer grow="1" />
  </row>
  <if test="{tab == 'account'}">
    <text foreground="text_muted">Manage your account details.</text>
  </if>
  <if test="{tab == 'password'}">
    <text foreground="text_muted">Change your password.</text>
  </if>
  <if test="{tab == 'team'}">
    <text foreground="text_muted">Manage your team.</text>
  </if>
</column>
```

## Programmatic construction (Zig)

In a Zig view, the `canvas.Ui` builder constructs the same tree programmatically. In the builder the strip's children are `segmented_control` elements, the same widget kind available as a standalone markup leaf.

```zig
ui.el(.tabs, .{}, .{
    ui.el(.segmented_control, .{ .text = "Account", .selected = model.tab == .account, .on_press = .show_account }, .{}),
    ui.el(.segmented_control, .{ .text = "Password", .selected = model.tab == .password, .on_press = .show_password }, .{}),
    ui.el(.segmented_control, .{ .text = "Team", .selected = model.tab == .team, .on_press = .show_team }, .{}),
})
```

## Attributes

| Attribute  | Description                                                                                                                                                                                                  |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `selected` | Selected state; often a \{a == b} equality.                                                                                                                                                                  |
| `on-press` | Dispatch a Msg on press: tag or tag:\{payload}. Legal on any element — a bound press handler makes it pressable, and presses on plain text/icons inside it fall through to it (dragging still selects text). |

---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)