InputNumber

Champ de saisie numérique avec contrôles d’incrémentation/décrémentation et contraintes de valeur.

Import

import { InputNumber } from 'asterui'

Exemples

InputNumber basique

Saisie de nombre simple avec contrôles d'incrémentation/décrémentation.

</>

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

Saisie de nombre avec contraintes de valeur minimale et maximale.

</>

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

Pas personnalisé

Saisie de nombre avec valeur de pas d'incrémentation/décrémentation personnalisée.

</>

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

Précision décimale

Saisie de nombre avec contrôle de précision décimale.

</>

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

Tailles

Cinq tailles : xs, sm, md, lg et 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

Sans contrôles

Saisie de nombre sans boutons d'incrémentation/décrémentation.

</>

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

Désactivé

État d'input number désactivé.

</>

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

Propriété	Description	Type	Par défaut
value	Valeur numérique actuelle (contrôlée)	number	-
defaultValue	Valeur initiale (non contrôlée)	number	-
onChange	Callback lorsque la valeur change	(value: number | null) => void	-
min	Valeur minimale	number	-Infinity
max	Valeur maximale	number	Infinity
step	Pas d’incrémentation/décrémentation de la valeur	number	1
precision	Précision décimale pour l’affichage	number	-
formatter	Formater la valeur d’affichage	(value: number | undefined) => string	-
parser	Analyser la valeur d’affichage en nombre	(displayValue: string) => number	-
controls	Afficher les boutons d’incrémentation/décrémentation	boolean	true
disabled	État désactivé	boolean	false
size	Taille de l’input	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
block	Input en pleine largeur	boolean	false
className	Classes CSS supplémentaires	string	-

Accessibilité

• Utilise role="spinbutton" avec inputMode="decimal" pour une sémantique appropriée
• Expose aria-valuemin, aria-valuemax et aria-valuenow pour les lecteurs d’écran
• Les boutons d’incrémentation/décrémentation ont un aria-label pour les utilisateurs de lecteurs d’écran
• L’état désactivé est correctement annoncé aux lecteurs d’écran
• Les états de focus sont clairement visibles pour la navigation au clavier
• Les touches fléchées peuvent être utilisées pour incrémenter/décrémenter les valeurs