Label

Overview

Label provides an accessible caption for a form control. It is built on Radix UI Label , which associates the label with its control so that clicking the label focuses the input and screen readers announce the caption when the control is focused.

Associate a label with a control in one of two ways: give the label an htmlFor prop matching the control’s id, or nest the control inside the label. For fields built with Form , use FormLabel instead — it wires up this association automatically.

Usage

Import the component:

import { Label } from "@eqtylab/equality";

Link the label to a control via htmlFor and a matching id:

import { Label, Input } from "@eqtylab/equality";

<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="user@example.com" />
</div>;

Default

Props

Label accepts all standard <label> attributes (including htmlFor) plus className.