TimePicker
時刻の入力フィールド。クリックで Menu ポップオーバーが開き、30 分刻みの候補から時刻を選択できる。値があるときはサフィックスの clock アイコンが × に切り替わり、クリックで値をクリアできます。ブラウザ標準の時刻選択ではなく、Thinca の Menu コンポーネントを popover に採用することで見た目を OS 非依存で統一する。
プレビュー(動作デモ)
実際に時刻を選択できます。クリックで Menu が開きます。
時刻
選択値: (未選択)
クリックで Menu が開き、30 分刻みの候補から時刻を選択できます。
時間帯選択 (横並び)
期間選択は単一の TimePicker を 2 つ組み合わせます。
状態
Normal
開始時刻
Focus
開始時刻
Error
開始時刻
Disabled
開始時刻
実装例
"use client";
import { useState } from "react";
import { TimePicker } from "@/components/TimePicker";
export function Example() {
const [value, setValue] = useState<string | null>(null);
return <TimePicker label="時刻" value={value} onChange={setValue} />;
}仕様
- 幅 160px / 高さ 40px / radius 4px
- 左に
HH:MM(24 時間表記)、右に時計アイコン (16px) - Normal / Focus / Error / Disabled の 4 状態(Input と同じカラー仕様)
- クリックで Menu ポップオーバーが開く(30 分刻みで 48 件の候補)
- value / onChange は
HH:MM文字列(Menu で選ばれた候補のみ) - Menu は Thinca の
Menuコンポーネント準拠(白 bg / radius m / shadow LAYER 2 / 行 40px) - キーボード操作: ↑↓ で移動、Enter/Space で決定、Esc で閉じる
利用基準
使うべき時
- 通話予約時刻、営業時間の設定など、時刻だけを入力するケース
- 時間帯(開始 - 終了)の入力 (TimePicker を 2 つ組み合わせ)
- label プロップで対象属性を明示する
使わない時
- 日付が必要な場合 → DatePicker を使用
- 「今すぐ / 30 分後 / 1 時間後」など少数の選択肢の場合 → Select や専用ボタンを使用
- 分単位の細かい指定が必要な場合 → 数値 Input など専用 UI を用意する