104Get started
HextaUI

Input: With a description

Point aria-describedby at the helper text so screen readers read it after the label.

Shown on your profile and in mentions.

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function InputDescription() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="input-username">Username</Label>
      <Input
        id="input-username"
        autoComplete="username"
        placeholder="preet"
        aria-describedby="input-username-description"
      />
      <p
        id="input-username-description"
        className="text-sm text-muted-foreground"
      >
        Shown on your profile and in mentions.
      </p>
    </div>
  )
}

Add this example

This adds the example as components/examples/input/description.tsx, together with the Input component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/input-description.json

To add only the component, follow the Input installation.

More Input examples

See them all, with keyboard support and accessibility notes, on the Input page.

Related components