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

# Label

> A styled text label that identifies an input field, menu group, or UI element.

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

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

## When to use

* Every [Input](/cdf/aura/primitives/input), [Select](/cdf/aura/primitives/select), [Combobox](/cdf/aura/primitives/combobox), [Textarea](/cdf/aura/primitives/textarea), [Checkbox](/cdf/aura/primitives/checkbox) in a group, [Radio](/cdf/aura/primitives/radio) in a group, or similar form control needs one.
* When grouped menu items would benefit from a label.

## When not to use

* Headings or section titles - use the appropriate heading level.
* Descriptive text below or alongside a field — use [Helper text](/cdf/aura/primitives/helper-text).
* Non-interactive UI labels like status indicators or metadata — use plain text or [Badge](/cdf/aura/primitives/badge).

## Dos and don'ts

* **Do** always associate a Label with its field via `htmlFor` / `id` — this is what makes it accessible, not just visual.
* **Do** mark required fields consistently across the form, either with an asterisk or explicit text.
* **Don't** use placeholder text as a substitute for a label — placeholders disappear on input focus and aren't accessible.
* **Don't** hide labels to create a "cleaner" layout — if space is tight, use [Tooltip](/cdf/aura/primitives/tooltip) to supplement a shortened label, not replace it.
* **Don't** disable a label independently of its field — their states should always match.

## Often used with

Exactly one associated control: [Input](/cdf/aura/primitives/input), [Textarea](/cdf/aura/primitives/textarea), [Select](/cdf/aura/primitives/select), [Combobox](/cdf/aura/primitives/combobox), [Checkbox](/cdf/aura/primitives/checkbox), [Radio](/cdf/aura/primitives/radio), [Switch](/cdf/aura/primitives/switch), [Slider](/cdf/aura/primitives/slider), [Date picker](/cdf/aura/primitives/date-picker), or [File upload](/cdf/aura/primitives/file-upload).

## Accessibility

* **Explicit programmatic matching:** Pass a unique `id` to the form input and match it explicitly on the label using `htmlFor="input-id"`.
* **No nested focusables:** Avoid placing clickable controls (for example, modal triggers, [Tooltip](/cdf/aura/primitives/tooltip) triggers, or external links) inside the `<Label>` tag, which disrupts standard focus wrapping and assistive click handling.
* **Visually hidden fallback:** If a design requires omitting a visual label, render the `<Label>` with a screen-reader-only utility class (`className="sr-only"`) rather than removing the label element entirely.
* **Contrast standards:** Maintain at least a 4.5:1 contrast ratio against the background, even when styling optional or disabled field labels.
* **Grouped controls:** Use `<legend>` inside a `<fieldset>` (or `role="group"` with `aria-labelledby`) instead of standalone labels when grouping related controls like [Radio](/cdf/aura/primitives/radio) groups or [Checkbox](/cdf/aura/primitives/checkbox) lists.

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

### Disabled

Disable the label together with its field so users understand the entire input group is unavailable, not just the control.

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

### With asterisk

Add an asterisk to mark required fields when your form uses that convention consistently across all mandatory inputs.

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

### Required field

Use the required-field pattern when you need both a visual indicator and accessible semantics that announce the field as mandatory.

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