> ## 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.

# Select

> Select allows users to choose one or more pre-defined options from a list. It’s typically used in forms or filtering contexts where predefined options are available.

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

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

## When to use

* When there are multiple predefined options, and the user needs to select one or more.
* When space is limited and you don't want to display all the options at once.
* When the options are familiar to the user and do not require additional explanation.
* For form inputs that require a specific selection.

## When to use something else

* More than \~12 options or search helps: use [Combobox](/cdf/aura/primitives/combobox).
* Very few options or binary on/off: use [Checkbox](/cdf/aura/primitives/checkbox), [Radio](/cdf/aura/primitives/radio), or [Switch](/cdf/aura/primitives/switch).
* User-defined or creatable values: use [Combobox](/cdf/aura/primitives/combobox).
* Options need long descriptions visible at once: use [Checkbox](/cdf/aura/primitives/checkbox) or [Radio](/cdf/aura/primitives/radio).
* Selection immediately runs an action (not form field value): use [Button](/cdf/aura/primitives/button), [Toggle group](/cdf/aura/primitives/toggle-group), or [Toolbar](/cdf/aura/primitives/toolbar).
* Page-level view switching: use [Segmented control](/cdf/aura/primitives/segmented-control) or [Tabs](/cdf/aura/primitives/tabs).

## Dos and don'ts

* **Do** provide a clear label and placeholder copy. Use help text if clarification is needed.
* **Do** be careful with using default selections as users may not thoroughly check the default.
* **Do** group related options in the list if there are multiple categories. List in order of frequency or alphabetically - whichever is better suited for the task.

## Select menu

Select menus display a checkmark, or toggle, to the right of the menu item, instead of on the left like traditional Context and Dropdown menus. This is because scanning the list is easier when the checkmark is on the right. Therefore it is recommended to avoid leading content like an icon or [Badge](/cdf/aura/primitives/badge) on the left side of the menu item. Badges should be placed on the right side of the menu item.

## Behavior

* Single-select: choosing an item commits the value and closes the list (unless design specifies otherwise).
* Multi-select: list may stay open until dismissed; use an explicit confirm pattern (for example, Apply) when users must review selections before committing.

## Often used with

[Label](/cdf/aura/primitives/label), [Helper text](/cdf/aura/primitives/helper-text); [Badge](/cdf/aura/primitives/badge) on items when needed; trigger is often a [Button](/cdf/aura/primitives/button)-styled field.

## 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.

### With label

Pair a Select with a visible label in forms so users know what they are choosing, and use helper text when the options need additional context.

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

### With icons

Add icons to menu items when they help users distinguish options quickly—for example, file types, status indicators, or category markers.

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

### With suffix

Use a suffix on the trigger when the selected value needs a unit, status, or secondary detail visible without opening the menu.

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

### Disabled

Use a disabled Select when the field cannot be changed, and explain why in helper text or a tooltip so users know what must happen before they can choose an option.

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

### With error

Show an error state when the current selection fails validation—for example, a required field left empty or a value that conflicts with another form input.

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

### With groups

Group related options when the list spans multiple categories—for example, separating regions, departments, or asset types to make scanning easier.

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

### With default value

Pre-select a default when one option is the most common or recommended choice, but be mindful that users may not review the selection before submitting.

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

### Narrow trigger with long options

Use a narrow trigger when space is limited, and let the menu expand to show full option labels so long text is not truncated in the dropdown.

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