Github

Label

PreviousNext

Renders an accessible label associated with controls.

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

export function LabelDemo() {
	return (
		<div className="grid w-full max-w-sm items-center gap-2">
			<Label htmlFor="label-demo-email">Email</Label>
			<Input id="label-demo-email" type="email" placeholder="[email protected]" />
		</div>
	);
}

For form fields, use the Field component which includes built-in label, description, and error handling.

Installation

pnpm dlx shadcn@latest add https://herocn.dev/r/label.json

Usage

import { Label } from "@/components/ui/label"
<Label htmlFor="email">Your email address</Label>

Label in Field

For form fields, use the Field component which includes built-in FieldLabel, FieldDescription, and FieldError components.

<Field>
  <FieldLabel htmlFor="email">Your email address</FieldLabel>
  <Input id="email" />
</Field>

Use `FieldLabel` for forms that also need descriptions and errors.

import {
	Field,
	FieldDescription,
	FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export function LabelInField() {
	return (
		<div className="w-full max-w-sm">
			<Field>
				<FieldLabel htmlFor="label-in-field-username">Username</FieldLabel>
				<Input
					id="label-in-field-username"
					type="text"
					placeholder="Enter your username"
				/>
				<FieldDescription>
					Use `FieldLabel` for forms that also need descriptions and errors.
				</FieldDescription>
			</Field>
		</div>
	);
}

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client";

import {
	type Translations,
	useTranslation,
} from "@/components/language-selector";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";

const translations: Translations = {
	en: {
		dir: "ltr",
		values: {
			label: "Enable notifications",
		},
	},
	ar: {
		dir: "rtl",
		values: {
			label: "تفعيل الإشعارات",
		},
	},
	he: {
		dir: "rtl",
		values: {
			label: "הפעל התראות",
		},
	},
};

export function LabelRtl() {
	const { dir, language, t } = useTranslation(translations, "ar");

	return (
		<div className="flex items-center gap-2" lang={language} dir={dir}>
			<Switch id="label-rtl-switch" />
			<Label htmlFor="label-rtl-switch">{t.label}</Label>
		</div>
	);
}

API Reference

Label

It gets all of the native html label props.