# Segmented control

> A segmented control is a row of two or more mutually exclusive options styled as one bar, an alternative to radios or tabs.

A set of mutually exclusive options displayed as connected buttons.

Source: https://docs.tabler.io/ui/components/segmented-control

---

A segmented control is a `nav` element with the `nav-segmented` class, holding `button` or `a` elements with the `nav-link` class.

```html
<nav class="nav nav-segmented" role="tablist">
  <button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">First</button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">Second</button>
  <button class="nav-link" disabled role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">Disabled</button>
</nav>
```

## Full width

Add `w-100` to the `nav` to stretch the control to the width of its container.

```html
<nav class="nav nav-segmented w-100" role="tablist">...</nav>
```

```html
<nav class="nav nav-segmented w-100" role="tablist">
  <button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">Daily</button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">Weekly</button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">Monthly</button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">Quarterly</button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">Yearly</button>
</nav>
```

## With emojis

A segment can hold an emoji.

```html
<nav class="nav nav-segmented" role="tablist">
  <button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">👦</button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">👦🏿</button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">👦🏾</button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">👦🏽</button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">👦🏼</button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">👦🏻</button>
</nav>
```

## With icons

A segment can hold an [icon](/ui/components/icon).

```html
<nav class="nav nav-segmented" role="tablist">
  <button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
    <!-- Download SVG icon from http://tabler.io/icons/icon/list -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M9 6l11 0" />
      <path d="M9 12l11 0" />
      <path d="M9 18l11 0" />
      <path d="M5 6l0 .01" />
      <path d="M5 12l0 .01" />
      <path d="M5 18l0 .01" />
    </svg> List
  </button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
    <!-- Download SVG icon from http://tabler.io/icons/icon/layout -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M4 6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -1" />
      <path d="M4 15a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -3" />
      <path d="M14 6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -12" />
    </svg> Kanban
  </button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
    <!-- Download SVG icon from http://tabler.io/icons/icon/calendar -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12" />
      <path d="M16 3v4" />
      <path d="M8 3v4" />
      <path d="M4 11h16" />
      <path d="M11 15h1" />
      <path d="M12 15v3" />
    </svg> Calendar
  </button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
    <!-- Download SVG icon from http://tabler.io/icons/icon/files -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M15 3v4a1 1 0 0 0 1 1h4" />
      <path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2" />
      <path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
    </svg> Files
  </button>
</nav>
```

## Vertical direction

To create a vertical segmented control, add the `nav-segmented-vertical` class to the `nav` element.

```html
<nav class="nav nav-segmented-vertical" role="tablist">...</nav>
```

```html
<nav class="nav nav-segmented nav-segmented-vertical" role="tablist">
  <button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
    <!-- Download SVG icon from http://tabler.io/icons/icon/list -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M9 6l11 0" />
      <path d="M9 12l11 0" />
      <path d="M9 18l11 0" />
      <path d="M5 6l0 .01" />
      <path d="M5 12l0 .01" />
      <path d="M5 18l0 .01" />
    </svg> List
  </button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
    <!-- Download SVG icon from http://tabler.io/icons/icon/layout -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M4 6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -1" />
      <path d="M4 15a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -3" />
      <path d="M14 6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -12" />
    </svg> Kanban
  </button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
    <!-- Download SVG icon from http://tabler.io/icons/icon/calendar -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12" />
      <path d="M16 3v4" />
      <path d="M8 3v4" />
      <path d="M4 11h16" />
      <path d="M11 15h1" />
      <path d="M12 15v3" />
    </svg> Calendar
  </button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
    <!-- Download SVG icon from http://tabler.io/icons/icon/files -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M15 3v4a1 1 0 0 0 1 1h4" />
      <path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2" />
      <path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
    </svg> Files
  </button>
</nav>
```

## Sizes

Add `nav-sm` or `nav-lg` to the `nav` to change the size.

```html
<nav class="nav nav-segmented nav-sm" role="tablist">...</nav>
```

```html
<nav class="nav nav-segmented nav-sm" role="tablist">
  <button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">List</button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">Kanban</button>
  <button class="nav-link disabled" role="tab" data-bs-toggle="tab" aria-selected="false" aria-disabled="true" tabindex="-1">Calendar</button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">Files</button>
</nav>
<nav class="nav nav-segmented nav-lg" role="tablist">
  <button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">List</button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">Kanban</button>
  <button class="nav-link disabled" role="tab" data-bs-toggle="tab" aria-selected="false" aria-disabled="true" tabindex="-1">Calendar</button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">Files</button>
</nav>
```

## Accessibility

- A segmented control that switches panels is a tab list: put `role="tablist"` on the `nav`, `role="tab"` on each button, and link them to the panels with `aria-controls`.
- A segmented control that picks a value is a radio group instead. Use `input type="radio"` with a shared name inside a `fieldset` with a `legend`, so the arrow keys work and the group has a name.
- Do not mix the two. Buttons with `aria-pressed` in a row read as separate toggles, which is not what a segmented control looks like.
- Every segment needs a text label. An emoji or an icon alone leaves the option unnamed - add an `aria-label` if the design has no room for words.

## SCSS variables

Use these SCSS variables to customize the segmented control. The default values are:

```scss
$nav-segmented-height: 2.5rem;
$nav-segmented-padding: 2px;
$nav-segmented-radius: 6px;
$nav-segmented-gap: 0.25rem;
$nav-segmented-link-gap: 0.25rem;
$nav-segmented-link-padding-x: 0.75rem;
$nav-segmented-link-icon-size: 1.25rem;
$nav-segmented-icon-margin: -0.25rem;
$nav-segmented-height-sm: 2rem;
$nav-segmented-radius-sm: 4px;
$nav-segmented-link-padding-x-sm: 0.5rem;
$nav-segmented-link-gap-sm: 0.25rem;
$nav-segmented-link-icon-size-sm: 1rem;
$nav-segmented-height-lg: 3rem;
$nav-segmented-radius-lg: 8px;
$nav-segmented-link-padding-x-lg: 1rem;
$nav-segmented-link-gap-lg: 0.5rem;
$nav-segmented-link-icon-size-lg: 1.5rem;
```

_Source: `core/scss/_variables.scss`_