Fields, selects and textareas

Purpose and placement

Make editorial inputs understandable before entry and recoverable after errors.

Anatomy

Configuration and contract

States and feedback

• Editable input/select/textarea, read-only and disabled captures.
• Focused input capture shows native focus styling.
• Invalid and server errors require an explicit caller contract.

Usage rules

• Use a visible label; placeholders cannot replace it.
• Use descriptions for editorial guidance, not field names.
• Keep invalid values so editors can correct them.
• Choose disabled for unavailable editing and readOnly for inspectable values; they behave differently during form submission.

Accessibility and verification

The wrapped label helps name the input, but descriptions and errors need programmatic association where relevant. Review required, invalid and busy semantics rather than inferring them from color.

Composition example

<AdminField label="Story title" description="Keep the local context clear.">
  <AdminInput name="title" defaultValue={story.title} required />
</AdminField>

Source references