Label

The React Label component is used to describe a form input like a text field, textarea, or select. It helps users understand what information they need to enter.

It is linked to an input using the htmlFor and id props, so clicking the label focuses the input. For example, clicking “Email Address” will focus the email input field.

Built with React Aria and styled using Tailwind CSS. It supports accessibility and works well with all form components.

Installation

npx @tailgrids/cli add label

Anatomy

Import the component and pass the required props.

import { Label } from "@/registry/core/label";

export const LabelExample = () => <Label htmlFor="input-id">Label Text</Label>;

Examples

With Text Area

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

With Select

Associate the Label with a NativeSelect component.

API Reference

Label

Note: Label also inherits all props from react-aria-components's LabelProps.

Accessibility

• Label association: Use the htmlFor prop to connect the label to a form input using its id. This ensures clicking the label focuses the input.
• Screen reader support: The label provides a clear name for the input, so screen readers can describe what the field is for.
• Clickable area: Users can click the label to focus the input, making forms easier to use.
• Semantic structure: The component renders a native <label> element, which works with all standard form controls.