フォーム v1.0.0

通貨入力

通貨記号アドオン、自動桁区切り、小数フォーマットを備えた通貨入力フィールド。 左右の記号配置、国際フォーマット用のカスタマイズ可能な区切り文字、 最小/最大制約に対応し、フォーム送信用に生の数値を格納するhiddenフィールドを備えています。

プレビュー & コード

オプション

名前 型 デフォルト 説明
name * String 必須 Form field name attribute (used on the hidden input)
value Float nil Initial numeric value
currency String "USD" Currency code for reference
symbol String "$" Currency symbol to display
symbol_position Symbol :left Symbol placement: :left or :right
decimal_places Integer 2 Number of decimal places
thousand_separator String "," Character used as thousand separator
decimal_separator String "." Character used as decimal separator
min Float nil Minimum allowed value
max Float nil Maximum allowed value
label String nil Label text displayed above the input
size Symbol :md Input size: :sm, :md, or :lg
error String nil Error message -- turns the border red and displays below the input
disabled Boolean false Whether the input is disabled
required Boolean false Whether the input is required
placeholder String "0.00" Placeholder text shown when empty

変更履歴 v1.0.0

- v1.0.0: Initial release with currency formatting, symbol addon, and hidden value field
- Left/right symbol positioning with proper border radius
- Configurable thousand and decimal separators for international formats
- Min/max constraints enforced on blur
- Keystroke filtering to allow only valid numeric input
- Full dark mode support

フルアクセスを取得

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

今すぐアクセスを取得