Grapes homepage1.44.0

    AmountInput

    The AmountInput is a number input designed to handle currency amounts.

    View source code

    Basic Usage

    €
    const Demo = () => {
  const [selectedValue, setSelectedValue] = useState<number | null>(null);

  return (
    <AmountInput
      currency={{ key: "EUR", label: "€ - Euro" }}
      value={selectedValue}
      onChange={(event) => {
        setSelectedValue(event.target.valueAsNumber);
      }}
    />
  );
};

    Variant

    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} />

    Multiple currencies

    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}
/>

      Allow negative value

      By default, the AmountInput doesn't allow negative values. Use hasNegativeValueAllowed to allow negative values.

      €
      <AmountInput hasNegativeValueAllowed {...otherProps} />

      Customize input

      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}
/>