Label

The React Label component is used to describe a form input like a text field, textarea, select, or any other control that needs an accessible name. It helps users understand what information they need to enter.

It is built on top of React Aria's Label primitive and styled with Tailwind CSS. Use htmlFor with a matching input id when the label and field are separate elements. For example, clicking “Email Address” will focus the email input field.

Installation

npx @tailgrids/cli add label

Anatomy

Import the component and connect it to the control you want to describe.

import { Label } from "@/components/tailgrids/core/label";

export const LabelExample = () => {
  return (
    <TextField className="w-sm">
      <Label htmlFor="email">Email Address:</Label>
      <Input
        id="email"
        type="email"
        placeholder="Enter your email"
        className="w-full"
      />
    </TextField>
  );
};

If your control already wraps the label and field together, you can omit htmlFor and let React Aria handle the association through context.

Examples

With Text Area

Use the Label component with a description-heavy field like TextArea.

Note: When Label is used inside a React Aria field component, the label can be associated through context. For separate elements, provide matching htmlFor and id props.

With Select

Associate the Label with a NativeSelect component.

API Reference

Label

The Label component wraps React Aria's Label and inherits its full prop surface.

Note: id and htmlFor props are automatically provided by the field container. So it is discouraged to set them manually.

Accessibility

• Accessible name: The label provides the accessible name for the associated control, so screen readers can announce what the field is for.
• Label association: Use htmlFor with a matching id when the label and control are separate. If the field is wrapped by a React Aria field component, the association can come from context instead.
• Native semantics: The component renders a native <label> by default, which gives users a larger click target and supports standard form controls.
• Non-native controls: If you are labeling a non-native element, set labelElementType to a non-label element such as span so the markup stays valid.