Label

A native label primitive for naming form controls.

Features

Native label semantics
htmlFor and wrapped-control support
Double-click selection protection
asChild composition
Headless styling

Installation

npm install @ariaui/label

Examples

Label examples show both native association patterns: use htmlFor with a matching control id, or wrap the control inside Label.Root. Style the label and field with your own classes.

Default

Associate the label with a control by pairing htmlFor with the input id.

Preview

No preview output yet.

live.tsxReady

Wrapped control

Wrap the input inside Label.Root when you want the whole label surface to activate the control.

Preview

No preview output yet.

live.tsxReady

Anatomy

tsx

import * as Label from "@ariaui/label";

export default function Example() {
  return (
    <Label.Root htmlFor="email">
      Email
    </Label.Root>
  );
}

API Reference

Root

Native label primitive. Renders a `<label>` by default, forwards native label props, and supports `asChild` composition.

Prop	Type	Default
asChild	boolean	false
htmlFor	string	—

Accessibility

Label.Root renders a native <label> by default, so browser label behavior applies:

Use htmlFor with a matching control id, or wrap the control inside the label.
Keep the visible label text close to the field it names.
Use one primary label per control, then connect helper or error copy with aria-describedby.
Avoid using labels for arbitrary non-form content.

Native association

Clicking or tapping a label forwards activation to its associated native control. Custom controls should still be backed by native form elements when they need label behavior.