フォーム
Month Picker
12 か月のグリッドから Temporal.PlainYearMonth を選ぶ月ピッカー。前年・翌年に移動でき、矢印キーで月を動かし、Enter で確定、Escape で閉じます。
ReactVueWeb Components
Storybook で見る プレイグラウンド
使用例
<MonthPicker
defaultValue={Temporal.PlainYearMonth.from('2026-05')}
onChange={setMonth}
/>設定できる項目
| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
value | Temporal.PlainYearMonth | null | — | Selected month (controlled). Pass `null` for "no selection". |
defaultValue | Temporal.PlainYearMonth | null | — | Initial month (uncontrolled). @default null |
onChange | (value: Temporal.PlainYearMonth | null) => void | — | Called with the new month (or `null` when cleared). |
min | PlainYearMonthInput | — | Earliest selectable month (inclusive). ISO `YYYY-MM` strings accepted. |
max | PlainYearMonthInput | — | Latest selectable month (inclusive). ISO `YYYY-MM` strings accepted. |
locale | Intl.LocalesArgument | — | BCP-47 locale for month names. Defaults to the host locale. |
disabled | boolean | — | Disable the whole control. |
size | Extract<SizeToken, 'sm' | 'md' | 'lg'> | md | Control size. @default 'md' |
alignEnd | boolean | false | Align the popup to the trigger's end (right) edge. @default false |
toggleLabel | string | Choose month | Accessible label for the trigger when no month is chosen. @default 'Choose month' |
id | string | — | `id` for the trigger button (an auto-generated id is used otherwise). |
className | string | — |
アクセシビリティ
- 文字と背景の明るさの差をしっかり取り、読みやすくしています。ライトでもダークでも、見やすさの国際基準 WCAG の最高ランク AAA（明るさの差が 7:1 以上）を満たします。
- マウスがなくても、キーボードだけですべての操作ができます。
- いまどこを操作しているかを示す枠（フォーカスの囲み）が、常にはっきり見えます。
- 利用者が「画面の動きを減らす」設定にしているときは、過剰なアニメーションを止めます。
どのコンポーネントも、だれにとっても使いやすいように、見やすさの国際基準 WCAG の最高ランク AAA（WCAG 2.1 AAA）を満たすよう作っています。