Form Setは、ユーザーがデータを入力したり、オプションを設定したりするための、入力コンポーネントのグループです。
設計の原則
Vertical
ラベルを垂直方向に配置したタイプ。ユーザーに入力させたい項目が多い場合は、ユーザーの目線の動きを抑えられます。
Horizontal
主に検索エリアの常時表示エリアなど、ラベルを水平方向に配置し、かつ高さも節約したい時に使用します。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/05/Form-set.png)
使用時の注意
Horizontalを使用してフォームを水平方向に並べる際は、項目名に背景色がついているものを使用すると、隣り合うフォームのどちらの項目を示しているかがわかり易くなります。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/05/Formset.png)
フォームを使用する際は必ずラベルを併記し、プレースホルダーのみで使用しないでください。ユーザーが情報を入力するとどのような入力項目だったか判別できなくなります。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/05/Formset-1.png)
Usage
Variamtからアイテムを選ぶ事で柔軟なフォームセットを作る事ができます。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/05/スクリーンショット-2024-05-10-10.22.01.png)
LV1の単体フォームにはInputからFile Uploadまで色々なInput UIがVariantに含まれています。
また、ラベルがInput UIの上に配置されたVertical Labelと、左横に配置されたHorizontal Labelの2種類のレイアウトタイプが用意されています。
LV1の単体フォームを組み合わせたLV2のフォームセットには、2種類の組タイプがあります。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/05/スクリーンショット-2024-05-10-10.22.57.png)
Lineタイプでは、グリッドに合わせたフォームセットを作る事ができます。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/05/スクリーンショット-2024-05-10-10.23.25.png)
Properties (振る舞いの設定)
Component Propertiesで設定されている内容。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/05/Formset-2.png)