Controlled Components

All forms must use React Hook Form for state management and validation. Form fields must be implemented as reusable, controlled components that integrate seamlessly with React Hook Form's context.

Rules

• Reusable form fields: Build input components (e.g., TextField, SelectField, CheckboxField) as controlled components tied to React Hook Form.
• SOLID-compliant: Each form field component must follow single responsibility—handle form logic only, not styling or layout.
• Style flexibility: Components must be designed to accept class names, wrappers, or style overrides so they can adapt to different design systems (e.g., Tailwind, MUI).
• React Hook Form context: Do not pass control, setValue, watch, or similar props manually. Use useFormContext to access them within the form field.

Guidelines

• The component owns field registration and validation logic.
• The parent form provides layout, spacing, and styling.
• Each component must accept name, label, and validation-related props.
• Errors must be displayed consistently via the component.

Example (concept)

• A reusable TextField component connects an input to React Hook Form, handles validation, and shows errors.
• Inside a FormProvider, you can use multiple TextField components without extra wiring.
• This guarantees forms are consistent, reusable, and maintainable, while leaving design choices flexible.

---