ChakraUI version 3.5.1 Fieldset(Form機能)を使って、送信する方法

はじめに

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

問題

はじめにの通りです。

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

解決方法

Register.tsx

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>

    ~~省略~~
    
    </form>
    

おわりに

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

参考

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