Label

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

Workspace name

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

Copy and paste the following code into your project.

1import * as React from 'react';
2import { cn } from '../lib/cn';
3
4type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
5  ref?: React.Ref<HTMLLabelElement>;
6  required?: boolean;
7  optional?: boolean;
8  description?: string;
9  descriptionId?: string;
10};
11
12function Label({
13  className,
14  required,
15  optional,
16  description,
17  descriptionId,
18  children,
19  ref,
20  ...props
21}: LabelProps) {
22  const label = (
23    <label
24      ref={ref}
25      data-slot="label"
26      className={cn(
27        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-40 peer-disabled:cursor-not-allowed peer-disabled:opacity-40',
28        className,
29      )}
30      {...props}
31    >
32      {children}
33      {required && (
34        <span aria-hidden="true" className="text-destructive-text text-sm">
35          *
36        </span>
37      )}
38      {optional && <span className="text-muted-foreground text-xs font-normal">(optional)</span>}
39    </label>
40  );
41
42  if (!description) return label;
43
44  const hintId =
45    descriptionId ?? (props.htmlFor ? `${props.htmlFor}-label-description` : undefined);
46
47  return (
48    <div className="flex flex-col gap-1">
49      {label}
50      <span id={hintId} data-slot="label-description" className="text-muted-foreground text-xs">
51        {description}
52      </span>
53    </div>
54  );
55}
56
57Label.displayName = 'Label';
58
59export { Label };
60export type { LabelProps };

Update the import paths to match your project structure.

Anatomy

1import { Label } from '@/components/ui/label';

1<Label htmlFor="email">Email</Label>

Variants

Default

A label paired with an input.

Workspace name

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.

The asterisk is only visual. Put required on the input as well, so screen readers announce it from the control itself.

The description gets the id {htmlFor}-label-description, or the one you pass in descriptionId. Point the input's aria-describedby at it so the hint is read along with the field.

Company name

VAT number(optional)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" required 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
18          id="vat-number"
19          aria-describedby="vat-number-label-description"
20          placeholder="ESB12345678"
21        />
22      </div>
23    </div>
24  );
25}

API Reference

Label

Prop	Type	Default	Description
`required`	`boolean`	—	Shows a red `*` indicator next to the label text.
`optional`	`boolean`	—	Shows "(optional)" text next to the label.
`description`	`string`	—	Helper text displayed below the label.
`descriptionId`	`string`	`{htmlFor}-label-description`	Id of the description, for the input's `aria-describedby`.
`htmlFor`	`string`	—	Associates the label with a form element.
`className`	`string`	—	Additional CSS class names.
`children`	`React.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

1import { Input } from '@/components/ui/input';

2import { Label } from '@/components/ui/label';

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

Copy and paste the following code into your project.

1import * as React from 'react';
2import { cn } from '../lib/cn';
3
4type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
5  ref?: React.Ref<HTMLLabelElement>;
6  required?: boolean;
7  optional?: boolean;
8  description?: string;
9  descriptionId?: string;
10};
11
12function Label({
13  className,
14  required,
15  optional,
16  description,
17  descriptionId,
18  children,
19  ref,
20  ...props
21}: LabelProps) {
22  const label = (
23    <label
24      ref={ref}
25      data-slot="label"
26      className={cn(
27        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-40 peer-disabled:cursor-not-allowed peer-disabled:opacity-40',
28        className,
29      )}
30      {...props}
31    >
32      {children}
33      {required && (
34        <span aria-hidden="true" className="text-destructive-text text-sm">
35          *
36        </span>
37      )}
38      {optional && <span className="text-muted-foreground text-xs font-normal">(optional)</span>}
39    </label>
40  );
41
42  if (!description) return label;
43
44  const hintId =
45    descriptionId ?? (props.htmlFor ? `${props.htmlFor}-label-description` : undefined);
46
47  return (
48    <div className="flex flex-col gap-1">
49      {label}
50      <span id={hintId} data-slot="label-description" className="text-muted-foreground text-xs">
51        {description}
52      </span>
53    </div>
54  );
55}
56
57Label.displayName = 'Label';
58
59export { Label };
60export type { LabelProps };

Update the import paths to match your project structure.

Variants

Default

A label paired with an input.

Workspace name

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.

The asterisk is only visual. Put required on the input as well, so screen readers announce it from the control itself.

The description gets the id {htmlFor}-label-description, or the one you pass in descriptionId. Point the input's aria-describedby at it so the hint is read along with the field.

Company name

VAT number(optional)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" required 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
18          id="vat-number"
19          aria-describedby="vat-number-label-description"
20          placeholder="ESB12345678"
21        />
22      </div>
23    </div>
24  );
25}

API Reference

Label

Prop	Type	Default	Description
`required`	`boolean`	—	Shows a red `*` indicator next to the label text.
`optional`	`boolean`	—	Shows "(optional)" text next to the label.
`description`	`string`	—	Helper text displayed below the label.
`descriptionId`	`string`	`{htmlFor}-label-description`	Id of the description, for the input's `aria-describedby`.
`htmlFor`	`string`	—	Associates the label with a form element.
`className`	`string`	—	Additional CSS class names.
`children`	`React.ReactNode`	—	The label content.