From a12511ce17cb3a97feff045386e0ad52dc6559ee Mon Sep 17 00:00:00 2001
From: wentzzz <wentz.swf@gmail.com>
Date: Fri, 13 Oct 2023 10:14:06 +0900
Subject: [PATCH 1/6] =?UTF-8?q?=E4=B8=8B=E6=9B=B8=E3=81=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../articles/products/components/fieldset.mdx | 160 ++++++++++++++++++
 1 file changed, 160 insertions(+)

diff --git a/content/articles/products/components/fieldset.mdx b/content/articles/products/components/fieldset.mdx
index 8e278f4a7..39f8734e4 100644
--- a/content/articles/products/components/fieldset.mdx
+++ b/content/articles/products/components/fieldset.mdx
@@ -4,9 +4,169 @@ description: ''
 ---
 import { ComponentPropsTable } from '@Components/ComponentPropsTable'
 import { ComponentStory } from '@Components/ComponentStory'
+import {
+  FaExclamationCircleIcon,
+  StatusLabel,
+} from 'smarthr-ui'
+
+Fieldsetコンポーネントは、フォームにおける複数の入力要素をグループ化するためのコンポーネントです。
 
 <ComponentStory name="Fieldset" />
 
+## 使用上の注意
+
+特に注意したいアンチパターンなど使用上の注意があれば書きます。種類ごとの使いどころは[種類](#h2-1)に書きます。
+
+## レイアウト
+
+Fieldsetは、関連する複数の入力要素をグループ化する目的で使用します。それぞれのFieldsetは、そのグループの目的を明確にするタイトルをつけます。
+
+```tsx editable codeBlock
+<Fieldset title="就業形態" innerMargin={0.5}>
+    <Cluster gap={1.25}>
+        <RadioButton name="employment" defaultChecked={true}>
+        正社員
+        </RadioButton>
+        <RadioButton name="employment">契約社員</RadioButton>
+        <RadioButton name="employment">派遣社員</RadioButton>
+        <RadioButton name="employment">アルバイト</RadioButton>
+        <RadioButton name="employment">その他</RadioButton>
+    </Cluster>
+</Fieldset>
+```
+
+```tsx editable codeBlock
+<Fieldset
+title="アカウントの設定"
+statusLabelProps={{ type: 'grey', children: '任意' }}
+errorMessages="入力されていない項目があります。"
+>
+    <Stack>
+        <Fieldset title="設定の有無" titleType="subBlockTitle" innerMargin={0.5}>
+        <Cluster gap={1.25}>
+            <RadioButton name="existsConfig" defaultChecked={true}>
+            あり
+            </RadioButton>
+            <RadioButton name="existsConfig">なし</RadioButton>
+        </Cluster>
+        </Fieldset>
+        <Cluster gap={1}>
+        <FormControl
+            title="姓"
+            titleType="subBlockTitle"
+            errorMessages="姓が入力されていません。"
+        >
+            <Input name="lastName" />
+        </FormControl>
+        <FormControl
+            title="名"
+            titleType="subBlockTitle"
+            errorMessages="名が入力されていません。"
+        >
+            <Input name="firstName" />
+        </FormControl>
+        </Cluster>
+    </Stack>
+</Fieldset>
+```
+
+## 状態
+
+### 無効（disabled）
+
+フォームの操作ができない状態を表現したスタイルです。
+
+Fieldsetに`disabled`を適用すると、内包するフォーム要素にも自動で`disabled`が適用されるため、個別に設定する必要はありません。
+
+ユーザーはなぜ無効になっているのかわからないことがあります。[権限による表示制御](/products/design-patterns/access-control-pattern/)のデザインパターンを参考にして、そもそも無効ではなくフォーム自体を非表示にしたり、無効状態の理由を付近に表示することを検討してください。
+
+```tsx editable codeBlock
+<Fieldset
+    title="アカウントの設定"
+    helpMessage="登録するアカウント情報を入力してください。"
+    disabled
+>
+    <Stack>
+        <Cluster gap={1}>
+            <FormControl
+                title="姓"
+                titleType="subBlockTitle"
+            >
+                <Input name="lastName" />
+            </FormControl>
+            <FormControl
+                title="名"
+                titleType="subBlockTitle"
+            >
+                <Input name="firstName" />
+            </FormControl>
+        </Cluster>
+        <FormControl
+            title="アカウント名"
+            titleType="subBlockTitle"
+        >
+            <Input name="accountName" />
+        </FormControl>
+        <Fieldset title="電話番号" innerMargin={0.5}>
+            <Cluster gap={0.5}>
+                <Input width="100px" name="phoneNumber1" />
+                <Input width="100px" name="phoneNumber2" />
+                <Input width="100px" name="phoneNumber3" />
+            </Cluster>
+        </Fieldset>
+        <Fieldset title="就業形態" innerMargin={0.5}>
+            <Cluster gap={1.25}>
+                <RadioButton name="employment2">正社員</RadioButton>
+                <RadioButton name="employment2">契約社員</RadioButton>
+                <RadioButton name="employment2">派遣社員</RadioButton>
+                <RadioButton name="employment2">アルバイト</RadioButton>
+                <RadioButton name="employment2">その他</RadioButton>
+            </Cluster>
+        </Fieldset>
+        <Fieldset title="職業" innerMargin={0.5}>
+            <Select
+                name="job"
+                value="orange"
+                options={[
+                    { label: 'Select fruit', value: '' },
+                    { label: 'Apple', value: 'apple' },
+                    {
+                    label: 'citrus',
+                    options: [
+                        { label: 'Orange', value: 'orange' },
+                        { label: 'Lemon', value: 'lemon' },
+                        { label: 'Grapefruit', value: 'grapefruit' },
+                    ],
+                    },
+                    { label: 'Banana', value: 'banana' },
+                    {
+                    label: 'Fruit vegetables',
+                    disabled: true,
+                    options: [
+                        { label: 'Strawberry', value: 'strawberry' },
+                        { label: 'Melon', value: 'melon' },
+                        { label: 'Water melon', value: 'water melon' },
+                    ],
+                    },
+                ]}
+            />
+        </Fieldset>
+    </Stack>
+</Fieldset>
+```
+
+## ライティング
+
+主題に種類がなく、ライティングルールを書きたい場合はここに書きます。〇〇の使い方..などはこのグループに所属させます。AirTableも必要であれば埋め込めます。
+
+## アクセシビリティ
+
+主題全体に対するアクセシビリティの考え方として、特段言及したい場合は書きます。
+
+## デザインパターン
+
+コンポーネント独自のデザインパターンがあればこのグループ内に書きます、基準サイズなどもこの項目で書きます。
+
 ## Props
 
 <ComponentPropsTable name="Fieldset" />

From c5077f6e1a342e2b52c3717b61cd5f2fa8f28bb8 Mon Sep 17 00:00:00 2001
From: wentzzz <wentz.swf@gmail.com>
Date: Tue, 17 Oct 2023 10:29:56 +0900
Subject: [PATCH 2/6] =?UTF-8?q?=E4=B8=8B=E6=9B=B8=E3=81=8D=E3=82=B3?=
 =?UTF-8?q?=E3=83=9F=E3=83=83=E3=83=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../articles/products/components/fieldset.mdx | 294 +++++++++++++-----
 1 file changed, 209 insertions(+), 85 deletions(-)

diff --git a/content/articles/products/components/fieldset.mdx b/content/articles/products/components/fieldset.mdx
index 39f8734e4..822e24b30 100644
--- a/content/articles/products/components/fieldset.mdx
+++ b/content/articles/products/components/fieldset.mdx
@@ -9,63 +9,130 @@ import {
   StatusLabel,
 } from 'smarthr-ui'
 
-Fieldsetコンポーネントは、フォームにおける複数の入力要素をグループ化するためのコンポーネントです。
+Fieldsetコンポーネントは、フォームにおける複数の入力要素をグルーピングするためのコンポーネントです。
 
 <ComponentStory name="Fieldset" />
 
 ## 使用上の注意
 
-特に注意したいアンチパターンなど使用上の注意があれば書きます。種類ごとの使いどころは[種類](#h2-1)に書きます。
+### 入力要素が2つ以上の場合にのみ使用する
+
+Fieldsetは、2つ以上の入力要素をまとめてグループ化したい場合に使用します。
+
+姓名や電話番号のように値を分割して入力する場合や、CheckboxやRadioButtonといった複数の入力要素を持つフォームに対してラベルやメッセージテキストを表示したい場合に適しています。
+
+入力要素が1つだけの場合は、[FormControl](/products/components/form-control/)を使用してください。
 
 ## レイアウト
 
-Fieldsetは、関連する複数の入力要素をグループ化する目的で使用します。それぞれのFieldsetは、そのグループの目的を明確にするタイトルをつけます。
+Fieldsetは、関連する複数の入力要素をグルーピングする目的で使用します。それぞれのFieldsetは、そのグループの目的を明確にするタイトルをつけます。
 
-```tsx editable codeBlock
-<Fieldset title="就業形態" innerMargin={0.5}>
-    <Cluster gap={1.25}>
-        <RadioButton name="employment" defaultChecked={true}>
-        正社員
-        </RadioButton>
-        <RadioButton name="employment">契約社員</RadioButton>
-        <RadioButton name="employment">派遣社員</RadioButton>
-        <RadioButton name="employment">アルバイト</RadioButton>
-        <RadioButton name="employment">その他</RadioButton>
-    </Cluster>
-</Fieldset>
-```
+Fieldsetに内包されるフォーム要素のタイトルは、グルーピングしているFieldsetのタイトルよりも低い見出しレベルになるようにします。見出しに関する詳細は[Heading](/products/components/heading/)を参照してください。
+
+また、FormControlと同様に、ステータスラベルやメッセージテキストの有無で、コンポーネント内のレイアウトにバリエーションがあります。詳細は[FormControlのレイアウト](/products/components/form-control/#h2-1)を参照してください。
 
 ```tsx editable codeBlock
 <Fieldset
-title="アカウントの設定"
-statusLabelProps={{ type: 'grey', children: '任意' }}
-errorMessages="入力されていない項目があります。"
+    title="ユーザー情報"
+    helpMessage="登録するユーザー情報を入力してください。"
 >
-    <Stack>
-        <Fieldset title="設定の有無" titleType="subBlockTitle" innerMargin={0.5}>
-        <Cluster gap={1.25}>
-            <RadioButton name="existsConfig" defaultChecked={true}>
-            あり
-            </RadioButton>
-            <RadioButton name="existsConfig">なし</RadioButton>
+    <Stack gap={1.25}>
+        <Cluster gap={0.5}>
+            <FormControl
+                title="姓"
+                titleType="subBlockTitle"
+            >
+                <Input name="lastName" />
+            </FormControl>
+            <FormControl
+                title="名"
+                titleType="subBlockTitle"
+            >
+                <Input name="firstName" />
+            </FormControl>
         </Cluster>
+        <Fieldset
+            title="住所"
+            titleType="subBlockTitle"
+        >
+            <Stack>
+                <FormControl
+                    title="郵便番号"
+                    titleType="subSubBlockTitle"
+                >
+                    <Input name="address_postalCode" />
+                </FormControl>
+                <FormControl
+                    title="都道府県"
+                    titleType="subSubBlockTitle"
+                >
+                    <Select
+                        name="address_prefecture"
+                        options={[
+                            { label: '都道府県を選択してください', value: '' },
+                            { label: '選択肢1', value: 'value1' },
+                            { label: '選択肢2', value: 'value2' },
+                            { label: '選択肢3', value: 'value3' },
+                        ]}
+                    />
+                </FormControl>
+                <FormControl
+                    title="市区町村"
+                    titleType="subSubBlockTitle"
+                >
+                    <Input name="address_city" />
+                </FormControl>
+                <FormControl
+                    title="番地"
+                    titleType="subSubBlockTitle"
+                >
+                    <Input name="address_streetNumber" />
+                </FormControl>
+                <FormControl
+                    title="建物名・部屋番号"
+                    titleType="subSubBlockTitle"
+                >
+                    <Input name="address_buildingName" />
+                </FormControl>
+            </Stack>
         </Fieldset>
-        <Cluster gap={1}>
-        <FormControl
-            title="姓"
+        <Fieldset
+            title="電話番号"
             titleType="subBlockTitle"
-            errorMessages="姓が入力されていません。"
+            innerMargin={0.5}
         >
-            <Input name="lastName" />
-        </FormControl>
+            <Cluster gap={0.5}>
+                <Input width="100px" name="phone_number1" />
+                <Input width="100px" name="phone_number2" />
+                <Input width="100px" name="phone_number3" />
+            </Cluster>
+        </Fieldset>
+        <Fieldset
+            title="性別"
+            titleType="subBlockTitle"
+            innerMargin={0.5}
+        >
+            <Cluster gap={1.25}>
+                <RadioButton name="gender">男性</RadioButton>
+                <RadioButton name="gender">女性</RadioButton>
+                <RadioButton name="gender">回答しない</RadioButton>
+            </Cluster>
+        </Fieldset>
         <FormControl
-            title="名"
+            title="職業"
             titleType="subBlockTitle"
-            errorMessages="名が入力されていません。"
+            innerMargin={0.5}
         >
-            <Input name="firstName" />
+            <Select
+                name="occupation"
+                options={[
+                    { label: '職業を選択してください', value: '' },
+                    { label: '選択肢1', value: 'value1' },
+                    { label: '選択肢2', value: 'value2' },
+                    { label: '選択肢3', value: 'value3' },
+                ]}
+            />
         </FormControl>
-        </Cluster>
     </Stack>
 </Fieldset>
 ```
@@ -82,12 +149,12 @@ Fieldsetに`disabled`を適用すると、内包するフォーム要素にも
 
 ```tsx editable codeBlock
 <Fieldset
-    title="アカウントの設定"
-    helpMessage="登録するアカウント情報を入力してください。"
+    title="ユーザー情報"
+    helpMessage="登録するユーザー情報を入力してください。"
     disabled
 >
-    <Stack>
-        <Cluster gap={1}>
+    <Stack gap={1.25}>
+        <Cluster gap={0.5}>
             <FormControl
                 title="姓"
                 titleType="subBlockTitle"
@@ -101,71 +168,128 @@ Fieldsetに`disabled`を適用すると、内包するフォーム要素にも
                 <Input name="firstName" />
             </FormControl>
         </Cluster>
-        <FormControl
-            title="アカウント名"
+        <Fieldset
+            title="住所"
             titleType="subBlockTitle"
         >
-            <Input name="accountName" />
-        </FormControl>
-        <Fieldset title="電話番号" innerMargin={0.5}>
+            <Stack>
+                <FormControl
+                    title="郵便番号"
+                    titleType="subSubBlockTitle"
+                >
+                    <Input name="address_postalCode" />
+                </FormControl>
+                <FormControl
+                    title="都道府県"
+                    titleType="subSubBlockTitle"
+                >
+                    <Select
+                        name="address_prefecture"
+                        options={[
+                            { label: '都道府県を選択してください', value: '' },
+                            { label: '選択肢1', value: 'value1' },
+                            { label: '選択肢2', value: 'value2' },
+                            { label: '選択肢3', value: 'value3' },
+                        ]}
+                    />
+                </FormControl>
+                <FormControl
+                    title="市区町村"
+                    titleType="subSubBlockTitle"
+                >
+                    <Input name="address_city" />
+                </FormControl>
+                <FormControl
+                    title="番地"
+                    titleType="subSubBlockTitle"
+                >
+                    <Input name="address_streetNumber" />
+                </FormControl>
+                <FormControl
+                    title="建物名・部屋番号"
+                    titleType="subSubBlockTitle"
+                >
+                    <Input name="address_buildingName" />
+                </FormControl>
+            </Stack>
+        </Fieldset>
+        <Fieldset
+            title="電話番号"
+            titleType="subBlockTitle"
+            innerMargin={0.5}
+        >
             <Cluster gap={0.5}>
-                <Input width="100px" name="phoneNumber1" />
-                <Input width="100px" name="phoneNumber2" />
-                <Input width="100px" name="phoneNumber3" />
+                <Input width="100px" name="phone_number1" />
+                <Input width="100px" name="phone_number2" />
+                <Input width="100px" name="phone_number3" />
             </Cluster>
         </Fieldset>
-        <Fieldset title="就業形態" innerMargin={0.5}>
+        <Fieldset
+            title="性別"
+            titleType="subBlockTitle"
+            innerMargin={0.5}
+        >
             <Cluster gap={1.25}>
-                <RadioButton name="employment2">正社員</RadioButton>
-                <RadioButton name="employment2">契約社員</RadioButton>
-                <RadioButton name="employment2">派遣社員</RadioButton>
-                <RadioButton name="employment2">アルバイト</RadioButton>
-                <RadioButton name="employment2">その他</RadioButton>
+                <RadioButton name="gender">男性</RadioButton>
+                <RadioButton name="gender">女性</RadioButton>
+                <RadioButton name="gender">回答しない</RadioButton>
             </Cluster>
         </Fieldset>
-        <Fieldset title="職業" innerMargin={0.5}>
+        <FormControl
+            title="職業"
+            titleType="subBlockTitle"
+            innerMargin={0.5}
+        >
             <Select
-                name="job"
-                value="orange"
+                name="occupation"
                 options={[
-                    { label: 'Select fruit', value: '' },
-                    { label: 'Apple', value: 'apple' },
-                    {
-                    label: 'citrus',
-                    options: [
-                        { label: 'Orange', value: 'orange' },
-                        { label: 'Lemon', value: 'lemon' },
-                        { label: 'Grapefruit', value: 'grapefruit' },
-                    ],
-                    },
-                    { label: 'Banana', value: 'banana' },
-                    {
-                    label: 'Fruit vegetables',
-                    disabled: true,
-                    options: [
-                        { label: 'Strawberry', value: 'strawberry' },
-                        { label: 'Melon', value: 'melon' },
-                        { label: 'Water melon', value: 'water melon' },
-                    ],
-                    },
+                    { label: '職業を選択してください', value: '' },
+                    { label: '選択肢1', value: 'value1' },
+                    { label: '選択肢2', value: 'value2' },
+                    { label: '選択肢3', value: 'value3' },
                 ]}
             />
-        </Fieldset>
+        </FormControl>
     </Stack>
 </Fieldset>
 ```
 
-## ライティング
+### 読み取り専用
 
-主題に種類がなく、ライティングルールを書きたい場合はここに書きます。〇〇の使い方..などはこのグループに所属させます。AirTableも必要であれば埋め込めます。
+Fieldset自体には、読み取り専用の状態は存在しません。
 
-## アクセシビリティ
+入力内容の確認時など、すでに入力済みの書き換えできない値として表示する際は、[Input](/products/components/input/)の`readOnly`を使用してください。
 
-主題全体に対するアクセシビリティの考え方として、特段言及したい場合は書きます。
+ただし、値をテキストとしてコピーして利用したいユーザーにとっては、分割されているフォームの値をそれぞれコピーする必要があり、手間になってしまうことに注意してください。
 
-## デザインパターン
-
-コンポーネント独自のデザインパターンがあればこのグループ内に書きます、基準サイズなどもこの項目で書きます。
+```tsx editable codeBlock
+<Fieldset
+    title="電話番号"
+    titleType="subBlockTitle"
+    innerMargin={0.5}
+>
+    <Cluster gap={0.5}>
+        <Input
+            width="100px"
+            name="phoneNumber1"
+            value="00"
+            readOnly
+        />
+        <Input
+            width="100px"
+            name="phoneNumber2"
+            value="0000"
+            readOnly
+        />
+        <Input
+            width="100px"
+            name="phoneNumber3"
+            value="0000"
+            readOnly
+        />
+    </Cluster>
+</Fieldset>
+```
 
 ## Props
 

From c4942af6808bd63f978f1770e0605c86c2a1482b Mon Sep 17 00:00:00 2001
From: wentzzz <wentz.swf@gmail.com>
Date: Wed, 18 Oct 2023 10:02:40 +0900
Subject: [PATCH 3/6] =?UTF-8?q?=E4=BD=BF=E7=94=A8=E3=81=97=E3=81=AA?=
 =?UTF-8?q?=E3=81=84=E3=82=82=E3=81=AE=E3=82=92=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/articles/products/components/fieldset.mdx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/content/articles/products/components/fieldset.mdx b/content/articles/products/components/fieldset.mdx
index 822e24b30..03442990a 100644
--- a/content/articles/products/components/fieldset.mdx
+++ b/content/articles/products/components/fieldset.mdx
@@ -4,10 +4,6 @@ description: ''
 ---
 import { ComponentPropsTable } from '@Components/ComponentPropsTable'
 import { ComponentStory } from '@Components/ComponentStory'
-import {
-  FaExclamationCircleIcon,
-  StatusLabel,
-} from 'smarthr-ui'
 
 Fieldsetコンポーネントは、フォームにおける複数の入力要素をグルーピングするためのコンポーネントです。
 

From c4eb62b88e96d504e59022dfcb7ff8cc801dd6ba Mon Sep 17 00:00:00 2001
From: wentzzz <wentz.swf@gmail.com>
Date: Fri, 20 Oct 2023 17:39:53 +0900
Subject: [PATCH 4/6] Update content/articles/products/components/fieldset.mdx

Co-authored-by: Aguri Otsuka <44823946+aguringo@users.noreply.github.com>
---
 content/articles/products/components/fieldset.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/articles/products/components/fieldset.mdx b/content/articles/products/components/fieldset.mdx
index 03442990a..783bf86e8 100644
--- a/content/articles/products/components/fieldset.mdx
+++ b/content/articles/products/components/fieldset.mdx
@@ -13,9 +13,9 @@ Fieldsetコンポーネントは、フォームにおける複数の入力要素
 
 ### 入力要素が2つ以上の場合にのみ使用する
 
-Fieldsetは、2つ以上の入力要素をまとめてグループ化したい場合に使用します。
+Fieldsetは、2つ以上の入力要素を持つフォームをグループ化し、タイトルやラベル、メッセージテキストを表示したい場合に使用します。
 
-姓名や電話番号のように値を分割して入力する場合や、CheckboxやRadioButtonといった複数の入力要素を持つフォームに対してラベルやメッセージテキストを表示したい場合に適しています。
+また、タイトルでは、まとめた入力要素がどんなグループであるかを明確に示しましょう。
 
 入力要素が1つだけの場合は、[FormControl](/products/components/form-control/)を使用してください。
 

From 8ba25f2b73df50b1446a7ff5e6c92325a0dfebdb Mon Sep 17 00:00:00 2001
From: wentzzz <wentz.swf@gmail.com>
Date: Fri, 20 Oct 2023 17:40:01 +0900
Subject: [PATCH 5/6] Update content/articles/products/components/fieldset.mdx

Co-authored-by: Aguri Otsuka <44823946+aguringo@users.noreply.github.com>
---
 content/articles/products/components/fieldset.mdx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/content/articles/products/components/fieldset.mdx b/content/articles/products/components/fieldset.mdx
index 783bf86e8..143d60585 100644
--- a/content/articles/products/components/fieldset.mdx
+++ b/content/articles/products/components/fieldset.mdx
@@ -7,6 +7,8 @@ import { ComponentStory } from '@Components/ComponentStory'
 
 Fieldsetコンポーネントは、フォームにおける複数の入力要素をグルーピングするためのコンポーネントです。
 
+姓名や電話番号のように値を分割して入力する場合や、CheckboxやRadioButtonといった複数の入力要素を持つフォームに対してラベルやメッセージテキストを表示したい場合に適しています。
+
 <ComponentStory name="Fieldset" />
 
 ## 使用上の注意

From 916105a86361ddc015d9a8f28b9f3e8951604406 Mon Sep 17 00:00:00 2001
From: wentzzz <wentz.swf@gmail.com>
Date: Fri, 20 Oct 2023 17:40:12 +0900
Subject: [PATCH 6/6] Update content/articles/products/components/fieldset.mdx

Co-authored-by: Aguri Otsuka <44823946+aguringo@users.noreply.github.com>
---
 content/articles/products/components/fieldset.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/articles/products/components/fieldset.mdx b/content/articles/products/components/fieldset.mdx
index 143d60585..e927ab2cc 100644
--- a/content/articles/products/components/fieldset.mdx
+++ b/content/articles/products/components/fieldset.mdx
@@ -23,7 +23,7 @@ Fieldsetは、2つ以上の入力要素を持つフォームをグループ化
 
 ## レイアウト
 
-Fieldsetは、関連する複数の入力要素をグルーピングする目的で使用します。それぞれのFieldsetは、そのグループの目的を明確にするタイトルをつけます。
+Fieldsetには、複数の入力要素のグループの目的を明確にするタイトルをつけます。
 
 Fieldsetに内包されるフォーム要素のタイトルは、グルーピングしているFieldsetのタイトルよりも低い見出しレベルになるようにします。見出しに関する詳細は[Heading](/products/components/heading/)を参照してください。