Frontendx
README.md
SOLUTION.md
main.tsxentry
App.tsx
App.css
index.html
vite.config.ts
Installed
react@^19.2.0
react-dom@^19.2.0

Create a Reusable Extensible Generic Form Component Library in React — Declarative Form Builder with Validation Touched State and Custom Field Support

Prompt

Create a reusable and extensible Generic Form Component Library in React that allows developers to compose complex forms declaratively. The library must support: controlled and uncontrolled behavior per field (switchable at runtime), synchronous and asynchronous field-level validation, form-level cross-field validation, error reporting with touched/dirty tracking (only show errors after a field is touched), preventing submission when validation fails, resetting individual fields or the entire form, scaling to large forms with many fields, and being extensible enough to support custom field types beyond standard inputs. Build components: <Form>, <Field>, <FieldError>, <Submit>. Use React Context to share form state internally. This was asked in Rippling's SSE (Senior Software Engineer) frontend interview.

Create FormContext to share state (values, errors, touched) across Field and Submit components.
Test Results

Create a Reusable Extensible Generic Form Component Library in React — Declarative Form Builder with Validation Touched State and Custom Field Support

Create a reusable and extensible Generic Form Component Library in React that allows developers to compose complex forms declaratively. The library must support: controlled and uncontrolled behavior per field (switchable at runtime), synchronous and asynchronous field-level validation, form-level cross-field validation, error reporting with touched/dirty tracking (only show errors after a field is touched), preventing submission when validation fails, resetting individual fields or the entire form, scaling to large forms with many fields, and being extensible enough to support custom field types beyond standard inputs. Build components: <Form>, <Field>, <FieldError>, <Submit>. Use React Context to share form state internally. This was asked in Rippling's SSE (Senior Software Engineer) frontend interview.