Skip to main content

Introduction

Forms and React​

Using them together always mean a lot of boiler plate before you're ready to start coding your forms.

Here comes Concrete Form​

Concrete Form renders the most commonly used form controls using the UI kit of your choice and registers them automatically on the form library of your choice.

  • We render the controls
  • We register the controls on the form library
  • We display the errors
  • We help you to translate the validation errors
  • We help you with unit tests

Example​

React Hook Form with Material-UI

import Form from '@concrete-form/react-hook-form'
import Input from '@concrete-form/mui/Input'
import SubmitButton from '@concrete-form/mui/SubmitButton'

const Demo = () => (
  <Form onSubmit={data => alert(data.name)}>
    <Input name="name" label="Enter your name" margin="normal" />
    <SubmitButton fullWidth>Submit</SubmitButton>
  </Form>
)

Try it on CodeSandbox

<Form>​

  • Render an HTML <form> element
  • Can accept an existing form created with useForm() or we'll create it for you

<Input> + <SubmitButton>​

  • Render a MUI TextField and a MUI Button
  • Since it's inside <Form>, "name" input is registered automatically on React Hook Form.
  • Errors are displayed automatically

Available implementations​

Form libraries​

UI Kits​

Can I customize my form ?​

Yes!

By choosing Concrete Form controls, you'll be saving time since all controls work out of the box, although it's still possible to create your own control.

  • You can instanciate the form yourself and use any settings that you want
  • You can provide parameters when registering the field on the form
  • We make no design decision and you can customize 100% of the UI