AmountInput

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

The currency sits inside the box, after the number in Turkish. On leaving the field the amount is formatted as 1,234.50.

Amount (Turkish Lira)

₺

Separate the fraction with a decimal point.

LightDark

Copy code

import { AmountInput, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <AmountInput label="Amount" description="Separate the fraction with a decimal point." placeholder="0.00" className="max-w-xs" />
    </Provider>
  );
}

Limits and value

min and max are in minor units; outside them the field shows its own message. onValueChange gives a bigint.

Amount (Turkish Lira)

₺

At least ₺10.00, at most ₺50,000.00.

150000n

LightDark

Copy code

import { AmountInput, Provider } from '@bigbang/ui';
import { useState } from 'react';

export default function Limits() {
  const [value, setValue] = useState<bigint | null>(150000n);
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-xs flex-col gap-md">
        <AmountInput label="Amount" description="At least ₺10.00, at most ₺50,000.00." value={value} onValueChange={setValue} min={1000n} max={5000000n} name="amount" />
        <code className="type-body-sm text-fg-subtle">{value === null ? 'null' : `${value}n`}</code>
      </div>
    </Provider>
  );
}

Light and dark mode

The box uses the same tokens as TextInput.

Light

Amount (Turkish Lira)

₺

Separate the fraction with a decimal point.

Dark

Amount (Turkish Lira)

₺

Separate the fraction with a decimal point.

Copy code

import { AmountInput, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <AmountInput label="Amount" description="Separate the fraction with a decimal point." placeholder="0.00" className="max-w-xs" />
    </Provider>
  );
}