# Tabs (/docs/products/dash-dots/reference/components/tabs)

Put a `Tab` inside it for each tab. Tabs only choose: show each tab's content yourself, with an `<If>`.

**Children:** Components

## Example

![The Tabs component](/assets/images/dash-dots/components/tabs.webp)

```xml title="view.dml"
<Tabs value="{{ tab }}" variant="segmented" onChange="setTab">
  <Tab value="all" label="All" />
  <Tab value="sent" label="Sent" />
  <Tab value="received" label="Received" badge="3" />
</Tabs>
```

```ts title="controller.ts"
export default definePage({
  initialState: { tab: 'all' },
  mutations: {
    setTab: (_state, event: ValueEvent) => ({ tab: event.detail.value }),
  },
});
```

## Props

| Prop                                                                   | Type                                                             | What it is                                                                                                                                                                                               |
| ---------------------------------------------------------------------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value`                                                                | `string`                                                         | The chosen tab's `value`.                                                                                                                                                                                |
| `variant`                                                              | `underline`, `segmented`, `bar`                                  | `underline` marks the chosen tab with a line. `segmented` fills it in, in a rounded track. `bar` shares the width equally, with each icon over its label, for a page's navigation. Default: `underline`. |
| `padding`, `paddingTop`, `paddingStart`, `paddingEnd`, `paddingBottom` | [spacing](/docs/products/dash-dots/reference/components#spacing) | Space inside its edges, all round or on one side.                                                                                                                                                        |

## Events

| Event      | Sends                   | Notes                   |
| ---------- | ----------------------- | ----------------------- |
| `onChange` | `{ value }` in `detail` | The chosen tab's value. |