This article is contributed. See the original author and article here.



Formik is the world’s most popular open-source form library for React and React Native. We can also use this library in our SPFx web part as well to manage form validations. Using this library we don’t have to write custom validations. so let’s start step-by-step implementation.


What is formik?


Formik is a small library that helps us with the these parts: Getting values in and out of form state. Validation and error messages. Handling form submission.

Formik is designed to manage forms with complex validation with ease.

Formik supports synchronous and asynchronous form-level and field-level validation.

Furthermore, it comes with baked-in support for schema-based form-level validation through Yup.

For more details about Fromik refer to the below articles,


Formik official documentation 

Manage Forms In React With Formik 

Formik validation Schema 


SharePoint List Structure


Create a list called Tasks with below fields,


Field Name(Internal name) Field Type
Title (default) Single line of text

Date and Time (Date only)

EndDate Date and Time (Date only)
ProjectName Single line of text
TaskDetails Multiple lines of text


After the creation of the list, we will start to create the SPFx web part.


Formik implementation with SPFx


Open a command prompt
Move to the path where you want to create a project
Create a project directory using:


md react-formik


Move to the above-created directory using:


cd react-formik


Now execute the below command to create an SPFx solution:


 yo @microsoft/sharepoint 


It will ask some questions, as shown below,


Project Setup.png


After a successful installation, we can open a project in any source code tool. Here, I am using the VS code, so I will execute the command:


code .


Now we will install the following packages:


npm i formik
npm i yup
npm i @pnp/spfx-controls-react
npm i @microsoft/sp-dialog


In the end, our output will be like this,





After the successful installation, we will start our form implementation.


1. Create below files


I{webpartname}State.ts inside src/webparts/reactFormik/components

SPService.ts file inside src/webparts/shared/service


In the end, our structure will be looks like this,


Project Structure.png


2. Create a state interface as below inside IReactFormikState.ts.





export interface IReactFormikState {
  projectName?: string;
  startDate?: any;
  endDate?: any;





3. Create a method to create a task inside SPService.ts.





import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import "@pnp/sp/webs";
import "@pnp/sp/site-users/web";
import { Web } from "@pnp/sp/webs";

export class SPService {

    private web;

