Label

An accessible form label built on Radix UI Label. Automatically handles clicking the label to focus the associated control, and applies visual feedback when the associated input is disabled.

Built on Radix UI.

✓Clicking the label focuses the associated input
✓Dimmed when the associated input has the peer-disabled state
✓Built on Radix UI Label for reliable accessibility semantics
✓Works with all form primitives: Input, Textarea, Checkbox, RadioGroup, Switch, Select

Email address

import { Label }from "@aetherstack/ui"

label.tsx

import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"

<div className="space-y-2">
  <Label htmlFor="email">Email address</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
</div>

Usage

With Input

With Checkbox

Labels work naturally alongside Checkbox, RadioGroupItem, and Switch.

Accept terms and conditions

Disabled label

When the associated input is disabled, the label automatically reduces opacity. This uses Tailwind's peer-disabled: variant.

Disabled field

Required indicator

Add a visual required indicator using a span inside the label.

Username

Props

Prop	Type	Default	Description
htmlFor	string	—	The id of the form element this label is associated with. Clicking the label focuses that element.
className	string	—	Additional class names.
...props	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>	—	All Radix Label root props — which extend React.LabelHTMLAttributes<HTMLLabelElement>.

* Required props

Accessibility

→Always use Label with htmlFor matching the input's id — this creates an explicit association.
→Screen readers announce the label text when the user focuses the associated input.
→The peer-disabled variant requires the input to appear before the label in the DOM for the CSS selector to work.