Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Input Currency

v.1.0.0 | Saturn

Usage

The name of the object of tokens to style the inputCurrency component is INPUT_CURRENCY_STYLES.

You can not change the name of the object of tokens.

inputCurrency component has one way to modify the styles:

  • Variant: modify the styles of the InputCurrency.

The structure of the INPUT_CURRENCY_STYLES object is:

Variants and States

Variants can modify the styles for each inner state of the inputCurrency. The states are: InputState;

For each inner state the next tokens can be used:

12345678910
const INPUT_CURRENCY_STYLES = {
  [VARIANT]: {
    [STATE]: InputBasicStateProps & {
      currencyNameContainer?: CommonStyleType & {
        marginLeftOrRightByIsOutAndPosition?: string;
      };
      currencyNameContainerPosition?: InputContentPosition;
      currencyName?: TypographyTypes;
      inputVariant?: string;
      leftExtraStyles?: CSSProp;

Example

inputCurrency theme object example:

12345678910
const INPUT_CURRENCY_STYLES = {
  [VARIANT]: {
    [STATE]: {
      currencyNameContainer: {
        border_radius: 'border_radius',
        width: 'width',
        height: 'height',
      },
      currencyNameContainerPosition: 'position',
      helpMessage: {
Input CurrencyCode API
Input CurrencyAccessibility