Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    AmountInput

    An amount of money typed in the Provider language and reported in exact minor units, never a float.

    Storybook
    Storybook
    Source
    Source

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { AmountInput } from '@bigbang/ui';
    Source
    AmountInput.tsx
    Storybook
    AmountInput · Playground

    AmountInput is in the @bigbang/ui package.

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

    const [amount, setAmount] = useState<bigint | null>(null);
    

    <AmountInput label="Amount" value={amount} onValueChange={setAmount} min={1000n} name="amount" />;

    Props

    Section titled “Props”
    labelRequired
    Description
    The visible label of the field. The currency name is added for screen readers: "Tutar (Türk lirası)".
    Type
    string
    description
    Description
    Help text under the field, linked to the input with aria-describedby.
    Type
    ReactNode
    error
    Description
    When set, the field is marked invalid and this message replaces the built-in ones.
    Type
    string
    invalid
    Description
    Marks the field invalid without a message, for example when the message is in an error summary.
    Type
    boolean
    Default
    false
    required
    Description
    The value is required: the input gets required, and the label is marked.
    Type
    boolean
    Default
    false
    necessityIndicator
    Description
    Which fields the form marks: 'required' marks required fields, 'optional' marks the others.
    Type
    'required' | 'optional'
    Default
    'required'
    size
    Description
    Input height: 32, 36 and 40 px.
    Type
    'sm' | 'md' | 'lg'
    Default
    'md'
    currency
    Description
    ISO 4217 currency code; it sets the symbol and the fraction digits (2 for TRY, 0 for JPY).
    Type
    string
    Default
    'TRY'
    currencyDisplay
    Description
    How the currency is shown in the box: narrowSymbol (₺) or code (TRY).
    Type
    'symbol' | 'narrowSymbol' | 'code'
    Default
    'narrowSymbol'
    value
    Description
    Controlled amount in minor units (123456n is 1.234,56), or null for empty. Pass it with onValueChange.
    Type
    MinorUnits | null
    defaultValue
    Description
    Initial amount in minor units when the field is uncontrolled.
    Type
    MinorUnits | null
    onValueChange
    Description
    Called with the amount in minor units as a bigint, or null when the field is emptied. Not called while the text has too many decimals.
    Type
    (value: bigint | null) => void
    min
    Description
    Lowest amount in minor units; below it, ui.amount-input.min is shown.
    Type
    MinorUnits
    max
    Description
    Highest amount in minor units; above it, ui.amount-input.max is shown.
    Type
    MinorUnits
    allowNegative
    Description
    Lets the amount be negative, for corrections and adjustments.
    Type
    boolean
    Default
    false
    placeholder
    Description
    A format hint such as "0,00"; never the only instruction.
    Type
    string
    readOnly
    Description
    The value can be read, focused and copied but not changed.
    Type
    boolean
    Default
    false
    disabled
    Description
    Disables the field and its label; the value is not submitted with the form.
    Type
    boolean
    Default
    false
    name
    Description
    Field name; the form gets the amount in minor units as an integer string ("123456").
    Type
    string
    className
    Description
    Added to the root element; use it for layout only.
    Type
    string

    Data attributes

    Section titled “Data attributes”
    • data-component="amount-input".
    • data-part: box, control, currency.