    constructor(url: string) {
        this.web = Web(url);

    public async createTask(listName: string, body: any) {
        try {
            let createdItem = await this.web.lists
            return createdItem;
        catch (err) {





4. Move to the ReactFormikWebPart.ts. In this, we will pass the current SP context and read site URL from user.





import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import * as strings from 'ReactFormikWebPartStrings';
import ReactFormik from './components/ReactFormik';
import { IReactFormikProps } from './components/IReactFormikProps';
import { sp } from "@pnp/sp/presets/all";

export interface IReactFormikWebPartProps {
  description: string;
  siteUrl: string;

export default class ReactFormikWebPart extends BaseClientSideWebPart<IReactFormikWebPartProps> {

  protected onInit(): Promise<void> {

    return super.onInit().then(_ => {
        spfxContext: this.context

  public render(): void {
    const element: React.ReactElement<IReactFormikProps> = React.createElement(
        context: this.context,
        siteUrl: ? : this.context.pageContext.web.absoluteUrl

    ReactDom.render(element, this.domElement);

  protected onDispose(): void {

  protected get dataVersion(): Version {
    return Version.parse('1.0');

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
          header: {
            description: strings.PropertyPaneDescription
          groups: [
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                PropertyPaneTextField('siteUrl', {
                  label: strings.SiteUrlFieldLabel





5. Move to the ReactFormik.tsx file to render form and validations


yup syntaxs:


1. For string: yup.string().required(‘Required’)

2. For date:‘Required’).nullable()


Related to Formik


1. Fromik has its own handleReset and handleSubmit method so we don not have to manage manually

2. We have to set state value and error message from control so for that I have created a common method


1. In the constructor, we will set the current SP context, bind the service and required methods and initialize the states.

2. Create createRecord() to create task list item using SPService.

3. In the render(), first we will add all the controls like date picker, text field, people picker, and dropdown, etc inside <Formik>.

    then We will set properties as below,

    initialValues – This is one type o state at here we will set empty or null or undefined as an initial level.

    validationSchema – At here we will do validations using yup. so for this, I am creating one const and wills et this constant in this prop.

    onSubmit – At here we will call the method to create a record in the SharePoint list





import * as React from 'react';
import styles from './ReactFormik.module.scss';
import { IReactFormikProps } from './IReactFormikProps';
import { IReactFormikState } from './IReactFormikState';
import { SPService } from '../../shared/service/SPService';
import { TextField } from '@fluentui/react/lib/TextField';
import { Stack, } from '@fluentui/react/lib/Stack';
import { Formik, FormikProps } from 'formik';
import { Label } from 'office-ui-fabric-react/lib/Label';
import * as yup from 'yup';
import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";
import { DatePicker, Dropdown, mergeStyleSets, PrimaryButton, IIconProps } from 'office-ui-fabric-react';
import { sp } from '@pnp/sp';
import { Dialog } from '@microsoft/sp-dialog';

const controlClass = mergeStyleSets({
  control: {
    margin: '0 0 15px 0',
    maxWidth: '300px',

export default class ReactFormik extends React.Component<IReactFormikProps, IReactFormikState> {

  private cancelIcon: IIconProps = { iconName: 'Cancel' };
  private saveIcon: IIconProps = { iconName: 'Save' };
  private _services: SPService = null;

  constructor(props: Readonly<IReactFormikProps>) {
    this.state = {
      startDate: null,
      endDate: null
      spfxContext: this.props.context

    this._services = new SPService(this.props.siteUrl);
    this.createRecord = this.createRecord.bind(this);

  /** set field value and error message for all the fields */
  private getFieldProps = (formik: FormikProps<any>, field: string) => {
    return { ...formik.getFieldProps(field), errorMessage: formik.errors[field] as string }

  /** create record in sharepoint list */
  public async createRecord(record: any) {
    let item = await this._services.createTask("Tasks", {
      TaskDetails: record.details,
      StartDate: record.startDate,
      EndDate: new Date(record.endDate),
      ProjectName: record.projectName,
    }).then((data) => {
      Dialog.alert("Record inseterd successfully !!!");
      return data;
    }).catch((err) => {
      throw err;

  public render(): React.ReactElement<IReactFormikProps> {
    /** validations */
    const validate = yup.object().shape({
      name: yup.string().required('Task name is required'),
      details: yup.string()
        .min('15', 'Minimum required 15 characters')
        .required('Task detail is required'),
      projectName: yup.string().required('Please select a project'),
      startDate:'Please select a start date').nullable(),
      endDate:'Please select a end date').nullable()

    return (
      <Formik initialValues={{
        name: '',
        details: '',
        projectName: '',
        startDate: null,
        endDate: null
        onSubmit={(values, helpers) => {
          console.log('SUCCESS!! :-)nn' + JSON.stringify(values, null, 4));
          this.createRecord(values).then(response => {
        { formik => (
          <div className={styles.reactFormik}>
              <Label className={styles.lblForm}>Current User</Label>
                context={this.props.context as any}
                defaultSelectedUsers={[ as any]}

              <Label className={styles.lblForm}>Task Name</Label>
                {...this.getFieldProps(formik, 'name')} />

              <Label className={styles.lblForm}>Project Name</Label>
                    { key: 'Project1', text: 'Project1' },
                    { key: 'Project2', text: 'Project2' },
                    { key: 'Project3', text: 'Project3' },
                {...this.getFieldProps(formik, 'projectName')}
                onChange={(event, option) => { formik.setFieldValue('projectName', option.key.toString()) }}

              <Label className={styles.lblForm}>Start Date</Label>
                textField={{ ...this.getFieldProps(formik, 'startDate') }}
                onSelectDate={(date) => formik.setFieldValue('startDate', date)}

              <Label className={styles.lblForm}>End Date</Label>
                textField={{ ...this.getFieldProps(formik, 'endDate') }}
                onSelectDate={(date) => formik.setFieldValue('endDate', date)}

              <Label className={styles.lblForm}>Task Details</Label>
                {...this.getFieldProps(formik, 'details')} />

              onClick={formik.handleSubmit as any}
      </Formik >





6. Move to the ReactFormik.module.scss file to add some relaetd CSS.





@import '~office-ui-fabric-react/dist/sass/References.scss';
  .btnsForm {
    background-color: "[theme:themePrimary, default:#0078d7]";
    border-color: "[theme: themePrimary, default: #0078d7]";
    color: "[theme:white, default:white]" ;
    margin-left: 10px;
    margin-top: 10px;
    color: var(--red-color);
    font-size: 10px;
    font-family: 'Light';
    padding: 2px;
  font-size: 15px;
  margin:  5px 0px 5px 0px;





Now serve the application using the below command,


gulp serve


Now test the webpart in SharePoint-SiteURL + /_layouts/15/workbench.aspx.







Find the full source code here.



In this article, we have seen how to implement react formik library in SPFx.

I hope this helps.

Sharing is caring!!




Brought to you by Dr. Ware, Microsoft Office 365 Silver Partner, Charleston SC.

%d bloggers like this: