Label

Names a control. Written in the village's control type: Iwa capitalises it. Inside a Field, use FieldLabel, which is linked for you.

Installation

npx rasengan-ui add label

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/label.json

Usage

import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
 
export function Terms() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept the terms</Label>
    </div>
  );
}

Villages

The label takes the village's control font, weight, tracking and case: mono capitals in Iwa.

Accessibility

• A <label>: htmlFor names the control with the same id, and a click on the label focuses or toggles it.
• A label next to a disabled control (peer-disabled) or inside a disabled group dims with it.

API reference

The props of <label>, plus className. labelStyles holds its classes, which FieldLabel shares.