Form — codefast/ui

Form

React Hook Form integration with accessible label, description, and error message binding.

Source npm

Install

pnpm add @codefast/ui

Import path

@codefast/ui/form

Examples

Contact form

Field + Textarea with inline validation and a helper.

Anatomy

How the parts compose. Copy this skeleton and fill in the slots.

import { Field, FieldLabel, FieldError } from "@codefast/ui/field";

<form onSubmit={handleSubmit}>
  <Field>
    <FieldLabel htmlFor="email">Email</FieldLabel>
    <Input id="email" aria-invalid={invalid} />
    {invalid && <FieldError>…</FieldError>}
  </Field>
  <Button type="submit">Submit</Button>
</form>

API reference

Props for each part of the component. All native element props are also forwarded.

Form (react-hook-form)

The Form parts bind react-hook-form to accessible Field markup. Pair Form / FormField with useForm; the example here uses plain state + Field to stay dependency-free.

Prop	Type	Default	Description
FormField	{ control, name, render }	—	Connects a control to RHF and wires label, description, and error ids.
FormMessage	ReactNode	—	Renders the field’s validation error from RHF state.

Accessibility

Built to be keyboard-navigable and screen-reader friendly out of the box.

Associate every control with a label, and link errors via aria-describedby.
Set aria-invalid on a control when its value fails validation.
Validate on submit (and optionally on blur) — show errors as text, not only colour.

Guidelines

Conventions that keep usage consistent across an app.

Keep forms short; group related fields with Field / FieldSet.
Show a clear success state after submit.

Don’t

Don’t validate aggressively on every keystroke before first submit.
Don’t rely on placeholder text instead of labels.