FDS - ガイドライン

DatePicker

日付を選択または入力するためのUIです。
入力する日付が当日に近い場合に有効なコンポーネントであり、生年月日などある程度遡って入力する必要がある場合にはプルダウンを使用してください。

設計の原則

Input
ユーザーが入力する日付が1日の場合はDefault、期間を入力する場合はRangeを使用してください。

キーボード入力及びクリックする事で表示されるCalendarから選択する事もできます。

Properties(振る舞いの設定)

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

カラートークン

Status State Element Token
Default Default Label General/Neutral/subtle
    Container_stroke General/Neutral/light
 

Hovered

Label General/Neutral/subtle
 

 

Container_stroke General/Neutral/hovered
 

Focused

Label General/Neutral/main
 

 

Container_stroke General/Primary/accent
 

Filled

Label General/Neutral/main
 

 

Container_stroke General/Neutral/light
 

Disabled

Label General/Neutral/disabled
 

 

Container General/Neutral/disabled background
Error Default Label General/Neutral/subtle
    Container_stroke General/Danger/light
 

Hovered

Label General/Neutral/subtle
 

 

Container_stroke General/Danger/hovered
 

Focused

Label General/Neutral/main
 

 

Container_stroke General/Danger/accent
 

Filled

Label General/Neutral/main
 

 

Container_stroke General/Danger/light
 

Disabled

Label General/Neutral/disabled
 

 

Container_stroke General/Danger/light

おすすめの記事

TOP