Skip to main content

Currency-Input

The TkCurrencyInput component allows users to input phone numbers with country selection and validation.

import { TkCurrencyInput } from '@takeoff-ui/react'

Playground​

Preview

Generated Code

<TkCurrencyInput
  size="base"
  placeholder="Enter amount"
  defaultCurrency="TRY"
  dropdownWidthMode="match-parent"
  label="Amount"
  precision={2}
  currencyList={[{"code":"GBP","id":"GB","symbol":"£","name":"British Pound","decimalSeparator":".","thousandsSeparator":","},{"code":"TRY","id":"TR","symbol":"₺","name":"Turkish Lira","decimalSeparator":",","thousandsSeparator":"."},{"code":"JPY","id":"JP","symbol":"¥","name":"Japanese Yen","decimalSeparator":".","thousandsSeparator":","}]}
/>
<TkCurrencyInput
  size="base"
  placeholder="Enter amount"
  defaultCurrency="TRY"
  dropdownWidthMode="match-parent"
  label="Amount"
  :precision="2"
  :currencyList="[{"code":"GBP","id":"GB","symbol":"£","name":"British Pound","decimalSeparator":".","thousandsSeparator":","},{"code":"TRY","id":"TR","symbol":"₺","name":"Turkish Lira","decimalSeparator":",","thousandsSeparator":"."},{"code":"JPY","id":"JP","symbol":"¥","name":"Japanese Yen","decimalSeparator":".","thousandsSeparator":","}]"
/>
<tk-currency-input
  size="base"
  placeholder="Enter amount"
  defaultCurrency="TRY"
  dropdownWidthMode="match-parent"
  label="Amount"
  [precision]="2"
  [currencyList]="[{"code":"GBP","id":"GB","symbol":"£","name":"British Pound","decimalSeparator":".","thousandsSeparator":","},{"code":"TRY","id":"TR","symbol":"₺","name":"Turkish Lira","decimalSeparator":",","thousandsSeparator":"."},{"code":"JPY","id":"JP","symbol":"¥","name":"Japanese Yen","decimalSeparator":".","thousandsSeparator":","}]"
/>

Controls

Basic​

A simple TkCurrencyInput display.

View Code
<TkCurrencyInput
  label="Currency Input"
  hint="Hint text"
  placeholder="Placeholder text"
/>

Custom Currency List​

You can provide a custom list of currencies to the currency input. This allows you to control which currencies are available for selection in the dropdown.

const currencyList = [
  {
    code: 'GBP',
    id: 'GB',
    symbol: '£',
    name: 'British Pound',
    decimalSeparator: '.',
    thousandsSeparator: ',',
  },
  {
    code: 'TRY',
    id: 'TR',
    symbol: '₺',
    name: 'Turkish Lira',
    decimalSeparator: ',',
    thousandsSeparator: '.',
  },
  {
    code: 'JPY',
    id: 'JP',
    symbol: '¥',
    name: 'Japanese Yen',
    decimalSeparator: '.',
    thousandsSeparator: ',',
  },
];
View Code
<TkCurrencyInput 
    label="Currency Input"
    showAsterisk={true}
    currencyList={currencyList}
    defaultCurrency="GBP"
    value={value}
    onTkChange={(e) => setValue(e.detail)}
    />

Custom Separators​

The "decimalSeparator" and "thousandsSeparator" props allow you to customize the formatting of the currency input. You can set these props to your desired characters for decimal and thousands separation.

View Code
<TkCurrencyInput
    label="Currency Franche Example"
    decimalSeparator=","
    thousandsSeparator=" "
  />

Allow Negative Value​

The "allowNegative" prop allows the input to accept negative values. When set to true, users can enter negative amounts.

View Code
<TkCurrencyInput
  label="Currency Input"
  showAsterisk
  placeholder="Placeholder text"
  allowNegative
/>

Allow Empty Value​

The "allowEmptyValue" prop allows the value to be null.

Current value: null
View Code
<TkCurrencyInput
  label="Amount"
  placeholder="Type and clear"
  allowEmptyValue
