Forms

Field lays out a label, control, help text and error. This pattern wires it to react-hook-form and zod so every field validates the same way. Submit with everything empty to see the errors.

Installation

npm install react-hook-form zod @hookform/resolvers

How it works

• Each field is a Controller rendering Field. When it's invalid, data-invalid on the Field and aria-invalid on the control turn on the error style, and FieldError shows the message from the schema.
• The error replaces the help text, so the field doesn't grow two lines.
• Base UI's Select takes its options as items; the item with value: null is the placeholder. Map an empty form value to null and back.
• On success, a Toast confirms it. Errors never go in a toast.

Guidelines

• Write error messages as what to do ("Enter a work email, like name@company.lk."), not what's wrong ("Invalid input").
• Validate on submit, then live on the fields that failed. Don't show errors while someone is still typing their first attempt.
• Primary action last and brand if it's the view's main action; Cancel is outline. While submitting, disable it and change the label ("Adding employee").
• One column. Group long forms with FieldSet and FieldLegend, or split them into steps.