custom <Form /> Component implement?

[MrKou47]

Hi!I like this low-level UI component library,it' a good idea.and would you implement some component like <Input /> or <Form /> ?

[colmtuite]

Hey,

What kind of things would you like us to provide for <Input />? Why can't you just style an <input type="text"> with CSS? What else can we do to improve the experience?

[benoitgrelard]

@jjenzz had some ideas I think around providing our own Form with built-in error handling, etc.

[MrKou47]

I was not found the <Form /> component in the document,so i would like to ask you have any plan to realize the <Form /> component with built-in value validator, error handling or other form feature?

[jjenzz]

@MrKou47 We don't have a Form component at the moment but it is something I would like us to provide if the rest of the team agrees.

@colmtuite A custom Form with custom Input etc. components would allow us to provide:

• Custom accessible validators
• A bunch of perf benefits (like react-hook-form)
• onChange and onSubmit events that have form data as JSON object, including fieldset groups. So with the following form:

  <Form onSubmit={event => console.log(event.detail)}>
  	<Input name="fullName" />
  	<Form.Group name="address">
  		<Input name="firstLine" />
  		<Input name="secondLine" />
  		{/* ... */}
  	</Form.Group> 
  </Form>

  your log output would be:

   { fullName: '', address: { firstLine: '', secondLine: '', ... } }
  

• A proper onChange event for Form. React's onChange is actually onInput which is why so many forms on the web scream at you about errors before you've even had the chance to type.
• We'd be able to reduce the bundle size of a bunch of our form control components like Checkbox, RadioGroup etc. because they would only need to work with our Form.
• And more I probably haven't thought of...

Here's a sandbox I was playing with before I started at Modulz: https://codesandbox.io/s/form-components-6gdck?file=/src/index.js

I'd love to clean it all up and make it available in Radix.