コンポーネント一覧
NumberField
数量・単価・個数など「増減する数」に使う。電話番号や郵便番号は数字でも数値ではないので Input を使う。
デモ
使い分け
こうする
- 数量・金額・割合のように増減する数に使う
- 通貨や % は formatOptions で付ける。文字列に含めない
こうしない
- 電話番号・郵便番号・注文番号に使わない。数字だが数値ではない。Input にする
- 空欄を 0 として扱わない。onChange は null を渡す
Props
| 名前 | 型 | 説明 |
|---|---|---|
| variant | 'solid' | 'outline' | 'soft' | 'ghost' | 'plain' | |
| size | 'sm' | 'md' | 'lg' | |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | |
| label | ReactNode | |
| placeholder | string | |
| description | ReactNode | |
| errorMessage | ReactNode | `isInvalid` のときに表示する。色だけに頼らずテキストを必ず伴う（WCAG 1.4.1） |
| name | string | |
| value | number | null | 空欄は `null`。`NaN` は使わない |
| defaultValue | number | |
| onChange | (value: number | null) => void | 空欄になったときは `null` を受け取る |
| minValue | number | |
| maxValue | number | |
| step | number | 矢印キーと増減ボタンの刻み。既定は 1 |
| formatOptions | Intl.NumberFormatOptions | 表示の書式。`Intl.NumberFormat` のオプションをそのまま渡す。 @example { style: 'currency', currency: 'JPY' } { style: 'percent' } { style: 'unit', unit: 'kilogram' } |
| onKeyDown | KeyboardEventHandler<HTMLInputElement> | キー操作。**IME 変換中のキーはここに届かない**（テーマが core の `useImeSafeKeys` を通す）。 |
| isDisabled | boolean | |
| isReadOnly | boolean | |
| isRequired | boolean | |
| isInvalid | boolean | |
| classNames | ClassNames<typeof numberFieldSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
- label
- inputWrapper必須
- input必須
- decrement
- increment
- description
- errorMessage
アクセシビリティ
| キー | 動作 |
|---|---|
| ↑ ↓ | `step` ずつ増減 |
| PageUp / PageDown | 大きく増減 |
| Home / End | 最小 / 最大へ |
- `label` は必須。ArrowUp / ArrowDown で `step` ずつ増減し、`minValue` / `maxValue` で止まる。 増減ボタンは名前を持つ。`description` と `errorMessage` は `aria-describedby` で関連付く。 IME 変換中の Enter は抑制される
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。