WebLog

Chakra UIとReact Hook Formで複数チェックボックスを作る

2023/01/24 08:53

Chakra UI と React Hook Form を組み合わせるときのサンプル

大体は以下の公式サイトを参考にすればいい https://chakra-ui.com/getting-started/with-hook-form

複数チェックボックスの場合

<Controller />コンポーネントのrenderを使う

1import {
2 Button,
3 Checkbox,
4 CheckboxGroup,
5 FormControl,
6 FormErrorMessage,
7 FormLabel,
8 Input,
9} from "@chakra-ui/react";
10import { Controller, SubmitHandler, useForm } from "react-hook-form";
11
12type Input = {
13 elements: string[];
14};
15
16const fruits = ["りんご", "いちご", "グレープフルーツ"];
17
18export const MultipleCheckBoxes: React.FC = () => {
19 const {
20 handleSubmit,
21 control,
22 formState: { errors, isSubmitting },
23 } = useForm<Input>();
24
25 const onSubmit: SubmitHandler<Input> = async ({ elements }) => {
26 console.log(elements);
27 };
28
29 return (
30 <form onSubmit={handleSubmit(onSubmit)}>
31 <FormControl isInvalid={Boolean(errors.elements)}>
32 <FormLabel>好きな果物(複数選択可)</FormLabel>
33
34 <Controller
35 name="elements"
36 control={control}
37 render={({ field }) => {
38 return (
39 <CheckboxGroup {...field}>
40 {fruits.map((fruit) => {
41 return (
42 <Checkbox key={fruit} value={fruit} name="elements">
43 {fruit}
44 </Checkbox>
45 );
46 })}
47 </CheckboxGroup>
48 );
49 }}
50 />
51 <FormErrorMessage>
52 {errors.elements && errors.elements.message}
53 </FormErrorMessage>
54 </FormControl>
55
56 <Button isLoading={isSubmitting} type="submit">
57 送信
58 </Button>
59 </form>
60 );
61};

同じようなやり方で、他のコンポーネントも React Hook Form でコントロールできる気がしている...

最新の投稿