ChakraUI + Formik + Yupでお手軽フォーム

2 min read読了の目安(約1900字

完成品

必要なもの

Chakra UI

https://chakra-ui.com/

formik-chakra-ui

https://github.com/kgnugur/formik-chakra-ui

Chakra UIのコンポーネントを、簡単にFormikと連携するためのライブラリ。

yup

https://github.com/jquense/yup

簡単にバリデーションができる。

実装

import { Box, ButtonGroup, Stack } from '@chakra-ui/react'
import { Formik } from 'formik'
import * as Yup from "yup"

import {
  InputControl,
  PercentComplete,
  ResetButton,
  SubmitButton,
  CheckboxSingleControl
} from "formik-chakra-ui"


export default function FormTest() {
  const validationSchema = Yup.object({
    displayName: Yup.string().required('表示名は必須です')
  })

  return (
    <Box p={16}>
      <Formik
        initialValues={{
          displayName: "",
          agreed: false
        }}
        validationSchema={validationSchema}
        onSubmit={(values) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null , `  `))
          }, 1000)
        }}>
        {({ handleSubmit, values }) => (
          <Stack as="form"
            onSubmit={handleSubmit as any} spacing={6}>
            <InputControl name="displayName" label="表示名" />
            <CheckboxSingleControl name="agreed">
              利用規約に同意しました
            </CheckboxSingleControl>
            <PercentComplete />
            <ButtonGroup>
              {values.agreed && (
                <SubmitButton>プロフィールを更新</SubmitButton>)}
              <ResetButton>リセット</ResetButton>
            </ButtonGroup>
          </Stack>
        )}
      </Formik>
    </Box>
  )
}

送信後はこのようになります。

InputControlにChakraUIのFormControl, FormLabel, Input, FormErrorMessageが含まれていて、特にスタイリングする必要もありません。楽!