InputNumber

Input numerical values with a customizable range.

Import: import { InputNumber } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

Basic Usage

Use the mouse or keyboard to enter a value within a customizable range.

<InputNumber min={-2} max={10} step={3}/>

1
<InputNumber min={-2} max={10} step={3}/>
2

Disabled Status

<InputNumber disabled placeholder="请输入.." />

1
<InputNumber disabled placeholder="请输入.." />
2

ReadOnly status

<InputNumber defaultValue={5} readOnly/>

1
<InputNumber defaultValue={5} readOnly/>
2

Decimal Number

<InputNumber
  precision={5}
  decimalSeparator=","
  step={0.00001}
/>

1
<InputNumber
2
  precision={5}
3
  decimalSeparator=","
4
  step={0.00001}
5
/>
6

High precision decimals

Use stringMode to support high precision decimals support. onChange will return string value instead.

() => {
  function onChange(value){
    console.log('changed',value)
  }
  return (
    <InputNumber
      min={0}
      max={10}
      step={0.0000000000000000001}
      stringMode
      width={300}
      onChange={onChange}
    />
  )
}

1
() => {
2
  function onChange(value){
3
    console.log('changed',value)
4
  }
5
  return (
6
    <InputNumber
7
      min={0}
8
      max={10}
9
      step={0.0000000000000000001}
10
      stringMode
11
      width={300}
12
      onChange={onChange}
13
    />
14
  )
15
}
16

Formatter

Display value within it's situation with formatter, and we usually use parser at the same time.

() => {
  function onChange(value){
    console.log('changed',value)
  }
  return (
    <InputNumber
      defaultValue={100}
      min={0}
      max={100}
      formatter={value => `${value}%`}
      parser={value => value.replace('%', '')}
      onChange={onChange}
    />
  )
}

1
() => {
2
  function onChange(value){
3
    console.log('changed',value)
4
  }
5
  return (
6
    <InputNumber
7
      defaultValue={100}
8
      min={0}
9
      max={100}
10
      formatter={value => `${value}%`}
11
      parser={value => value.replace('%', '')}
12
      onChange={onChange}
13
    />
14
  )
15
}
16