Atomx Docs
Components

Label

Renders an accessible label associated with a form control using Radix UI's Label primitive.

Install

npx shadcn@latest add https://atomx.acau.net/r/label.json

Usage

Label wraps Radix UI's Label.Root, which provides correct accessibility semantics (for/htmlFor association, correct pointer-events, and disabled-state propagation via a data-[disabled] group attribute). Always pair a Label with a form control — either via htmlFor matching the control's id, or by nesting the control inside the Label element.

Do not use a bare <label> for form controls in atomx apps; Label applies the correct design tokens and accessibility behaviour automatically.

Preview

Label with Input

Label with Textarea

Disabled state (propagated from group)

Props

Extends React.ComponentProps<typeof LabelPrimitive.Root>. All Radix Label props are forwarded.

PropTypeNotes
htmlForstringLinks the label to a form control by id.
classNamestringAdditional classes merged with the base label styles.

Kbd

Displays a keyboard key or key combination using the semantic <kbd> element.

Menubar

A persistent horizontal menu common in desktop applications, with menus, items, separators, shortcuts, checkboxes, radio groups, and sub-menus — built on Radix UI's Menubar primitive.

On this page

InstallUsagePreviewLabel with InputLabel with TextareaDisabled state (propagated from group)Props