Fieldset

Fieldsetコンポーネントは、フォームにおける複数の入力要素をグルーピングするためのコンポーネントです。

姓名や電話番号のように値を分割して入力する場合や、CheckboxやRadioButtonといった複数の入力要素を持つフォームに対してラベルやメッセージテキストを表示したい場合に適しています。

処理中
ドラッグして幅を変更
ドラッグして高さを変更
処理中

使用上の注意

入力要素が2つ以上の場合にのみ使用する

Fieldsetは、2つ以上の入力要素を持つフォームをグループ化し、タイトルやラベル、メッセージテキストを表示したい場合に使用します。

また、タイトルでは、まとめた入力要素がどんなグループであるかを明確に示しましょう。

入力要素が1つだけの場合は、FormControlを使用してください。

レイアウト

Fieldsetには、複数の入力要素のグループの目的を明確にするタイトルをつけます。

Fieldsetに内包されるフォーム要素のタイトルは、グルーピングしているFieldsetのタイトルよりも低い見出しレベルになるようにします。見出しに関する詳細はHeadingを参照してください。

また、FormControlと同様に、ステータスラベルやメッセージテキストの有無で、コンポーネント内のレイアウトにバリエーションがあります。詳細はFormControlのレイアウトを参照してください。

状態

無効(disabled)

フォームの操作ができない状態を表現したスタイルです。

Fieldsetにdisabledを適用すると、内包するフォーム要素にも自動でdisabledが適用されるため、個別に設定する必要はありません。

ユーザーはなぜ無効になっているのかわからないことがあります。権限による表示制御のデザインパターンを参考にして、そもそも無効ではなくフォーム自体を非表示にしたり、無効状態の理由を付近に表示することを検討してください。

読み取り専用

Fieldset自体には、読み取り専用の状態は存在しません。

入力内容の確認時など、すでに入力済みの書き換えできない値として表示する際は、InputreadOnlyを使用してください。

ただし、値をテキストとしてコピーして利用したいユーザーにとっては、分割されているフォームの値をそれぞれコピーする必要があり、手間になってしまうことに注意してください。

Props

title必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

グループのタイトル名

titleType
"screenTitle""sectionTitle""blockTitle""subBlockTitle""subSubBlockTitle"

タイトルの見出しのタイプ

dangerouslyTitleHidden
falsetrue

タイトルの見出しを視覚的に隠すかどうか

htmlFor
string

label 要素に適用する htmlFor

labelId
string

label 要素に適用する id

innerMargin
00.250.50.7511.251.522.533.548-0.25-0.5-0.75-1-1.25-1.5-2-2.5-3-3.5-4-8"XXS""XS""S""M""L""XL""XXL""X3S""X3L"

タイトル群と子要素の間の間隔調整用(基本的には不要)

statusLabelProps
Props & ElementProps & { children?: ReactNode; }(Props & ElementProps & { children?: ReactNode; })[]

タイトルの隣に表示する StatusLabel の Props の配列

helpMessage
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

タイトルの下に表示するヘルプメッセージ

exampleMessage
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

タイトルの下に表示する入力例

errorMessages
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortalReactNode[]

タイトルの下に表示するエラーメッセージ

autoBindErrorInput
falsetrue

エラーがある場合に自動的に入力要素を error にするかどうか

supplementaryMessage
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

フォームコントロールの下に表示する補足メッセージ

disabled
falsetrue

true のとき、文字色を TEXT_DISABLED にする