Forms

Use the canonical Field, Input and Button components. React Hook Form owns the form values, and Zod validates the data before submission.

InstallCopy Anchor Link

Complete Installation, then add the controls:

npx shadcn@latest add https://hextech-ui.vercel.app/r/field.json

npx shadcn@latest add https://hextech-ui.vercel.app/r/button.json

npx shadcn@latest add https://hextech-ui.vercel.app/r/alert.json

The Field registry item also installs Input. Add the form dependencies separately:

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

Profile formCopy Anchor Link

Submit an empty name to see client validation. Enter taken to simulate a server validation error. Enter another name to complete the local submission, or reset the form. No account or backend is connected.

Values and validationCopy Anchor Link

Controller supplies the Input value, change handler, blur handler and focus ref. Keep a default value for every controlled field. Avoid registering the same input with both Controller and register.

Pass the external error state to Field with invalid, and render the message through FieldError. FieldLabel and FieldDescription remain associated with the input. The canonical Field keeps an 8px label-to-control gap in both themes.

Submission and server errorsCopy Anchor Link

Replace the local delay with your own request. Validate the data again on the server. Use setError to show a returned field error and shouldFocus to focus its input. Catch network failures and show a clear form-level message; retain the user's values so they can retry.

The submit Button uses loading={form.formState.isSubmitting} to prevent repeated activation and announce pending work. Keep other destructive or reset actions disabled while submitting. Show success only after the request succeeds.

ResetCopy Anchor Link

form.reset() restores the declared defaults and clears form errors and dirty state. Reset any separate success message at the same time. When loading another record, supply its values to reset(record) instead of switching between controlled and uncontrolled input state.

Group related controlsCopy Anchor Link

Use Fieldset for a shared legend, FieldGroup for layout, and Checkbox Group for shared selection. Input Group adds text or buttons to an input; Button Group groups actions without introducing toolbar arrow-key behavior.

This form combines them with the same validation and submission ownership. Clearing the name or all roles shows field errors. Reset restores the defaults.

npx shadcn@latest add https://hextech-ui.vercel.app/r/fieldset.json

npx shadcn@latest add https://hextech-ui.vercel.app/r/checkbox-group.json

npx shadcn@latest add https://hextech-ui.vercel.app/r/input-group.json

npx shadcn@latest add https://hextech-ui.vercel.app/r/button-group.json

See the official React Hook Form documentation, Zod guide and Base UI forms handbook for the underlying contracts.