Label

An accessible label component with required indicator, sizing, description text, and disabled state. Built on Radix UI Label.

Overview

The Label component provides an accessible <label> element for form controls. It supports required indicators, descriptions, multiple sizes, and disabled states. Built on Radix UI's Label primitive for proper accessibility semantics.

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add label

pnpm dlx @work-rjkashyap/unified-ui add label

npx @work-rjkashyap/unified-ui add label

bunx @work-rjkashyap/unified-ui add label

If you haven't initialized your project yet, run npx @work-rjkashyap/unified-ui init first. See the CLI docs for details.

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import {
	Label,
	FormLabel,
} from "@work-rjkashyap/unified-ui";

Examples

Basic Usage

Full name

Email address

<Label htmlFor="name">Full name</Label>
<Input id="name" placeholder="Enter your name" />

<Label htmlFor="email">Email address</Label>
<Input id="email" type="email" placeholder="you@example.com" />

<Label htmlFor="name">Full name</Label><Input id="name" placeholder="Enter your name" /><Label htmlFor="email">Email address</Label><Input id="email" type="email" placeholder="you@example.com" />

Sizes

Small label (12px)Medium label (14px, default)Large label (14px, semibold)

<Label size="sm">Small label (12px)</Label>
<Label size="md">Medium label (14px, default)</Label>
<Label size="lg">Large label (14px, semibold)</Label>

<Label size="sm">Small label (12px)</Label><Label size="md">Medium label (14px, default)</Label><Label size="lg">Large label (14px, semibold)</Label>

Size	Font Size	Weight
`sm`	12px	Medium
`md`	14px	Medium
`lg`	14px	Semibold

Required Indicator

Full name

Email address

<Label htmlFor="name" required>Full name</Label>
<Input id="name" aria-required="true" placeholder="Required field" />

<Label htmlFor="email" required>Email address</Label>
<Input id="email" aria-required="true" placeholder="Required field" />

<Label htmlFor="name" required>Full name</Label><Input id="name" aria-required="true" placeholder="Required field" /><Label htmlFor="email" required>Email address</Label><Input id="email" aria-required="true" placeholder="Required field" />

With Description

Bio

Website URL

<Label htmlFor="bio">
Bio
</Label>
<Textarea id="bio" placeholder="Tell us about yourself" />

<Label htmlFor="url">
Website URL
</Label>
<Input id="url" placeholder="https://example.com" />

<Label htmlFor="bio">Bio</Label><Textarea id="bio" placeholder="Tell us about yourself" /><Label htmlFor="url">Website URL</Label><Input id="url" placeholder="https://example.com" />

Disabled State

Locked field

Organization name

<Label htmlFor="locked" disabled>Locked field</Label>
<Input id="locked" disabled value="Cannot edit" />

<Label htmlFor="org" disabled>
Organization name
</Label>
<Input id="org" disabled value="Acme Corp" />

<Label htmlFor="locked" disabled>Locked field</Label><Input id="locked" disabled value="Cannot edit" /><Label htmlFor="org" disabled>Organization name</Label><Input id="org" disabled value="Acme Corp" />

Props

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the label text.
`required`	`boolean`	`false`	Shows a red asterisk (*) after the label text.
`disabled`	`boolean`	`false`	Reduces opacity and changes cursor.
`description`	`ReactNode`	—	Helper text displayed below the label.
`descriptionClassName`	`string`	—	Additional CSS classes for the description text.
`wrapperClassName`	`string`	—	Additional CSS classes for the wrapper (when description set).
`htmlFor`	`string`	—	The `id` of the associated form control.
`className`	`string`	—	Additional CSS classes for the label element.

Accessibility

The required indicator is decorative (aria-hidden). Always set aria-required="true" on the associated input for screen reader support.

Semantic HTML — Renders as a native <label> element via Radix UI's Label primitive.
htmlFor linkage — Clicking the label focuses the associated input.
Required indicator — Visual only; use aria-required on the control.
Disabled state — Visual only; disable the input itself for functional disabling.
Peer-disabled — Supports Tailwind's peer-disabled pattern for automatic styling when the input is disabled.

Design Tokens

Token	Usage
`--foreground`	Label text color
`--danger`	Required indicator color
`--muted-foreground`	Description text color

On this page