Label
Renders an accessible label associated with form controls.
Preview
import { Input } from "@/components/ui/Input"
import { Label } from "@/components/ui/Label"
export function LabelDemo() {
return (
<div className="flex w-full max-w-sm flex-col gap-0.5">
<Label htmlFor="label-preview-email">Email address</Label>
<Input
id="label-preview-email"
type="email"
placeholder="name@example.com"
/>
</div>
)
}Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/labelManual
Copy and paste the class names utility into your utils/class-names.ts file.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the Label component into your components/ui/Label.tsx file.
/**
* @description Renders an accessible label associated with form controls.
*/
import * as React from "react";
import { cn } from "@/utils/class-names";
function Label({ className, ...props }: React.ComponentProps<"label">) {
return <label data-slot="input" className={cn(className)} {...props} />;
}
export { Label };