Formik recipe

Code

import { FormikErrors, useFormik } from 'formik';
import { Form } from '@ef-global/backpack/Form';
import { FormInput } from '@ef-global/backpack/FormInput';
import { Button } from '@ef-global/backpack/Button';
import { FormSwitch } from '@ef-global/backpack/FormSwitch';
import axios from 'axios';
import React, { useState } from 'react';
import {
  FormRadio,
  FormRadioGroup,
  FormRadioTile,
} from '@ef-global/backpack/FormRadio';
import { FormSelect, Option } from '@ef-global/backpack/FormSelect';
import { FormPhoneInput } from '@ef-global/backpack/FormPhoneInput';
interface FormFields {
  firstName: string;
  switch: 'off' | 'on';
  radios: '' | 'radio1' | 'radio2' | 'radio3';
  tiles: '' | 'tile1' | 'tile2' | 'tile3';
  select: string;
  phone: string;
}
export const FormikRecipe = () => {
  const [result, setResult] = useState(null);
  const formik = useFormik({
    initialValues: {
      firstName: '',
      switch: 'off',
      radios: '',
      tiles: '',
      select: '',
      phone: '',
    },
    validate: (values: FormFields) => {
      let errors: FormikErrors<FormFields> = {};
      if (!values.firstName) {
        errors.firstName = 'Required';
      }
      if (!values.switch || values.switch === 'off') {
        errors.switch = 'Required';
      }
      if (!values.radios) {
        errors.radios = 'Required';
      }
      if (!values.tiles) {
        errors.tiles = 'Required';
      }
      if (!values.select) {
        errors.select = 'Required';
      }
      if (!values.phone) {
        errors.phone = 'Required';
      }
      return errors;
    },
    onSubmit: async (values) => {
      await axios
        .post('/api/form-tester', values)
        .then((res) => setResult(JSON.stringify(res.data, null, 2)));
    },
  });
  return (
    <>
      <Form onSubmit={formik.handleSubmit}>
        <FormInput
          type={'text'}
          name={'firstName'}
          placeholder={'First name'}
          onChange={formik.handleChange}
          value={formik.values.firstName}
          valid={!Boolean(formik.errors.firstName)}
        />
        <br />
        <FormSwitch
          name={'switch'}
          checked={formik.values.switch === 'on'}
          onCheckedChange={async (checked) =>
            formik.setFieldValue('switch', checked ? 'on' : 'off')
          }
          value={formik.values.switch}
          valid={!Boolean(formik.errors.switch)}
        />
        <br />
        <FormRadioGroup
          name={'radios'}
          onValueChange={async (value) => formik.setFieldValue('radios', value)}
        >
          <FormRadio value={'radio1'}>radio 1</FormRadio>
          <FormRadio value={'radio2'}>radio 2</FormRadio>
          <FormRadio value={'radio3'}>radio 3</FormRadio>
        </FormRadioGroup>
        <br />
        <FormRadioGroup
          name={'tiles'}
          onValueChange={async (value) => formik.setFieldValue('tiles', value)}
          tile
          stack
        >
          <FormRadioTile value={'tile1'} valid={!Boolean(formik.errors.tiles)}>
            tile 1
          </FormRadioTile>
          <FormRadioTile value={'tile2'} valid={!Boolean(formik.errors.tiles)}>
            tile 2
          </FormRadioTile>
          <FormRadioTile value={'tile3'} valid={!Boolean(formik.errors.tiles)}>
            tile 3
          </FormRadioTile>
        </FormRadioGroup>
        <br />
        <FormSelect
          placeholder={'Select'}
          name={'select'}
          valid={!Boolean(formik.errors.select)}
          onValueChange={async (value) => formik.setFieldValue('select', value)}
        >
          <Option value={'1'}>1</Option>
          <Option value={'2'}>2</Option>
          <Option value={'3'}>3</Option>
          <Option value={'4'}>4</Option>
        </FormSelect>
        <br />
        <br />
        <FormPhoneInput
          name={'phone'}
          floatingLabel={'Phone'}
          valid={!Boolean(formik.errors.phone)}
          onValueChange={async (value) => formik.setFieldValue('phone', value)}
        />
        <br />
        <br />
        <Button as={'button'} type={'submit'} variant={'primary'}>
          Submit
        </Button>
      </Form>
      {result && (
        <>
          <h5 style={{ marginBottom: 0 }}>Result:</h5>
          <pre style={{ marginTop: 10 }}>{result}</pre>
        </>
      )}
    </>
  );
};
Headline React Hook Form