Formik with Semantic-UI Components

January 07, 2020

How to use Formik with Semantic-UI-React components

Initially I tried adding the name prop to the Select component.

import {  Select } from 'semantic-ui-react';
    {({ values, handleChange,}) => (

This code threw the following error because Semantic-UI-React does not pass overloaded props when handling events.

Warning: Formik called `handleChange`, but you forgot to pass an `id` or `name` attribute to your input:
Formik cannot determine which value to update.

The solution is to use Formik hooks. useField allows access to the helper object which contains a method for setting the value in the callback. The hook constructor has a paramter for the field name. Using this hook allows any react component to be used in Formik forms. Formik Hooks

<SelectFormikSemantic name="mySelector" options={mySelectorOptions} />

function SelectFormikSemantic(props: { name: string; options: SelectOptions[] }) {
    const [field, , helpers] = useField(;
    return (
        onChange={(e, v) => helpers.setValue(v.value)}
        value={field.value.value} />

Additionally another object included in the 3-tuple is field which has data on the field including its current value.