Label

The Label component is used to provide a descriptive label for form fields. It is built on top of React Aria to ensure accessibility.

Email Address:

Installation

Install the component using the Tailgrids CLI.

npx @tailgrids/cli add label

Import the component and pass the required props.

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

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

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

Your Message

Associate the Label with a NativeSelect component.

Country

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply to the label.
`children`	`ReactNode`	-	The content to be displayed within the label.

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

Semantic HTML: The component renders a <label> element.
Form Association: Use the htmlFor prop to link the label to a form control's id. This ensures that clicking the label focuses the control and screen readers announce the label correctly.
Support for React Aria: Since it extends React Aria's Label, it integrates seamlessly with other React Aria components and hooks for advanced accessibility patterns.