semantic-ui-react-formik

Creating great forms with formik and Semantic UI React

Install

npm install --save semantic-ui-react-formik

Usage

Basic usage

import React, { Component } from 'react'
import { Wizard } from "semantic-ui-react-formik";
import FirstPage from "./FirstPage";
import SecondPage from "./SecondPage";

const MyForm = ({ onSubmit }) => (
  <Wizard
    initialValues={{
      firstName: "",
      lastName: "",
      email: "",
      favoriteColor: "",
      choice: ""
    }}
    onSubmit={onSubmit}
  >
    <Wizard.Page>
      <FirstPage />
    </Wizard.Page>
    <Wizard.Page>
      <SecondPage />
    </Wizard.Page>
  </Wizard>
);

export default MyForm;

Customizing the form's button labels

const MyForm = ({ onSubmit }) => (
  <Wizard
    buttonLabels={{
      previous: "PREVIOUS",
      next: "NEXT",
      submit: "SUBMIT"
    }}
  >
    ...
  </Wizard>
);

Customizing the form's button labels on a specifig page

const MyForm = ({ onSubmit }) => (
  <Wizard>
    <Wizard.Page
      buttonLabels={{
        next: "NEXT",
      }}
    >
      <FirstPage />
    </Wizard.Page>
    <Wizard.Page
      buttonLabels={{
        previous: "PREVIOUS",
        submit: "SUBMIT"
      }}
    >
      <SecondPage />
    </Wizard.Page>
  </Wizard>
);

Example

To run examples

cd path/to/semantic-ui-react-formik
npm start

Open a second shell and execute:

cd path/to/semantic-ui-react-formik/examples/example1
npm start

Screenshots from included example1:

• Wizard page 1

• Wizard page 2

• Wizard page 3

• Wizard page 3 with input errors

License

MIT © jabberbees