Label
An accessible label component for form controls
An accessible label component that pairs with form controls. Built on Radix UI Label primitive for proper accessibility.
Installation
npx shadcn@latest add https://nteract-elements.vercel.app/r/label.jsonCopy from the nteract/elements registry.
Usage
import { Label } from "@/registry/primitives/label"
import { Input } from "@/registry/primitives/input"
export function Example() {
return (
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="you@example.com" />
</div>
)
}Examples
With Input
<Label htmlFor="cell-id">Cell ID</Label>
<Input id="cell-id" placeholder="cell-001" />With Textarea
<Label htmlFor="code">Code</Label>
<Textarea id="code" placeholder="print('Hello, world!')" />With Helper Text
The kernel runtime for this notebook.
<Label htmlFor="runtime">Runtime</Label>
<Input id="runtime" placeholder="Python 3.11" />
<p className="text-sm text-muted-foreground">
The kernel runtime for this notebook.
</p>Disabled State
Labels automatically style when their associated input is disabled:
<Label htmlFor="disabled-input">Disabled Field</Label>
<Input id="disabled-input" placeholder="Cannot edit" disabled />Props
| Prop | Type | Default | Description |
|---|---|---|---|
htmlFor | string | — | ID of the form element this label is for |
className | string | — | Additional CSS classes |
children | ReactNode | — | Label text content |
Accessibility
- Clicking the label focuses the associated form control
- Screen readers announce the label when the input is focused
- Use
htmlForto properly associate labels with form controls