Label

A label component with required indicator, optional text, and description support.

1'use client';
2
3import { Input } from '@/components/ui/input';
4import { Label } from '@/components/ui/label';
5
6export function Default() {
7  return (
8    <div className="flex flex-col gap-1.5">
9      <Label htmlFor="email-demo">Email</Label>
10      <Input id="email-demo" placeholder="you@example.com" type="email" />
11    </div>
12  );
13}

Installation

pnpm dlx mateui add label

Anatomy

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

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

Variants

Default

A label paired with an input.

1'use client';
2
3import { Input } from '@/components/ui/input';
4import { Label } from '@/components/ui/label';
5
6export function Default() {
7  return (
8    <div className="flex flex-col gap-1.5">
9      <Label htmlFor="email-demo">Email</Label>
10      <Input id="email-demo" placeholder="you@example.com" type="email" />
11    </div>
12  );
13}

Required & Optional

Use required to show a red asterisk, optional to show "(optional)" text, and description for helper text.

Full Name*

Bio(optional)Tell us about yourself

1'use client';
2
3import { Input } from '@/components/ui/input';
4import { Label } from '@/components/ui/label';
5
6export function Required() {
7  return (
8    <div className="flex flex-col gap-4">
9      <div className="flex flex-col gap-1.5">
10        <Label htmlFor="name-demo" required>
11          Full Name
12        </Label>
13        <Input id="name-demo" placeholder="John Doe" />
14      </div>
15      <div className="flex flex-col gap-1.5">
16        <Label htmlFor="bio-demo" optional description="Tell us about yourself">
17          Bio
18        </Label>
19        <Input id="bio-demo" placeholder="A short bio..." />
20      </div>
21    </div>
22  );
23}

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.
`htmlFor`	`string`	—	Associates the label with a form element.
`className`	`string`	—	Additional CSS class names.
`children`	`React.ReactNode`	—	The label content.

PreviousKbd NextPopover