TradeInput

Currency amount input with integrated currency picker for trade flows.

Open in Storybook

Interactive Demo

You convert

States

Different states

Default

Filled

Error

Insufficient balance

Disabled

Usage

<script setup>
import { ref } from 'vue';
import { TradeInput } from '@yellowcard/b2b-design-system';

const amount = ref('');
const currency = ref('NGN');
const currencies = [
  { label: 'Nigerian Naira', value: 'NGN' },
  { label: 'US Dollar', value: 'USD' },
];
</script>

<template>
  <TradeInput
    v-model="amount"
    label="You send"
    :selectedCurrency="currency"
    :currencies="currencies"
  />
</template>

API Reference

Props

Prop	Type	Default	Description
modelValue	string	''	Amount value (v-model)
label	string	'You convert'	Input label
placeholder	string	'0.00'	Placeholder text
selectedCurrency	string	''	Selected currency code
currencies	CurrencyOption[]	[]	Available currencies
state	string	'default'	Input state (default, hover, active, focus, filled, error, disabled)
disabled	boolean	false	Disabled state
inputDisabled	boolean	false	Disable only the input
currencyDisabled	boolean	false	Disable currency picker
errorMessage	string	''	Error message text
maxDecimals	number	2	Maximum decimal places
formatAsCurrency	boolean	true	Format with currency notation
showThousandsSeparator	boolean	true	Show thousands separators
showChevron	boolean	true	Show currency dropdown chevron

Events

Event	Payload	Description
update:modelValue	string	Amount value changed
currency-change	string	Currency selection changed