CurrencyInput
金額を入力させるためのコンポーネントです。給与・税額など金額値を入力させるときに使います。入力値が整数であった場合、入力欄からフォーカスを外したときに3桁ごとにカンマが入った値で表示されます。
使用上の注意
金額入力にはCurrencyInputを使用する
<Input type="number">の代わりに、金額入力にはCurrencyInputを使用してください。
プレフィックス・サフィックスで単位を補足する
通貨記号や単位はprefixまたはsuffixで補足してください。一般的に内容に対して前方に置かれる単位（例: 米ドル）にはprefixを、後方に置かれる単位（例: 日本円）にはsuffixを用いてください。
詳細はInputのプレフィックス・サフィックスを参照してください。
使い方チェックリスト
CurrencyInput
参照元：使用上の注意 > 金額入力にはCurrencyInputを使用する 「使用上の注意 > 金額入力にはCurrencyInputを使用する」の本文へ移動
- Must金額入力には `<Input type="number">` の代わりに CurrencyInput を使う
参照元：使用上の注意 > プレフィックス・サフィックスで単位を補足する 「使用上の注意 > プレフィックス・サフィックスで単位を補足する」の本文へ移動
- Must通貨記号や単位は `prefix` または `suffix` で補足する
- 一般的に内容に対して前方に置かれる単位（例: 米ドル）には `prefix` を用いる
- 後方に置かれる単位（例: 日本円）には `suffix` を用いる
Props
placeholder非推奨
string
@deprecated placeholder属性は非推奨です。別途ヒント用要素を設置するか、それらの領域を確保出来ない場合はTooltipコンポーネントの利用を検討してください。
value
string
通貨の値
width
string number
コンポーネントの幅
defaultValue
string
デフォルトで表示する通貨の値
autoFocus
false true
オートフォーカスを行うかどうか
prefix
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal
コンポーネント内の先頭に表示する内容
error
false true
フォームにエラーがあるかどうか
suffix
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal
コンポーネント内の末尾に表示する内容
bgColor
"BACKGROUND" "COLUMN" "BASE_GREY" "OVER_BACKGROUND" "HEAD" "BORDER" "ACTION_BACKGROUND"
背景色。readOnly を下地の上に載せる場合に使う
onFormatValue
(value: string) => void
入力値がフォーマットされたときに発火するコールバック関数