ChakraUI version 3.5.1 Fieldsetを使ったフォーム送信の実装方法

問題

ドキュメントに、Fieldset(Form機能)を使って、送信する方法がなかったので記載します。

ChakraUI version 3.5.1
Fieldset ドキュメント
https://www.chakra-ui.com/docs/components/fieldset

Fieldsetとは

Fieldsetとは、関連するフォームコントロール（入力フィールド、ラジオボタン、チェックボックスなど）をグループ化するために使用される。
Chakra UIでは、Fieldset.Root、Fieldset.Legend、Fieldset.Contentなどのサブコンポーネントを提供しており、これらを使ってフォームを見やすく構造化できる。

解決方法

Register.tsx

import React, { useState } from "react";
import { Fieldset, Box, Button, Input, Stack, Text, Link } from "@chakra-ui/react";

// 中略
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // 登録処理を実装
    console.log("User registered:", formData);
  };

// 中略

  return (
    {/* 追加 */}
    <form onSubmit={handleSubmit}> 
      <Fieldset.Root size="lg" maxW="md">
        <Stack>
          <Fieldset.Legend>xx新規登録</Fieldset.Legend>
        </Stack>

        <Fieldset.Content>
          <Field label="好きな英単語 *">
            <Input
              type="text"
              name="id"
              value={formData.id}
              onChange={handleChange}
            />
          </Field>

          <Field label="お名前 *">
            <Input
              type="text"
              {...register("name", {
                required: "お名前は必須入力です。",
                maxLength: {
                  value: 20,
                  message: "お名前は20文字以内にしてください。",
                },
              })}
            />
           {errors.name && (
             <Text color="red.500">{errors.name.message}</Text>
           )}
          </Field>
              
          {/* 他のフィールドもここに追加 */}

        </Fieldset.Content>
      </Fieldset.Root>
    </form>
  );
};

おわりに

ドキュメントは、基本的なことしか書いていないので、実装するには書き方を調べる必要があります。

参考

ChakraUI version 3.5.1 Fieldset ドキュメント
https://www.chakra-ui.com/docs/components/fieldset