semantic-ui-react-formik

Creating great forms with formik and Semantic UI React

Usage no npm install needed!

<script type="module">
  import semanticUiReactFormik from 'https://cdn.skypack.dev/semantic-ui-react-formik';
</script>

README

semantic-ui-react-formik

Creating great forms with formik and Semantic UI React

NPM JavaScript Style Guide

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