SayUI
← Library→ Turn this into a prompt
Input & controls

Form Field

One complete input unit: label, control, placeholder, helper text, and error message.

Also known as input field · form item · labeled input

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Form Field".

Build a form field: persistent <label for> (never rely on placeholder as the label), the input, helper text linked via aria-describedby, and an error message with aria-invalid="true" and aria-live="polite". Error copy must say how to fix it.

Anatomy:
- label: Never skip it. Wire label and control with for/id (or wrapping).
- placeholder: Example text inside the box—not a substitute for the label.
- helper text / hint: Quiet gray copy under the field that explains the rule.
- error message: Validation failure in plain language that says how to fix it.
- required indicator: Red * plus accessible text so it is not color-only.

Preferred API / pattern: `shadcn Form / FormField + Label + Input`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Placeholder-as-label
  • ○Avoid: Error signaled only by a red border
  • ○Avoid: Error text not wired to the input
  • ○Avoid: Validate on every keystroke from the first character
  • ○Avoid: Custom control without label for/id

In plain wordsHow people search for it

“the little label above the text box”“the gray hint inside the box that disappears when I type”“the red line that shows up under a field when I got it wrong”“the small gray help text under an input explaining what it is for”

AnatomyOpen for part names

label
Never skip it. Wire label and control with for/id (or wrapping).
placeholder
Example text inside the box—not a substitute for the label.
helper text / hint
Quiet gray copy under the field that explains the rule.
error message
Validation failure in plain language that says how to fix it.
required indicator
Red * plus accessible text so it is not color-only.

How to write itOpen for stack patterns

Web (HTML/CSS)<label for> + <input aria-describedby>
React + Tailwind + shadcn/uishadcn Form / FormField + Label + Input
SwiftUITextField + labeledContent / Form Section
Ant Design<Form.Item label name rules>

Notes

Highest-frequency mistake: using the placeholder as the only label. Placeholders vanish on type, fail contrast often, and confuse screen readers. Labels stay visible. Error copy should say how to fix (“Password needs 8+ characters”) not just “Invalid.” Ant Design Form.Item wires label, error, and required for you; hand-rolled fields must reconnect every piece.

Common mistakesHumans and models trip here

  • Placeholder-as-label: accessibility and conversion both take a hit.
  • Error signaled only by a red border: color-blind users miss it—include text.
  • Error text not wired to the input: use aria-describedby so AT hears the problem.
  • Validate on every keystroke from the first character: wait for blur, then update live as they fix it.
  • Custom control without label for/id: clicking the label never focuses the field.

More failure symptoms on AI broke it.

Related patterns

Select / ComboboxA form control for choosing one (or more) options from a list.Focus Ring / Focus IndicatorThe outline that shows where keyboard focus is—the mouse pointer for keyboard users.Alert / BannerAn in-page, persistent status strip—four severities, never traps the user in a dialog.

Spotted a wrong name or missing pattern?

Message on X