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="m@example.com" /> </div> );}For form fields, use the Field component which includes built-in label, description, and error handling.
pnpm dlx shadcn@latest add @herocn/labelimport { Label } from "@/components/ui/label"<Label htmlFor="email">Your email address</Label>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> );}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> );}It gets all of the native html label props.