フォーム v1.0.0

数値入力

増減ボタン、最小/最大制約、ステップサイズを備えた数値入力。 ネイティブのnumber入力より優れたUXを提供し、ブラウザ間で一貫したスタイリングを実現します。 プレフィックス/サフィックステキスト、複数サイズ、エラー状態、ボタン長押しリピートに対応しています。

プレビュー & コード

オプション

名前 型 デフォルト 説明
value Integer/Float nil Initial numeric value
min Integer/Float nil Minimum allowed value
max Integer/Float nil Maximum allowed value
step Integer/Float 1 Increment/decrement step size
label String nil Label text displayed above the input
hint String nil Hint text displayed below the input
size Symbol :md Input size: :sm, :md, or :lg
prefix String nil Prefix text displayed inside the input (e.g. "$")
suffix String nil Suffix text displayed inside the input (e.g. "kg")
disabled Boolean false Whether the input is disabled
error String nil Error message — turns the border red and displays below the input
name String nil Form field name attribute
placeholder String nil Placeholder text shown when empty

変更履歴 v1.0.0

- v1.0.0: Initial release with increment/decrement buttons, min/max/step support
- Hold-to-repeat on increment/decrement buttons (400ms delay, 75ms repeat)
- Keyboard arrow-key support (ArrowUp/ArrowDown)
- Prefix/suffix text, multiple sizes, error states, and disabled state
- Full dark mode support

フルアクセスを取得

このコンポーネントと他のすべてのソースコードをアンロックしましょう。一回のお支払いで永久アクセス。

今すぐアクセスを取得