An accessible text label that pairs with form controls for clear identification and screen reader support.

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

export default function LabelDemo() {
  return (
    <div className="w-full max-w-xs space-y-2">
      <Label htmlFor="username">Username</Label>
      <Input id="username" placeholder="sajadevo" />
    </div>
  );
}

Installation

Usage

import { Label } from "@/components/ui/label";
<Label htmlFor="username">Username</Label>