Prepared Docs

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

Name	Type	Default	Description
`action`	`ReactElement<ButtonProps, ({ children, type, size, small, external, state, loadingType, leadIcon, tailIcon, iconTitle, progress, statusDot, statusDotInset, visualDensity: visualDensityProp, cornerStyle: cornerStyleProp, active, toggle, pressed, defaultPressed, onPressedChange, htmlType, href, ref, ...props }: PropsW...`	—	Action {@link Button} to render next to the label. Ignored when `inline` is set.
`active`	`boolean`	—	When true, applies an active/pressed visual state.
`as`	`InteractableTag`	`InteractableTag.Button`	HTML element tag to render.
`disabled`	`boolean`	—	When true, disables interaction and applies a disabled visual state.
`href`	`string`	—	URL for anchor-based interactables. Changes the rendered element to an `<a>` tag.
`injectChild`	`boolean`	—	Choose to inject interactivity into a child element such as a Div element
`inline`	`boolean`	`false`	When true, renders the label inline without a block-level line break.
`interactionType`	`InteractableType`	`InteractableType.Default`	Visual style variant for the interactive element.
`required`	`boolean`	`false`	When true, renders a required asterisk after the label text. The associated form control must also set `required` and/or `aria-required` for assistive technology; this prop is visual only.
`target`	`HTMLAttributeAnchorTarget`	—	Target for anchor-based interactables (for example `_blank`).
`tooltip`	`string`	—	Optional tooltip text to display on hover (uses Radix Tooltip)
`tooltipSide`	`TooltipPosition`	—	Position of the tooltip relative to the element, defaults to "top"
`weight`	`LabelWeight`	`LabelWeight.Bold`	Font weight for the label.

Storybook

Interactive examples and edge cases for this component are in Storybook.

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.

Label / Usage

Label / Accessibility

Props

Name	Type	Default	Description
`action`	`ReactElement<ButtonProps, ({ children, type, size, small, external, state, loadingType, leadIcon, tailIcon, iconTitle, progress, statusDot, statusDotInset, visualDensity: visualDensityProp, cornerStyle: cornerStyleProp, active, toggle, pressed, defaultPressed, onPressedChange, htmlType, href, ref, ...props }: PropsW...`	—	Action {@link Button} to render next to the label. Ignored when `inline` is set.
`active`	`boolean`	—	When true, applies an active/pressed visual state.
`as`	`InteractableTag`	`InteractableTag.Button`	HTML element tag to render.
`disabled`	`boolean`	—	When true, disables interaction and applies a disabled visual state.
`href`	`string`	—	URL for anchor-based interactables. Changes the rendered element to an `<a>` tag.
`injectChild`	`boolean`	—	Choose to inject interactivity into a child element such as a Div element
`inline`	`boolean`	`false`	When true, renders the label inline without a block-level line break.
`interactionType`	`InteractableType`	`InteractableType.Default`	Visual style variant for the interactive element.
`required`	`boolean`	`false`	When true, renders a required asterisk after the label text. The associated form control must also set `required` and/or `aria-required` for assistive technology; this prop is visual only.
`target`	`HTMLAttributeAnchorTarget`	—	Target for anchor-based interactables (for example `_blank`).
`tooltip`	`string`	—	Optional tooltip text to display on hover (uses Radix Tooltip)
`tooltipSide`	`TooltipPosition`	—	Position of the tooltip relative to the element, defaults to "top"
`weight`	`LabelWeight`	`LabelWeight.Bold`	Font weight for the label.

Storybook

Interactive examples and edge cases for this component are in Storybook.

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.