InputNumber

Campo de entrada numérica com controles de incremento/decremento e restrições de valor.

Importação

import { InputNumber } from 'asterui'

Exemplos

InputNumber Básico

Entrada de número simples com 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

Limites Min/Max

Entrada de número com restrições de valor mínimo e 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

Step Personalizado

Entrada de número com valor de passo 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

Precisão Decimal

Entrada de número com controle de precisão 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

Tamanhos

Cinco tamanhos: xs, sm, md, lg e 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

Sem Controles

Entrada de número sem botões 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

Desabilitado

Estado de entrada de número desabilitado.

</>

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

Propriedade	Descrição	Tipo	Padrão
value	Valor numérico atual (controlado)	number	-
defaultValue	Valor inicial (não controlado)	number	-
onChange	Callback quando valor muda	(value: number | null) => void	-
min	Valor mínimo	number	-Infinity
max	Valor máximo	number	Infinity
step	Passo de incremento/decremento de valor	number	1
precision	Precisão decimal para exibição	number	-
formatter	Formatar valor de exibição	(value: number | undefined) => string	-
parser	Analisar valor de exibição para número	(displayValue: string) => number	-
controls	Mostrar botões de incremento/decremento	boolean	true
disabled	Estado desabilitado	boolean	false
size	Tamanho do input	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
block	Input de largura total	boolean	false
className	Classes CSS adicionais	string	-

Acessibilidade

• Usa role="spinbutton" com inputMode="decimal" para semântica adequada
• Expõe aria-valuemin, aria-valuemax e aria-valuenow para leitores de tela
• Botões de incremento/decremento têm aria-label para usuários de leitores de tela
• Estado desabilitado é anunciado adequadamente para leitores de tela
• Estados de foco são claramente visíveis para navegação por teclado
• Teclas de seta podem ser usadas para incrementar/decrementar valores