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.