Picker
日付・時刻・日時を選択させる入力コンポーネント群。ユースケースに応じて DatePicker(日付のみ) / TimePicker(時刻のみ) / DateTimePicker(日付+時刻) を使い分ける。共通仕様として、値があるときはサフィックススロットに × ボタンを出し、日付・時刻を一括クリアできる。
Picker のバリアント
日時の入力形態別に 3 種を提供。フィールド内のクリア導線(× ボタン)は共通仕様。
- DatePicker
日付のみを選択する入力。ネイティブの
<input type="date">をベースにし、ブラウザ標準のカレンダーを開く。生年月日・締切日など日付単体の入力に使う。 - TimePicker
時刻のみを選択する入力。30 分刻みのメニューから選ばせる Popover ベース。開店時間・予約時間など時刻単体の入力に使う。
- DateTimePicker
DatePicker + TimePicker を横並びで合成し、日付と時刻を 1 つの入力単位として扱う。× ボタン 1 つで日付・時刻を一括クリア。予約日時・送信日時など日時セットの入力に使う。
共通仕様
- 値なしのとき、サフィックスにコンテキストのアイコン(DatePicker: calendar / TimePicker: clock)を表示する
- 値ありのとき、同じスロットのアイコンを × に入れ替える。ホバー時のみの切替は行わず、値がある間は常時 × を表示する
- × のクリックで値をクリアし、ポップアップ・カレンダーは開かない
- × ボタンは
<button type="button">+aria-label="入力値をクリア"。キーボードで Tab フォーカス可能 - disabled 状態では × を表示しない
- 色・余白は既存のトークン(
--interaction-transparency-8等)を参照する