InputNumber

Campo de entrada numérico con controles de incremento/decremento y restricciones de valor.

Importar

import { InputNumber } from 'asterui'

Ejemplos

InputNumber Básico

Entrada numérica simple con controles de incremento/decremento.

</>

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

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

export default App

Límites Mín/Máx

Entrada numérica con restricciones de valor mínimo y máximo.

</>

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

Paso Personalizado

Entrada numérica con valor de paso de incremento/decremento personalizado.

</>

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

Precisión Decimal

Entrada numérica con control de precisión decimal.

</>

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

Tamaños

Cinco tamaños: xs, sm, md, lg y 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

Sin Controles

Entrada numérica sin botones de incremento/decremento.

</>

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

Deshabilitado

Estado de entrada numérica deshabilitado.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
value	Valor numérico actual (controlado)	number	-
defaultValue	Valor inicial (no controlado)	number	-
onChange	Callback cuando cambia el valor	(value: number | null) => void	-
min	Valor mínimo	number	-Infinity
max	Valor máximo	number	Infinity
step	Paso de incremento/decremento de valor	number	1
precision	Precisión decimal para visualización	number	-
formatter	Formatea valor de visualización	(value: number | undefined) => string	-
parser	Analiza valor de visualización a número	(displayValue: string) => number	-
controls	Mostrar botones de incremento/decremento	boolean	true
disabled	Estado deshabilitado	boolean	false
size	Tamaño de input	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
block	Input de ancho completo	boolean	false
className	Clases CSS adicionales	string	-

Accesibilidad

• Usa role="spinbutton" con inputMode="decimal" para semántica adecuada
• Expone aria-valuemin, aria-valuemax y aria-valuenow para lectores de pantalla
• Los botones de incremento/decremento tienen aria-label para usuarios de lectores de pantalla
• El estado deshabilitado se anuncia apropiadamente a lectores de pantalla
• Los estados de enfoque son claramente visibles para navegación por teclado
• Las teclas de flecha se pueden usar para incrementar/decrementar valores