HextaUI

Field: Input

A label, a control and a description. Clicking the label focuses the input, and screen readers read the description after the label.

Shown on your profile. You can change it once a month.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldInput() {
  return (
    <Field className="max-w-sm">
      <FieldLabel>Username</FieldLabel>
      <Input placeholder="ada" autoComplete="username" />
      <FieldDescription>
        Shown on your profile. You can change it once a month.
      </FieldDescription>
    </Field>
  )
}

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

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

To add only the component, follow the Field installation.

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