Forms

Forms are a central feature of the portals — employees fill out onboarding documents, competency tests, and compliance paperwork directly in the browser.

Two Approaches

Approach	When used	Library
Formik + Yup	Most forms (controlled, validated, step-by-step)	formik, yup
React Hook Form	Lightweight / performance-sensitive forms	react-hook-form

Dynamic Form Rendering

The API returns a field schema (JSON) for each assignable form. The SPA has a generic form renderer (in src/components/Forms/) that maps field types to Chakra UI inputs:

Field type	Component
text	Input
textarea	Textarea
select	ChakraReactSelect
date	Input type="date"
checkbox	Checkbox
signature	Signature pad
file	Dropzone

Validation

Yup schemas are either:

• Static — hand-written for known forms (e.g. login, registration)
• Dynamic — generated from the API's field schema (required, min, max, pattern etc.)

File Uploads

src/components/Dropzone/ wraps a file input with drag-and-drop. Uploads go directly to the API which proxies to S3, returning the S3 key to store on the record.

Input Masking

react-imask handles formatted inputs: SSN (XXX-XX-XXXX), phone numbers, dates.