Refactor forms to use React Hook Form wrapper components

[Copilot]

Replaced manual Controller usage with RHF wrapper components across 11 form files to eliminate boilerplate and ensure consistency.

Changes

New RHF wrapper components (components/rhf-inputs/):

• CheckboxField - Checkbox with Field structure and horizontal layout
• RadioGroupField - RadioGroup with option array rendering
• SliderField - Slider with optional value display/formatting
• SwitchField - Switch with horizontal card layout
• index.ts - Centralized exports

Refactored forms:

• Quiz generation and editing forms (QuizForm, quiz-settings, question-item, multiple-choice-form)
• AI generation dialogs (ai-quiz-generation-dialog, ai-question-generation-dialog)
• Profile forms (password-form, profile-form)
• Candidate/interview forms (candidate-new-form, candidate-selection-form, quiz-selection-form)

Before/After

Before:

<Field>
  <FieldLabel htmlFor={id}>Name</FieldLabel>
  <FieldContent>
    <Controller
      control={control}
      name="name"
      render={({ field, fieldState }) => (
        <Input {...field} />
      )}
    />
  </FieldContent>
  <FieldError errors={fieldState.error ? [fieldState.error] : undefined} />
</Field>

After:

<InputField
  control={control}
  name="name"
  label="Name"
/>

Impact

• -416 net lines across modified files (-43% reduction)
• Consistent error handling and validation patterns
• Simplified form creation for future development

Original prompt

use the #file:rhf-inputs inputs in all the attached files to replace existing inputs like Input, Textarea, Select etc..., create new ones if missing for example for Radios, Checkboxes, Sliders etc..

The user has attached the following file paths as relevant context:

• components/rhf-inputs
• app/dashboard/positions/[id]/quiz/new/QuizForm.tsx
• app/dashboard/quizzes/[id]/edit/components/ai-question-generation-dialog.tsx
• app/dashboard/quizzes/[id]/edit/components/ai-quiz-generation-dialog.tsx
• app/dashboard/quizzes/[id]/edit/components/question-item.tsx
• app/dashboard/quizzes/[id]/edit/components/questions-list.tsx
• app/dashboard/quizzes/[id]/edit/components/quiz-settings.tsx
• app/dashboard/quizzes/[id]/edit/hooks/use-ai-generation.ts
• app/dashboard/quizzes/[id]/edit/hooks/use-edit-quiz-form.ts
• components/candidates/candidate-new-form.tsx
• components/interview/candidate-selection-form.tsx
• components/positions/edit-position-form.tsx
• components/positions/new-position-form.tsx
• components/profile/password-form.tsx
• components/profile/profile-form.tsx
• components/quiz/quiz-selection-form.tsx
• components/quiz/question-types/multiple-choice-form.tsx
• .github/copilot-instructions.md

Created from VS Code.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
dev-recruit	Ready	Preview	Comment	Nov 20, 2025 10:28pm