Label

Form label. Wraps Radix Label primitive — clicking the label focuses the associated input. Use `htmlFor` to associate.

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

Edit JSX — preview updates livereact-live

import { Label } from "@avala/design";

<Label>Label</Label>

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-label--defaultOpen in Storybook →

Pairing with a custom or non-Carbon control where you only need the label affordance (cursor, focus-on-click).
Building a custom field row that wants the bare-bones primitive without optional/info affordances.

Standard form rows with required / optional indicators or info tooltips → use `FormLabel`.
Field labels inside `TextInput` / `PasswordInput` / `TextArea` — those primitives include a Carbon-spec label slot already.