Package Exports

formik-pf
formik-pf/dist/cjs/index.js
formik-pf/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (formik-pf) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Formik PF

version

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.