npm

Label

Label renders an accessible caption tied to a form control.

Installation

pnpm add @viliha/vui-ui

Then import from @viliha/vui-ui/label.

Usage

Associate the label with a control via htmlFormatching the control's id.

label-demo.tsx
import { Label } from "@viliha/vui-ui/label";
import { Input } from "@viliha/vui-ui/input";

export function Example() {
  return (
    <div className="grid gap-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="you@company.com" />
    </div>
  );
}

API Reference

Renders a Radix Label; standard label attributes pass through.

PropTypeDefault
htmlForstring
classNamestring