React
Is new design vision part implemented using new tokens?
Up to date
Resources
Example
import { NumberInput, NumberInputValue } from '@optimus-web/core';
import { useState } from 'react';
const MyForm = () => {
const [value, setValue] = useState<NumberInputValue>();
const [error, setError] = useState('');
const handleChange = (_event: NumberInputEvent, newValue?: number) => {
setValue(newValue);
if (newValue !== undefined) {
if (newValue < 0) {
setError('Value cannot be negative');
} else if (newValue > 1000) {
setError('Value exceeds maximum limit');
} else {
setError('');
}
}
};
return (
<NumberInput
label="Price"
value={value}
onChange={handleChange}
min={0}
max={1000}
precision={2}
step={0.01}
prefix="$"
suffix="USD"
helper="Enter a price between $0 and $1000"
error={error}
decimalSeparator=","
groupSeparator="."
/>
);
}