Skip to main content

Label

Accessible form labels. Link text to inputs. Boost completion rates.

1import { Input } from '@/components/ui/input';
2import { Label } from '@/components/ui/label';
3

4export function Default() {
5  return (
6    <div className="flex w-full max-w-sm flex-col gap-1.5">
7      <Label htmlFor="workspace-name">Workspace name</Label>
8      <Input id="workspace-name" defaultValue="Northwind Labs" />
9    </div>
10  );
11}

Installation

pnpm dlx nachui add label

Anatomy

1import { Label } from '@/components/ui/label';
1<Label htmlFor="email">Email</Label>

Variants

Default

A label paired with an input.
1import { Input } from '@/components/ui/input';
2import { Label } from '@/components/ui/label';
3

4export function Default() {
5  return (
6    <div className="flex w-full max-w-sm flex-col gap-1.5">
7      <Label htmlFor="workspace-name">Workspace name</Label>
8      <Input id="workspace-name" defaultValue="Northwind Labs" />
9    </div>
10  );
11}

Required & Optional

Use required to show a red asterisk, optional to show "(optional)" text, and description for helper text.
Printed on every invoice we send you.
1import { Input } from '@/components/ui/input';
2import { Label } from '@/components/ui/label';
3

4export function Required() {
5  return (
6    <div className="flex w-full max-w-sm flex-col gap-4">
7      <div className="flex flex-col gap-1.5">
8        <Label htmlFor="company-name" required>
9          Company name
10        </Label>
11        <Input id="company-name" placeholder="Northwind Labs SL" />
12      </div>
13      <div className="flex flex-col gap-1.5">
14        <Label htmlFor="vat-number" optional description="Printed on every invoice we send you.">
15          VAT number
16        </Label>
17        <Input id="vat-number" placeholder="ESB12345678" />
18      </div>
19    </div>
20  );
21}

API Reference

Label

PropTypeDefaultDescription
requiredboolean—Shows a red * indicator next to the label text.
optionalboolean—Shows "(optional)" text next to the label.
descriptionstring—Helper text displayed below the label.
htmlForstring—Associates the label with a form element.
classNamestring—Additional CSS class names.
childrenReact.ReactNode—The label content.
Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue
PreviousKbd
NextMessage
Ctrl+I