InputNumber

InputNumberは数値入力を行うための入力コンポーネントです。

インポート#


import { InputNumber } from 'primereact/inputnumber';
         

数字#

InputNumberは、valueプロパティとonValueChangeプロパティを使用して制御された入力として使用されます。


<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} />
<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} useGrouping={false} />
<InputNumber value={value3} onValueChange={(e) => setValue3(e.value)} minFractionDigits={2} maxFractionDigits={5} />
<InputNumber value={value4} onValueChange={(e) => setValue4(e.value)} min={0} max={100} />
 

ロケール#

グループ化記号や小数点記号などのローカライズ情報は、localeプロパティで定義します。デフォルトではユーザーのロケールが使用されます。


<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} minFractionDigits={2} />
<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} locale="en-US" minFractionDigits={2} />
<InputNumber value={value3} onValueChange={(e) => setValue3(e.value)} locale="de-DE" minFractionDigits={2} />
<InputNumber value={value4} onValueChange={(e) => setValue4(e.value)} locale="en-IN" minFractionDigits={2} />
 

通貨#

通貨値は、modeプロパティをcurrencyに設定することで有効になります。この設定では、米ドルの「USD」など、ISO 4217規格を使用してcurrencyプロパティも定義する必要があります。


<InputNumber inputId="currency-us" value={value1} onValueChange={(e) => setValue1(e.value)} mode="currency" currency="USD" locale="en-US" />
<InputNumber inputId="currency-germany" value={value2} onValueChange={(e) => setValue2(e.value)} mode="currency" currency="EUR" locale="de-DE" />
<InputNumber inputId="currency-india" value={value3} onValueChange={(e) => setValue3(e.value)} mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
<InputNumber inputId="currency-japan" value={value4} onValueChange={(e) => setValue4(e.value)} mode="currency" currency="JPY" locale="jp-JP" />
 

プレフィックスとサフィックス#

単位などのカスタムテキストは、prefixプロパティとsuffixプロパティを使用して入力セクションの前後に配置できます。


<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} suffix=" mi" />
<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} prefix="%" />
<InputNumber value={value3} onValueChange={(e) => setValue3(e.value)} prefix="Expires in " suffix=" days" />
<InputNumber value={value4} onValueChange={(e) => setValue4(e.value)} prefix="&uarr; " suffix="℃" min={0} max={40} />
 

ボタン#

スピナーボタンは、showButtonsプロパティを使用して有効にし、レイアウトはbuttonLayoutで定義します。


<InputNumber value={value1} onValueChange={(e: InputNumberValueChangeEvent) => setValue1(e.value)} showButtons mode="currency" currency="USD" />
<InputNumber value={value3} onValueChange={(e: InputNumberValueChangeEvent) => setValue3(e.value)} mode="decimal" showButtons min={0} max={100} />
<InputNumber value={value2} onValueChange={(e: InputNumberValueChangeEvent) => setValue2(e.value)} showButtons buttonLayout="horizontal" step={0.25}
            decrementButtonClassName="p-button-danger" incrementButtonClassName="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
            mode="currency" currency="EUR" />
 

垂直方向#

buttonLayoutをverticalに設定することで、ボタンを垂直方向に配置することもできます。


<InputNumber value={value} onValueChange={(e) => setValue(e.value)} showButtons buttonLayout="vertical" style={{ width: '4rem' }} 
    decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
 

フロートラベル#

フォーカスされた場合、入力フィールドの上部にフロートラベルが表示されます。詳細については、FloatLabelのドキュメントを参照してください。


<FloatLabel>
    <InputNumber id="number-input" value={value} onValueChange={(e) => setValue(e.value)} />
    <label htmlFor="number-input">Number</label>
</FloatLabel>
 

塗りつぶし#

デフォルトのoutlinedスタイルよりも高い視覚的な強調表示でコンポーネントを表示するには、variantプロパティをfilledに指定します。


<InputNumber variant="filled" value={value} onValueChange={(e) => setValue(e.value)} mode="decimal" minFractionDigits={2} />
 

無効#

invalidプロパティを使用して無効状態を表示し、検証の失敗を示します。フォーム検証ライブラリと統合する際にこのスタイルを使用できます。


<InputNumber invalid value={value} onValueChange={(e) => setValue(e.value)} mode="decimal" minFractionDigits={2} />
 

無効#

disabledが存在する場合、要素は編集およびフォーカスできません。


<InputNumber value={value} disabled prefix="%" />
 

アクセシビリティ#

スクリーンリーダー

コンポーネントを記述する値は、inputIdプロパティと組み合わせたlabelタグ、またはaria-labelledby、aria-labelプロパティを使用して提供できます。入力要素は、 aria-valuemin、aria-valuemax、aria-valuenow属性に加えて、spinbuttonロールを使用します。spanとinputには一意の識別子を割り当ててください。


<label htmlFor="input-price">Price</label>
<InputNumber id="span-price" inputId="input-price" />

<span id="label_number">Number</span>
<InputNumber aria-labelledby="label_number" />

<InputNumber aria-label="Number" />
     

キーボードサポート

キー機能
tab入力にフォーカスを移動します。
上矢印値を増やします。
下矢印値を減らします。
home最小値を設定します（指定されている場合）。
end最大値を設定します（指定されている場合）。
                          PrimeReact 10.8.3 by PrimeTek