Label

A standalone form label with optional required indicator and disabled state. Most input components (Input, Select, Textarea) include a built-in label prop — use this component when you need the label separately.

Preview

Email address

Full name

Disabled field

Sizes

Small — 11pxMedium — 12px (default)Large — 13px

When to use

→When composing a custom field layout where the input and label need to be separate elements (e.g. label + description text + input).
→When building a custom form control that doesn't include its own label prop.
→For checkbox and radio groups — prefer RadioGroup's label prop for the group legend, and this Label for individual contextual labels.
→Prefer the built-in label prop on Input, Select, and Textarea when there is no need for extra composition.

Implementation

Label.tsx

tsx

import { Label } from "@/components/ui/Label";
import { Input } from "@/components/ui/Input";

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

// Required
<Label htmlFor="name" required>Full name</Label>
<Input id="name" required placeholder="Jane Smith" />

// Disabled
<Label htmlFor="readonly-field" disabled>Read-only field</Label>
<Input id="readonly-field" disabled defaultValue="Cannot change" />

// Sizes
<Label size="sm">Small label</Label>
<Label size="md">Medium label (default)</Label>
<Label size="lg">Large label</Label>

Props

All native <label> attributes are forwarded.

Prop	Type	Default	Description
`children*`	`React.ReactNode`	—	The label text or content.
`required`	`boolean`	`false`	Appends a red asterisk (*) after the label text. Pair with a corresponding required attribute on the input.
`disabled`	`boolean`	`false`	Dims the label to indicate the associated input is unavailable.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Font size — sm: 11px, md: 12px, lg: 13px.
`htmlFor`	`string`	—	Associates the label with a form control by id. Passed through as a native HTML attribute.

Accessibility

→Always provide htmlFor pointing to the input's id — this creates a programmatic association that screen readers use to announce the label when the input is focused.
→The asterisk (*) in the required indicator is aria-hidden; screen readers will announce the native required attribute on the input instead.
→Do not use colour alone to communicate required status — the * character provides a non-colour indicator.
→When a label is visually hidden, prefer sr-only class over omitting it entirely — the association still benefits keyboard and screen reader users.