The AmountInput is a number input designed to handle currency amounts.
View source code
const Demo = () => {
const [selectedValue, setSelectedValue] = useState<number | null>(null);
return (
<AmountInput
currency={{ key: "EUR", label: "€ - Euro" }}
value={selectedValue}
onChange={(_, newValue) => {
setSelectedValue(newValue);
}}
/>
);
};
Use the inputVariant prop to control the visual style of the Autocomplete.
The Autocomplete comes with two visual styles: default (default) and magicGradient.
<AmountInput variant="magicGradient" {...otherProps} />
The AmountInput supports multiple currencies using currencies prop.
onSelectCurrency also needs to be provided to catch the event when the user updates the currency.
If both are provided, a dropdown will be displayed with the predefined currencies.
<AmountInput
currencies={currencies}
onSelectCurrency={(selectedCurrency) => {
setCurrency(selectedCurrency);
}}
currency={currentCurrency}
{...otherProps}
/>
By default, the AmountInput doesn't allow negative values. Use hasNegativeValueAllowed to allow negative values.
<AmountInput hasNegativeValueAllowed {...otherProps} />
Use the leftAddon prop to add a ReactNode on the left side of the input.
<AmountInput
leftAddon={
<div className="ml-8 mt-4">
<Icon name="robot" />
</div>
}
{...otherProps}
/>