Description

The Description component is designed to provide detailed information about input elements in a clean and accessible way. It can be used to enhance the user experience by offering additional context or instructions for form fields.

Installation

npx @tailgrids/cli add description

Usage

Import the component and compose it with your field components.

import { Input } from "@/components/tailgrids/core/input";
import { TextField } from "@/components/tailgrids/core/input";
import { Label } from "@/components/tailgrids/core/label";
import { Description } from "@/components/tailgrids/core/description";

export default function InputPreview() {
  return (
    <TextField className="grid gap-2">
      <Label>Email</Label>
      <Input type="email" placeholder="Enter your email" autoComplete="email" />
      <Description>
        We will never share your email with anyone else.
      </Description>
    </TextField>
  );
}

Examples

With Field Container

Compose the Description component within a field container with a Label and input element for a complete form field.

Without Field Container

Provide id and aria-describedby props to the Description and input components to associate them without a field container.

Note: When using within a field container, the Description component is automatically connected to the context. No need to manually set id or aria-describedby props.

API Reference

Description

The Description component wraps React Aria's Text component and inherits its TextProps surface.

Accessibility

• Use Description for supporting helper text, hints, or brief instructions tied to an input.
• When the component is inside a React Aria field container, it is linked to the control automatically through the description slot.
• If you render it outside a field container, connect it with aria-describedby on the associated control.