FDS - コンポーネントガイドライン

Dropdown

ユーザーが複数のオプションの中からひとつの選択肢を選ぶことを可能にするコンポーネントです。
Form Setに入れてラベルとセットで使用しますが、入力項目が1つしかなく、その意味を画面タイトルなどで明確に説明できる場合は省略可能です。

設計の原則

  • Popup Menuと一緒に使用します。
  • 選択肢が多い場合は使い勝手を下げてしまうため、選択肢を減らせないか検討してください。
  • リストが5つ以下の場合は、ラジオボタンの使用を推奨します。
  • 一覧性を持たせたい場合はRadio ButtonやCheck Boxを使用します。

Properties (振る舞いの設定)

Component Propertiesで設定されている内容。

Bordered

Style Element Token
Bordered Container General/Neutral/contrast
  Container:Disabled General/Neutral/disabled background
  Outline General/Neutral/light
  Outline:Hovered General/Neutral/hovered
  Outline:Active General/Primary/accent
  Outline:Selected General/Neutral/light
  Outline:Error General/Danger/hovered
  Outline:Disabled General/Neutral/disabled
  Label General/Neutral/subtle
  Label:Selected General/Neutral/main
  Icon General/Neutral/light
  Error Icon General/Danger/main
Borderless Container General/Neutral/static white opacitiy 4
  Container:Hovered General/Neutral/static white opacitiy 6
  Container:Active General/Neutral/static white opacitiy 16
  Container:Error General/Danger/main opacitiy 16
  Container:Disabled General/Neutral/static white opacitiy 6
  Outline:Active General/Neutral/contrast opacitiy 80
  Label General/Neutral/static white opacitiy 80
  Label:Selected General/Neutral/static white

おすすめの記事

TOP