Field

Field is layout only. It generates no id, htmlFor or aria-describedby for you — associating a label, a description and an error message with its control is the consumer's job, and every example below does it explicitly.

Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

npx shadcn@latest add @dr-ui/field

Accessibility

Wire every field by hand:

• Give the control an id and point FieldLabel at it with htmlFor. A placeholder is not a label: it is a weak fallback for the accessible name and it disappears as soon as the user types.
• Give FieldDescription and FieldError an id and list those ids in the control's aria-describedby (space-separated when both are present).
• Set aria-invalid='true' on the control while it is invalid. FieldError renders role='alert', so the message is announced when it appears; aria-describedby is what keeps it available as the field's description afterwards.

<Field data-invalid='true'>
  <FieldLabel htmlFor='password'>Password</FieldLabel>
  <Input
    id='password'
    type='password'
    aria-invalid='true'
    aria-describedby='password-error'
  />
  <FieldError id='password-error'>
    Password must be at least 8 characters.
  </FieldError>
</Field>

Inside a reusable component, generate the ids with React's useId instead of hardcoding them.