InputNumber

带增减控件和值约束的数字输入字段。

导入

import { InputNumber } from 'asterui'

示例

基础数字输入

带增减控件的简单数字输入。

</>

import { InputNumber } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState(0);
  
  return (
      <InputNumber value={value} onChange={setValue} />
    )
}

export default App

最小/最大限制

带最小和最大值约束的数字输入。

</>

Value: 5 (min: 0, max: 10)

import { InputNumber, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState(5);
  
  return (
      <Space direction="vertical" size="sm">
        <InputNumber
          value={value}
          onChange={setValue}
          min={0}
          max={10}
        />
        <div className="text-sm text-base-content/70">
          Value: {value} (min: 0, max: 10)
        </div>
      </Space>
    )
}

export default App

自定义步长

带自定义增减步长值的数字输入。

</>

Step: 5

import { InputNumber, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState(0);
  
  return (
      <Space direction="vertical" size="sm">
        <InputNumber
          value={value}
          onChange={setValue}
          step={5}
        />
        <div className="text-sm text-base-content/70">
          Step: 5
        </div>
      </Space>
    )
}

export default App

小数精度

带小数精度控制的数字输入。

</>

Precision: 2 decimal places

import { InputNumber, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState(0);
  
  return (
      <Space direction="vertical" size="sm">
        <InputNumber
          value={value}
          onChange={setValue}
          step={0.1}
          precision={2}
        />
        <div className="text-sm text-base-content/70">
          Precision: 2 decimal places
        </div>
      </Space>
    )
}

export default App

尺寸

五种尺寸：xs、sm、md、lg 和 xl。

</>

import { InputNumber, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [value1, setValue1] = useState(0);
  const [value2, setValue2] = useState(0);
  const [value3, setValue3] = useState(0);
  const [value4, setValue4] = useState(0);
  const [value5, setValue5] = useState(0);
  
  return (
      <Space direction="vertical" size="sm">
        <InputNumber size="xs" value={value1} onChange={setValue1} />
        <InputNumber size="sm" value={value2} onChange={setValue2} />
        <InputNumber size="md" value={value3} onChange={setValue3} />
        <InputNumber size="lg" value={value4} onChange={setValue4} />
        <InputNumber size="xl" value={value5} onChange={setValue5} />
      </Space>
    )
}

export default App

无控件

没有增减按钮的数字输入。

</>

import { InputNumber } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState(0);
  
  return (
      <InputNumber
        value={value}
        onChange={setValue}
        controls={false}
      />
    )
}

export default App

禁用

禁用的数字输入状态。

</>

import { InputNumber, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState(42);
  
  return (
      <Space direction="vertical" size="sm">
        <InputNumber value={value} onChange={setValue} />
        <InputNumber value={42} onChange={() => {}} disabled />
      </Space>
    )
}

export default App

API

InputNumber

属性	描述	类型	默认值
value	当前数字值（受控）	number	-
defaultValue	初始值（非受控）	number	-
onChange	值变化时的回调	(value: number | null) => void	-
min	最小值	number	-Infinity
max	最大值	number	Infinity
step	值增减步长	number	1
precision	显示的小数精度	number	-
formatter	格式化显示值	(value: number | undefined) => string	-
parser	解析显示值为数字	(displayValue: string) => number	-
controls	显示增减按钮	boolean	true
disabled	禁用状态	boolean	false
size	输入尺寸	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
block	全宽输入	boolean	false
className	额外的 CSS 类名	string	-

无障碍

• 使用 role="spinbutton" 和 inputMode="decimal" 以获得正确的语义
• 为屏幕阅读器暴露 aria-valuemin、aria-valuemax 和 aria-valuenow
• 增减按钮有 aria-label 供屏幕阅读器使用
• 禁用状态正确传达给屏幕阅读器
• 键盘导航的焦点状态清晰可见
• 方向键可用于增减值