Getting Started

MUI Form Fields was developed by ZeroSoft to help us build lots of forms to our clients with ease. We based ourselves on Material UI and made the most so we can build a form with the minimum amount of code possible.

You can make questions, propose improvements and changes on our repository here

Installation

Install all of MUI Form Fields Peer Dependencies

 
npm i --save @date-io/core@^1.3.6 @date-io/moment@^1.3.6 @material-ui/core@^4.1.0 @material-ui/icons@^4.1.0 classnames@^2.2.6 core-js@^3.1.3 css-vendor@^2.0.2 final-form@^4.13.1 is-plain-object@^3.0.0 jss moment@^2.24.0 react@>=16.8.6 react-dom@>=16.8.6 react-dropzone@^10.1.5 react-final-form@^6.0.1 react-select@^3.0.4 react-number-format@^4.0.8

Then install MUI Form Fields

 
npm i --save mui-form-fields

Usage

This Form Components are primarily based on Final Form, you can take a look into their documentation for more advanced instructions.

You'll always need a <Form> component wrapping our Form Fields, so as long as you have a code like this:

 
<Form
  render={() => {
    return <FormTextField icon="person" name="name" label="Name" />
  }}
/>

This way you may just start importing our components and play around with a combination of them:

 
import {
  FormDateField,
  FormDialog,
  FormFileUploadField,
  FormPhoneField,
  FormSwitchField,
  FormTextField,
} from 'mui-form-fields';
​
// Do your magic here...

 
<Form
  render={() => {
    return (
      <>
        <FormTextField
          icon="person"
          name="name"
          label="Name (min: 3 characters)"
          validate="required | min:3"
        />
        <Divider />
        <FormTextField
          icon="mail"
          name="email"
          label="Email"
          validate="required | email"
        />
        <FormSwitchField icon="security" name="protected" label="Protected" />
      </>
    )
  }}
/>

Examples

Even complex dialogs can be mounted as easily as:

 
<ToggleButton
  text="Open Dialog"
  variant="contained"
  color="primary"
  render={(open, setOpen) => {
    // The really important code:
    return (
      <FormDialog
        size="sm"
        title="Create User"
        onClose={() => setOpen(false)}
        onSubmit={async (...args) => {
          return new Promise(resolve => {
            setTimeout(() => {
              resolve()
              setOpen(false)
            }, 2000)
          })
        }}
        open={open}
        dividers
      >
        <FormTextField icon="person" name="name" label="Full Name" />
        <FormTextField icon="mail" name="email" label="Email" />
        <FormPhoneField name="phone" label="Phone" />
        <FormDateField icon="today" name="birthday" label="Birthday" />
        <FormSwitchField icon="security" name="protected" label="Protected" />
        <FormSwitchField icon="verified_user" name="admin" label="Admin" />
        <FormFileUploadField
          icon="attachment"
          name="identification"
          label="Social Security"
        />
      </FormDialog>
    )
  }}
/>