Input Number
InputNumber is an input component used to capture and manage numerical values.
@react-input/number-format1'use client'
2
3import React, { useState } from 'react'
4
5import { InputNumber } from '@/components/ui/input-number'
6import { Label } from '@/components/ui/label'
7
8export function InputNumberDemo() {
9 const [value1, setValue1] = useState(47857)
10 const [value2, setValue2] = useState(9874)
11 const [value3, setValue3] = useState(2351.35)
12 const [value4, setValue4] = useState(97)
13
14 return (
15 <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-2">
16 <div className="space-y-2">
17 <Label>Integer Only</Label>
18 <InputNumber
19 value={value1}
20 onChange={(e) => setValue1(Number(e.target.value))}
21 maximumFractionDigits={0}
22 />
23 </div>
24 <div className="space-y-2">
25 <Label>Without Grouping</Label>
26 <InputNumber
27 value={value2}
28 onChange={(e) => setValue2(Number(e.target.value))}
29 useGrouping={false}
30 />
31 </div>
32 <div className="space-y-2">
33 <Label>Min–Max Fraction Digits</Label>
34 <InputNumber
35 value={value3}
36 onChange={(e) => setValue3(Number(e.target.value))}
37 minimumFractionDigits={2}
38 maximumFractionDigits={5}
39 />
40 </div>
41 <div className="space-y-2">
42 <Label>Min–Max Boundaries</Label>
43 <InputNumber
44 value={value4}
45 onChange={(e) => setValue4(Number(e.target.value))}
46 min={0}
47 max={100}
48 />
49 </div>
50 </div>
51 )
52}
53Installation
1
Install the following dependencies:
npx shadcn@latest add https://sbthemes.com/r/input-number.json
Examples
Prefix Suffix
1'use client'
2
3import React, { useState } from 'react'
4
5import { InputNumber } from '@/components/ui/input-number'
6import { Label } from '@/components/ui/label'
7
8export function InputNumberPrefixSuffix() {
9 const [mile, setMile] = useState(20)
10 const [percent, setPercent] = useState(50)
11 const [expiry, setExpiry] = useState(10)
12 const [temp, setTemp] = useState(20)
13
14 return (
15 <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-2">
16 <div className="space-y-2">
17 <Label>Mile</Label>
18 <InputNumber
19 value={mile}
20 onChange={(e) => setMile(Number(e.target.value))}
21 suffix=" mi"
22 />
23 </div>
24 <div className="space-y-2">
25 <Label>Percent</Label>
26 <InputNumber
27 value={percent}
28 onChange={(e) => setPercent(Number(e.target.value))}
29 prefix="%"
30 maximumFractionDigits={0}
31 />
32 </div>
33 <div className="space-y-2">
34 <Label>Expiry</Label>
35 <InputNumber
36 value={expiry}
37 onChange={(e) => setExpiry(Number(e.target.value))}
38 prefix="Expires in "
39 suffix=" days"
40 />
41 </div>
42 <div className="space-y-2">
43 <Label>Temperature</Label>
44 <InputNumber
45 value={temp}
46 onChange={(e) => setTemp(Number(e.target.value))}
47 prefix="↑ "
48 suffix="°C"
49 min={0}
50 max={40}
51 />
52 </div>
53 </div>
54 )
55}
56Locale
1'use client'
2
3import React, { useState } from 'react'
4
5import { InputNumber } from '@/components/ui/input-number'
6import { Label } from '@/components/ui/label'
7
8export function InputNumberLocale() {
9 const [value1, setValue1] = useState(151351)
10 const [value2, setValue2] = useState(115744)
11 const [value3, setValue3] = useState(635524)
12 const [value4, setValue4] = useState(732762)
13
14 return (
15 <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-2">
16 <div className="space-y-2">
17 <Label>User Locale</Label>
18 <InputNumber
19 value={value1}
20 onChange={(e) => setValue1(Number(e.target.value))}
21 minimumFractionDigits={2}
22 />
23 </div>
24 <div className="space-y-2">
25 <Label>United States Locale</Label>
26 <InputNumber
27 value={value2}
28 onChange={(e) => setValue2(Number(e.target.value))}
29 locale="en-US"
30 minimumFractionDigits={2}
31 />
32 </div>
33 <div className="space-y-2">
34 <Label>German Locale</Label>
35 <InputNumber
36 value={value3}
37 onChange={(e) => setValue3(Number(e.target.value))}
38 locale="de-DE"
39 minimumFractionDigits={2}
40 />
41 </div>
42 <div className="space-y-2">
43 <Label>Indian Locale</Label>
44 <InputNumber
45 value={value4}
46 onChange={(e) => setValue4(Number(e.target.value))}
47 locale="en-IN"
48 minimumFractionDigits={2}
49 />
50 </div>
51 </div>
52 )
53}
54Currency
1'use client'
2
3import React, { useState } from 'react'
4
5import { InputNumber } from '@/components/ui/input-number'
6import { Label } from '@/components/ui/label'
7
8export function InputNumberCurrency() {
9 const [value1, setValue1] = useState(1500)
10 const [value2, setValue2] = useState(2500)
11 const [value3, setValue3] = useState(4250)
12 const [value4, setValue4] = useState(5002)
13
14 return (
15 <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-2">
16 <div className="space-y-2">
17 <Label>United States</Label>
18 <InputNumber
19 value={value1}
20 onChange={(e) => setValue1(Number(e.target.value))}
21 mode="currency"
22 currency="USD"
23 locale="en-US"
24 />
25 </div>
26 <div className="space-y-2">
27 <Label>Germany</Label>
28 <InputNumber
29 value={value2}
30 onChange={(e) => setValue2(Number(e.target.value))}
31 mode="currency"
32 currency="EUR"
33 locale="de-DE"
34 />
35 </div>
36 <div className="space-y-2">
37 <Label>India</Label>
38 <InputNumber
39 value={value3}
40 onChange={(e) => setValue3(Number(e.target.value))}
41 mode="currency"
42 currency="INR"
43 currencyDisplay="code"
44 locale="en-IN"
45 />
46 </div>
47 <div className="space-y-2">
48 <Label>Japan</Label>
49 <InputNumber
50 value={value4}
51 onChange={(e) => setValue4(Number(e.target.value))}
52 mode="currency"
53 currency="JPY"
54 locale="ja-JP"
55 />
56 </div>
57 </div>
58 )
59}
60API Reference
InputNumber
| Prop | Type | Default |
|---|---|---|
| min | number | - |
| max | number | - |
| value | number | - |
| onChange | (e: React.ChangeEvent<HTMLInputElement>) => void | - |
| minimumFractionDigits | number | - |
| maximumFractionDigits | number | - |
| locale | Intl.LocalesArgument | navigator.language |
| useGrouping | boolean | true |
| prefix | string | - |
| suffix | string | - |
| currency | string | - |
| mode | currency,decimal | decimal |
| currencyDisplay | symbol ,code,name | symbol |
On This Page