nicstrong/formik-stardust-ui

Wrappers for using Formik with Stardust UI React .

Wrappers for using Formik with Fluent UI - React Northstar.

Introduction

Combine a Form.Field and control in a single control managed by Formik.

Wrappers exist so far for:

• Input - FormikInputFormField
• Checkbox - FormikCheckboxFormField
• Dropdown - FormikDropdownFormField
• RadioGroup - FormikRadioGroupFieldProps

There is also FormikInputFormField for file upload but that is not a React Northstar control.

Example

import { Button, Flex, Form } from '@fluentui/react-northstar';
import { Formik } from 'formik';
import { FormikCheckboxFormField, FormikDropdownFormField, FormikInputFormField } from 'formik-stardust-ui';
import React from 'react';

 <Flex styles={{ padding: '1rem', width: '600px' }}>
      <Formik initialValues={{ firstname: '', lastname: '', conditions: false, colour: 'Red' }}>
        {(formik) => {
          return (
            <Form  onSubmit={(e) => formik.handleSubmit(e as React.FormEvent<HTMLFormElement>)} >
            <Flex gap='gap.medium' fill column>
              <FormikInputFormField fluid label="First name" name="firstname" />
              <FormikInputFormField fluid label="Last name" name="lastname" />
              <FormikDropdownFormField
                      label='Favourite Colour'
                      name='colour'
                      placeholder='Choose your colour'
                      items={['Red', 'Green', 'Blue']} />
              <FormikCheckboxFormField inline label="I agree to the Terms and Conditions" name="conditions" />
              <Flex gap="gap.smaller" hAlign="end">
                <Form.Field
                  control={{
                    as: Button,
                    primary: true,
                    content: 'Submit'
                  }}
                />
              </Flex>
            </Flex>
          </Form>
        )}}
      </Formik>
    </Flex>