Label
A shadcn-style label component for form controls.
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
const LabelDemo = () => {
return (
<div className="w-full max-w-sm space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" placeholder="name@example.com" type="email" />
</div>
);
};
export default LabelDemo;
Installation
npx shadcn@latest add @ark-cn/labelInstall the dependency required by this primitive:
npm install @ark-ui/reactCopy the component source into your app:
TSXcomponents/ui/label.tsx
"use client";
import { ark } from "@ark-ui/react/factory";
import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";
export const Label = ({
className,
...props
}: ComponentProps<typeof ark.label>) => {
return (
<ark.label
className={cn(
"inline-flex items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4",
className,
)}
{...props}
/>
);
};
Update import aliases to match your project setup.
Usage
import { Label } from "@/components/ui/label"Examples
Default
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
const LabelDemo = () => {
return (
<div className="w-full max-w-sm space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" placeholder="name@example.com" type="email" />
</div>
);
};
export default LabelDemo;
Required Field
Required field
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
const LabelRequired = () => {
return (
<div className="w-full max-w-sm space-y-1.5">
<Label htmlFor="full-name">
Full name
<span aria-hidden className="text-destructive">
*
</span>
</Label>
<Input id="full-name" placeholder="Ada Lovelace" />
<p className="text-muted-foreground text-xs">Required field</p>
</div>
);
};
export default LabelRequired;