Formik-material-fields NPM

formik-material-fields

A set of material style fields for formik

formik-material-fields = formik + material-ui

This library provides the following components:

FormikTextField
FormikSelectField
FormikRadioField
FormikRadioGroupField
FormikCheckboxField
FormikCheckboxGroupField
FormikSwitchField

Documentation

Installation

Using npm:

$ npm install --save formik-material-fields

Using yarn:

$ yarn add formik-material-fields

Usage

import React, { Component } from 'react';
import { Formik, Form } from 'formik';
import * as Yup from 'yup';
import { FormikTextField } from 'formik-material-fields';

const validationSchema = Yup.object().shape({
  username: Yup.string().required(),
});

const initialValues = {
  username: '',
};

class MyForm extends Component {
  render() {
    return (
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={this.props.onSubmit}
      >
        {({ isValid }) => (
          <Form autoComplete="off">
            <FormikTextField
              name="username"
              label="Username"
              margin="normal"
              fullWidth
            />
          </Form>
        )}
      </Formik>
    );
  }
}