Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Primitives
  3. Label
  5. API and Development

Label

API and Development

View SourceOpens in a new tabSubmit IssueOpens in a new tab
Label provides accessible labels for form controls, helping users understand what information is expected and ensuring proper association between labels and their inputs. It displays descriptive text associated with form fields, supporting semantic color variants and inline layouts. Built on Radix UI's Label component, it ensures proper accessibility and visual consistency across the interface.
Props
NameTypeDefaultDescription
textLocalizedMessage—Visible label copy from the caller.
actionReactNode—Trailing affordance on the label row, such as a link-styled control (ui-core WithAction).
childrenReactNode—Control or row content when the label wraps its field instead of using htmlFor.
classNamestring—Classes on the label host. Put overrides in @layer chroma.overrides.
disabledboolean—When true, paints the label with the disabled foreground and not-allowed cursor, as when the associated control is unavailable. Field sets this from its own disabled prop.
foregroundForeground.Default | Foreground.Subtle | Foreground.Disabled—Foreground for the label text. Defaults to default; status colors are excluded (LBL-8).
refRef<HTMLLabelElement>—Ref to the rendered label.
requiredboolean—When true, renders an aria-hidden required marker after the text inside {@link Text} (LBL-1).
typeTextType.BodyLarge | TextType.BodyLargeEmphasis | TextType.BodyMedium | TextType.BodyMediumEmphasis | TextType.Label | TextType.Caption | TextType.CaptionEmphasis—Chroma typography role for the label text. Defaults to the label role (LBL-9).
Storybook
Interactive examples and edge cases for this component are in Storybook.
DefaultOpens in a new tab
Base
Default appearance for standard form labels.
Color Variants
Use color variants to communicate validation state or semantic meaning.
Success
Indicates a positive state or successful validation.
Warning
Highlights attention or caution without indicating an error.
Error
Signals validation errors or required attention.
With Action
Use the action prop to place a link Button at the trailing edge of a block label row—for example, "Forgot password?" beside a password field. The action is ignored when inline is set.
Inline Layout
Use inline labels when space is limited or when the label and control should appear on the same line.
Disabled State
Use disabled labels when the associated form control is unavailable.
With Form Controls
Labels work seamlessly with various form controls throughout the platform.
With Input
With TextArea
With Select
With Checkbox
Form Integration
Use labels consistently within forms to provide clear guidance.
Previous
Label / Usage
Next
Label / Accessibility
On this page
Props
Storybook
Base
Color Variants
Success
Warning
Error
With Action
Inline Layout
Disabled State
With Form Controls
With Input
With TextArea
With Select
With Checkbox
Form Integration