/>

Minimum and Maximum Value​

The "min" and "max" props define the allowed numeric range. A value outside this range is clamped to the nearest limit, both when it is set via the "value" prop and when the user edits the field and it loses focus.

View Code
<TkCurrencyInput
  label="Currency Input"
  hint="Allowed range: 100 - 10000"
  min={100}
  max={10000}
  value={50000}
/>

Maximum Integer Digits​

The "maxIntegerDigits" prop limits how many digits the integer part can hold. Longer numbers can neither be typed nor pasted, and a value set through the "value" prop is clamped to the largest number that fits. Decimal digits are not counted; they are controlled by the "precision" prop.

The integer and decimal digits together are capped at 15, the number of digits a JavaScript number can represent exactly. A larger "maxIntegerDigits" is reduced to that cap, so amounts beyond it are limited more strictly than requested rather than losing precision.

View Code
<TkCurrencyInput
  label="Currency Input"
  hint="At most 5 integer digits"
  maxIntegerDigits={5}
  value={12345}
/>

Size​

The "size" prop can be used with one of the sizes "small", "base", and "large". The default value is "base".

View Code
<TkCurrencyInput
  label="Small Currency Input"
  size="small"
/>
<TkCurrencyInput
  label="Base Currency Input"
  size="base"
/>
<TkCurrencyInput
  label="Large Currency Input"
  size="large"
/>

State​

This example illustrates the disabled, readonly, and invalid states of the input field. Each state demonstrates how the input behaves and visually changes in different interaction scenarios.

View Code
<TkCurrencyInput
  label="Error"
  placeholder="Error"
  invalid={true}
  error="Bu alan zorunludur"
/>
<TkCurrencyInput
  label="Readonly"
  placeholder="Readonly"
  readonly
/>
<TkCurrencyInput
  label="Disabled"
  placeholder="Disabled"
  disabled
/>

API​

Props​

NameTypeDefaultDescription
booleanfalseAllows the value to be set to null.
booleanfalseAllows negative values to be entered if set to true.
booleanfalseDisables the currency field if set to true.
ICurrency[]nullList of available currencies. If not provided, it defaults to the internal currency list.
SeparatornullCustom decimal separator to use for formatting. If provided, this will override the currency's default decimal separator. Example: "." for USD style, "," for EUR style
string'TRY'The default currency to use when the component is initialized. Default is 'TRY'.
booleanfalseDisables the input field if set to true.
string'match-parent'Determines the width of the dropdown. Accepts values like 'match-parent', 'auto', or a specific width in '300px'.
stringnullThis is the error message that will be displayed.
booleanfalseHides the currency flag icon in the dropdown button and list.
stringnullProvided a hint or additional information about the input.
booleanfalseMarks the input field as invalid if set to true.
stringnullThe label for the input field. If provided, it will be displayed above the input.
numbernullMaximum value allowed for the input.
numbernullMaximum number of digits allowed in the integer part of the value.
numbernullMinimum value allowed for the input.
stringnullThe name attribute for the input element. Useful for form submissions.
stringnullPlaceholder text for the input field.
number2The number of decimal places to display in the formatted currency value. Default is 2, which is common for most currencies.
booleanfalseMakes the input field read-only if set to true.
booleanfalseDisplays a red asterisk (*) next to the label for visual emphasis.
"base", "large", "small"'base'Sets size for the component.
SeparatornullCustom thousands separator to use for formatting. If provided, this will override the currency's default thousands separator. Example: "," for USD style, "." for EUR style, " " for some European styles
number0The value of the input.

Events​

NameDescription
tk-changeEmitted when the value has changed.
tkBlurEmitted when the input loses focus.
tkFocusEmitted when the input has focus.

Interfaces​

ICurrency​

Interfaces for the tk-currency-input component.

interface ICurrency {
  id: string;
  code: string;
  symbol: string;
  name: string;
  decimalSeparator: Separator;
  thousandsSeparator: Separator;
}