ガイドライン
Anatomy: 解剖図
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
| 1 | Container | HTML Select エレメント | — | |
| 2 | Value | ユーザーの選択内容を反映するフィールド | — | |
| 3 | Icon | Select要素であることを明示するアイコン | Icon | — |
Options: 選択肢
Size
sm
通常よりも小さなサイズです。限られたスペースにセレクトを配置する場合かつ入力の重要性が低い場合に使用します。
md (default)
セレクトのデフォルトのサイズです。ミディアムが最も使用されるサイズです。他のサイズのセレクトはミディアムを基準に重要度に応じて使用します。
lg
大きなセレクトは入力の重要性を高めるため、使用は極力控えてください。
States: 状態
Enable
ユーザーが操作を行う前のデフォルトの状態。
Hover
ユーザーがセレクトにマウスオーバーしている状態。
Focus
セレクトが展開可能な状態。クリックやキー操作によってセレクトが展開され、オプションが表示されます。
Disabled
システムによってセレクトが非活性化されている状態。ユーザーによる操作は不能です。
Invalid
Enable
選択内容が不正な場合の状態です。ユーザーが適切な入力を行うことで無効状態は解除されます。
Hover
ユーザーがフィールドにマウスオー バーしている場合かつ、選択内容が不正な場合の状態です。
Focus
フォーカスされている場合かつ、選択内容が不正な場合の状態です。
Disabled
システムによってフィールドが非活性化されている場合かつ、選択内容が不正な場合の状態です。
Behaviors: 振る舞い
オプショングループ
セレクトから展開されるオプショングループのスタイルや挙動はブラウザの仕様に準じます。
Metrics: 寸法
sm
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 32px
- Item Spacing: 8px
- padding Vertical: 4px
- padding Horizontal: 8px, 4px
md
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 40px
- Item Spacing: 8px
- padding Vertical: 4px
- padding Horizontal: 12px, 6px
lg
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 48px
- Item Spacing: 8px
- padding Vertical: 4px
- padding Horizontal: 16px, 8px
Usage: 使い方
Selectを使用する際はFormコンポーネントの用法に従ってください。
Don’t
要素が4つ未満の場合はラジオを使用してください。また、縦方向のスペースに余裕がある場合も同様にラジオを使用してください。
Contents: 内容
Do
オプション項目は短く簡潔に表記します。テキストが複数行に折り返されるような長い項目名は推奨されません。
Don’t
長く、説明的なオプション項目は非推奨です。テキストの折り返しが頻繁に発生場合はテキストを修正するか、代替のUIで提示することを検討してください。
Change log: 変更履歴
| Date | Changes |
|---|---|
| 2024/11/22 | ドキュメントを公開 |
| 2023/10/14 | Figmaを公開 |
小さな気づきや違和感があれば、
フィードバック