Field

frontend-react/src/components/ui/Field.tsx

Form field wrapper that pairs a <label> with an input, shows required marker and inline error.

Props

Prop	Type	Description
label	string	Label text
required	boolean	Appends * to label
error	string	Inline error below input (role="alert")
children	ReactNode	The input element

Usage

<Field label="Email" required error={errors.email}>
  <input type="email" id="email" />
</Field>

Notes

• Auto-generates htmlFor/id from label if not provided
• Error node uses role="alert" for screen reader compatibility