Number Field
入力、step ボタン、キーボードコマンド、scrub 領域で範囲内の数値を編集します。
主なプロパティ
| プロパティ | 動作 |
|---|---|
| value | uncontrolled with defaultValue, controlled with value and onValueChange; empty resolves to null |
| bounds | min, max, and step govern buttons, keys, and native validity |
| anatomy | Root → ScrubArea + Group → Decrement + Input + Increment |
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/number-field.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRField } from '@tinyrack/ui/components/field';
import { TRNumberField } from '@tinyrack/ui/components/number-field';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
サイズ パーマリンク
uiSize を指定して、NumberField の高さを隣り合う Input、Select、Button に揃えます。md は行密度の高い表と既定の入力、lg は主要入力に適しています。
範囲、step、単位のフォーマット パーマリンク
入力、button、矢印キー、scrub gesture は同じ 16–256 GB の範囲と 16 GB step を共有します。
ロケール対応の小数入力 パーマリンク
locale は表示上の桁区切りと、入力または貼り付けで受け付ける小数点記号の両方を制御します。
フォーム送信とリセット パーマリンク
非表示の数値 input は生の数値を送信し、uncontrolled field はネイティブ form reset で defaultValue に戻ります。
API
TRNumberField は Root、Group、Decrement、Input、Increment、ScrubArea、ScrubAreaCursor を含み、各 part の named export、prop type、state type も @tinyrack/ui/components/number-field から利用できます。value は number | null、defaultValue は uncontrolled state の初期値です。locale と format は表示、入力、貼り付けの解析を制御します。onValueChange と onValueCommitted は keyboard、button press、paste、wheel、scrub などの reason を返します。ネイティブ送信には name と任意の form、validity には required / min / max / step、非表示の数値 input には inputRef を使います。ネイティブ reset は uncontrolled field を defaultValue に戻し、controlled owner は自身の value をリセットします。min ≤ max を保ち、正の数値 step または "any" を使ってください。Playground は不正な control の組み合わせを正規化し、Reset で初期 args に戻します。