数値入力NumberInputExperimental
上下ボタン付きの数値入力です。最小値、最大値、増減単位を指定できます。
プレビュー
状態とバリエーション
最小値と最大値
直接入力と上下ボタンのどちらでも、指定した範囲から外れないようにします。
増減単位
金額やポイントなど、決まった単位で増減する値に使います。
無効化
変更できない理由はツールチップと補足文で伝えます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value | number | - | 外部から渡す現在の数値です。 |
| onValueChange | (value: number) => void | - | 値が変わった時に呼ばれます。`min` / `max` の範囲内に丸められます。 |
| min | number | - | 入力できる最小値です。 |
| max | number | - | 入力できる最大値です。 |
| step | number | 1 | 上下ボタンで増減する単位です。 |
| incrementLabel | string | 'Increment' | 増加ボタンの支援技術向けラベルです。 |
| decrementLabel | string | 'Decrement' | 減少ボタンの支援技術向けラベルです。 |
使い方
Loading...