> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Cognite Data Fusion (CDF) is an industrial DataOps platform. Prefer English docs unless the user asks for another locale.
> Follow /_llms/ index links recursively until you reach page URLs ending in .md. Fetch those Markdown twins instead of HTML.
> For REST APIs, default to calendar version 20230101 (stable). Use 20230101-beta or 20230101-alpha only if the user is on a preview API. Cite paths under /api-reference/concepts/<version>/ and the Cdf-Version header. Prefer the Python SDK (cognite-sdk) unless the user is in JavaScript/TypeScript.
> Start here by task: platform overview /cdf/index.md; data modeling /cdf/dm/index.md; data integration /cdf/integration/index.md; access /cdf/access/index.md; CDF Toolkit /cdf/deploy/cdf_toolkit/index.md; REST quickstart /dev/quickstart.md; Python SDK /dev/sdks/python/index.md; Atlas AI /cdf/atlas_ai/concepts/index.md; Flows apps /cdf/flows/index.md; Aura UI /cdf/aura/index.md; MCP and IDE setup /dev/guides/ide_ai_integration.md.
> For implementation work, also load /skill.md.

# Segmented control

> Segmented controls allow users to switch between different views, categories, or content filters in real time, without leaving the current page or context. They’re typically used for mutually exclusive options, where selecting one option deselects the others.

<Badge color="blue">v1.0.0</Badge> | [View in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-segmented-control--docs)

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-segmented-control--default" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-segmented-control--default&viewMode=story&globals=theme:light" title="Segmented control default story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

## When to use

* To toggle between related views or data sets, like switching between "List view" and "Grid view".
* To filter content by category, such as "All", "Private", "Public".
* When you want to provide quick, mutually exclusive choices that immediately affect the display without navigating away.
* When the options are closely related and equal in hierarchy.
* For primary view switches.

## When to use something else

* Options need longer descriptions or aren't a tight filter set: use [Radio](/cdf/aura/primitives/radio).
* Larger content sections or page-scale switching: use [Tabs](/cdf/aura/primitives/tabs).
* Binary on/off: use [Switch](/cdf/aura/primitives/switch).
* Mutually exclusive **actions** (not views): use [Toolbar](/cdf/aura/primitives/toolbar) or [Toggle group](/cdf/aura/primitives/toggle-group) as appropriate.
* More than \~five options or multi-select: use [Select](/cdf/aura/primitives/select), [Combobox](/cdf/aura/primitives/combobox), or [Tree view](/cdf/aura/primitives/tree-view).

## Dos and don'ts

* **Do** pre-select a default option that is most common or aligns with the primary task.
* **Do** be consistent in icon and label usage. If using a leading icon for one control, use them for all.
* **Do** keep the options between 2-5 so as not to overwhelm the user.
* **Don't** use Segmented control for unrelated actions.
* **Don't** mix icon-only with label-only.
* **Don't** use Segmented control to trigger actions like "Save" or "Delete".

## Often used with

The content region it toggles (e.g. list vs grid); [Tooltip](/cdf/aura/primitives/tooltip) if any segment is icon-only.

## Visual examples

The examples below are interactive and follow the doc site's theming: light mode when the docs site is in light mode, and dark mode when you switch the docs site to dark mode.

### Size variants

Choose the size that matches surrounding controls—use smaller segments in dense toolbars or side panels, and larger segments when the control is a primary view switch.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-segmented-control--size-variants" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-segmented-control--size-variants&viewMode=story&globals=theme:light" title="Segmented control size variants story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Tab content variants

Use label-only, icon-only, or icon-and-label segments consistently within a group so users can scan options quickly without mixed visual patterns.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-segmented-control--tab-content-variants" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-segmented-control--tab-content-variants&viewMode=story&globals=theme:light" title="Segmented control tab content variants story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Controlled

Use a controlled segmented control when the selected segment must follow application logic—for example, syncing with URL state, a parent form, or programmatic updates.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-segmented-control--controlled" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-segmented-control--controlled&viewMode=story&globals=theme:light" title="Segmented control controlled story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Disabled tabs

Disable individual segments when an option is temporarily unavailable, and add a tooltip or helper text that explains why that view or filter cannot be selected.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-segmented-control--disabled-tabs" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-segmented-control--disabled-tabs&viewMode=story&globals=theme:light" title="Segmented control disabled tabs story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Slide animation

Use the slide animation when switching between segments should feel fluid—for example, toggling between related views where motion reinforces the connection between options.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-segmented-control--slide-animation" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-segmented-control--slide-animation&viewMode=story&globals=theme:light" title="Segmented control slide animation story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Full width

Use full-width layout when the segmented control spans its container—for example, in a side panel or when two to three options should share equal space across the available width.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-segmented-control--full-width" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-segmented-control--full-width&viewMode=story&globals=theme:light" title="Segmented control full width story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>