Currency-Input

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

React

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

Vue

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

Angular

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

Basic

A simple TkCurrencyInput display.

View Code

React

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

Vue

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

Angular

<tk-currency-input
  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

React

<TkCurrencyInput 
    label="Currency Input"
    showAsterisk={true}
    currencyList={currencyList}
    defaultCurrency='TRY'
    value={value}
    onTkChange={(e) => setValue(e.detail)}
    />

Vue

<TkCurrencyInput 
    label="Currency Input"
    :showAsterisk="true"
    :currencyList="currencyList"
    defaultCurrency="TRY"
    v-model="value"
   />

Angular

<tk-currency-input
    label="Currency Input"
    [showAsterisk]="true"
    [currencyList]="currencyList"
    defaultCurrency="TRY"
    [(ngModel)]="value"
  />

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

React

<TkCurrencyInput
    label="Currency Franche Example"
    decimal-separator=","
    thousands-separator=" "
  />

Vue

<TkCurrencyInput
    label="Currency Franche Example"
    decimal-separator=","
    thousands-separator=" "
  />

Angular

<tk-currency-input
    label="Currency Franche Example"
    decimal-separator=","
    thousands-separator=" "
  />

Allow Negative Value

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

View Code

React

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

Vue

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

Angular

<tk-currency-input
  label="Currency Input"
  show-asterisk
  placeholder="Placeholder text"
  allow-negative
/>

Size

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

View Code

React

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

Vue

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

Angular

<tk-currency-input
  label="Small Currency Input"
  size="small"
/>
<tk-currency-input
  label="Base Currency Input"
  size="base"
/>
<tk-currency-input
  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

React

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

Vue

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

Angular

<tk-currency-input
  label="Error"
  placeholder="Error"
  [invalid]="true"
  error="Bu alan zorunludur"
/>
<tk-currency-input
  label="Readonly"
  placeholder="Readonly"
  readonly
/>
<tk-currency-input
  label="Disabled"
  placeholder="Disabled"
  disabled
/>

API

Props

Name	Type	Default	Description
	boolean	false	Allows negative values to be entered if set to true.
	ICurrency[]	null	List of available currencies. If not provided, it defaults to the internal currency list.
	string	null	Custom 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'.
	boolean	false	Disables the input field if set to true.
	string	null	This is the error message that will be displayed.
	string	null	Provided a hint or additional information about the input.
	boolean	false	Marks the input field as invalid if set to true.
	string	null	The label for the input field. If provided, it will be displayed above the input.
	string	null	The name attribute for the input element. Useful for form submissions.
	string	null	Placeholder text for the input field.
	number	2	The number of decimal places to display in the formatted currency value. Default is 2, which is common for most currencies.
	boolean	false	Makes the input field read-only if set to true.
	boolean	false	Displays a red asterisk (*) next to the label for visual emphasis.
	"base", "large", "small"	'base'	Sets size for the component.
	string	null	Custom 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
	number	0	The value of the input.

Events

Name	Description
tk-change	Emitted when the value has changed.
tkBlur	Emitted when the input loses focus.
tkFocus	Emitted 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: string;
  thousandsSeparator: string;
}