Form Field component

[kpyszkowski]

Overview:

Universal Form Field component to be defined as input, checkbox, radio or textarea.

Structure schema:

Features

• Controlled or uncontrolled
• Multi purpose
• Flexible and customizable component API
• Accessible

[kpyszkowski]

To do:

• [x] implement component
• [x] improve Storybook story
• [x] research on performance (prevent re-renders, probably ref should be used instead of state) ¹
• [x] research on a11y ²

Chores:

• [ ] add JSDoc
• [ ] add Storybook docs page

Notes

1. In fact re-renders are unavoidable when input is controlled due to onChange event handler, with use of refs re-renders are gone 🎉 and that the most common use case especially with form libraries (React Hook Form, Formik, etc)
2. No extra aria attributes required, also no need to bind the label with input (for/id pair) since the input is nested into label so input inherits binding that way

[kpyszkowski]

Props:

• Container:

  • id - optional: string
  • name - optional: string
  • type - optional : HTMLInputTypeAttribute | textarea
    • Controlled input:
      • ref - optional: React.Ref
        • Uncontrolled input:
      • value - optional: string
      • onChange - optional: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>

• Label:

  • any valid attributes

• Input:

  • any valid attributes - typings for HTML native elements HTMLInputElement or HTMLTextAreaElement