formik-pf

Formik PF

A UI library that provides bindings for using Formik with Patternfly.

Demo

Installation

Install dependencies

Using npm

npm install formik-pf

Using yarn

yarn add formik-pf

Setup Patternfly CSS

Import css from patternfly before importing components from formik-pf.

import '@patternfly/react-core/dist/styles/base.css'

Form Field Example

A form field is a PF form component wrapped around formik form context. The field component just needs the path to formik context and it can automatically connect to the values, errors and validation states for that path.

import { Form, Button } from '@patternfly/react-core';
import { Formik } from 'formik';
import { InputField } from 'formik-pf'

const ExampleForm = () => {
  return (
    <Formik
      initialValues={{ name: '' }}
      onSubmit={(values) => console.log(values)}
    >
      {({ handleSubmit }) => (
        <Form onSubmit={handleSubmit}>
          <InputField name="name" label="Name" type="text" placeholder="Enter your name" />
          <Button type="submit">Submit</Button>
        </Form>
      )}
    </Formik>
  );
};

This project requires Formik>= 2.0.0.