DEV Community

How to implement a working checkbox component in Formik 1.5.8

Tyler Smith on October 20, 2019

I was building a form with Formik and I needed a single checkbox to mark a post as "published". In Formik 1.5.8, my values values weren't mapping c...

Read full post

Alex Whinfield • Feb 8 '20

Working great thank you, I'm using it with TypeScript so here is my component for anybody that may be interested.

import React from "react";
import { Field, FieldProps } from "formik";

interface Props {
  id: string;
  name: string;
  className: string;
}

export const Checkbox = ({ id, name, className }: Props): JSX.Element => (
  <Field
    name={name}
    render={({ field }: FieldProps) => (
      <input
        id={id}
        {...field}
        type="checkbox"
        className={className}
        checked={field.value}
      />
    )}
  />
);