Currency

Currency components are Input Fields that allow the user to enter monetary values, displaying a formatted currency string over the input when inactive.

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'currency',
      path: 'price',
      label: 'Price',
    },
  ],
});

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "currency",
      "path": "price",
      "label": "Price"
    }
  ]
}

Props

Use these props to customize your Currency component.

prop	type	description
`placeholder`	string	A placeholder text to display when the currency input has no value
`hint`	string	A description to display below the currency input
`icon`	string	A css class to display an icon inside the input
`currency`	string	The ISO 4217 currency code (e.g., `USD`, `EUR`) to format the number as currency
`step`	number	Numeric step size for user input
`maximumFractionDigits`	number	Maximum number of decimal places to include in the formatted string
`minimumFractionDigits`	number	Minimum number of decimal places to include in the formatted string
`autocomplete`	string	`'on'`, `'off'`, or a space-separated list of W3C autofill tokens

Placeholder

Use the property placeholder to add a placeholder.

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'currency',
      path: 'price',
      label: 'Price',
      props: {
        placeholder: 'Enter the amount',
      },
    },
  ],
});

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "currency",
      "path": "price",
      "label": "Price",
      "props": {
        "placeholder": "Enter the amount"
      }
    }
  ]
}

Hint

Use the property hint to add a description.

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'currency',
      path: 'price',
      label: 'Price',
      props: {
        hint: 'Please enter the price in USD.',
      },
    },
  ],
});

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "currency",
      "path": "price",
      "label": "Price",
      "props": {
        "hint": "Please enter the price in USD."
      }
    }
  ]
}

Icon

Use the property icon to add an icon to the component. The value of icon represents a set of CSS classes separated by spaces. The icon is displayed inside the input field.

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'currency',
      path: 'price',
      label: 'Price',
      props: {
        icon: 'attach_money',
      },
    },
  ],
});

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "currency",
      "path": "price",
      "label": "Price",
      "props": {
        "icon": "attach_money"
      }
    }
  ]
}

Currency & Decimal Formatting

Use the properties currency, minimumFractionDigits, and maximumFractionDigits to tightly control how the monetary value is parsed and formatted when not actively being edited. Default for minimum fraction digits is usually 2.

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'currency',
      path: 'price',
      label: 'Price (EUR)',
      props: {
        currency: 'EUR',
        minimumFractionDigits: 2,
        maximumFractionDigits: 4,
      },
    },
  ],
});

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "currency",
      "path": "price",
      "label": "Price (EUR)",
      "props": {
        "currency": "EUR",
        "minimumFractionDigits": 2,
        "maximumFractionDigits": 4
      }
    }
  ]
}

Precision

Use the properties minimumFractionDigits and maximumFractionDigits to specify the exact number of decimal places for the formatted currency display.

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      uid: 'currency-precision-high',
      kind: 'input',
      type: 'currency',
      path: 'price_high',
      label: 'High Precision (4-6 digits)',
      props: {
        currency: 'USD',
        minimumFractionDigits: 4,
        maximumFractionDigits: 6,
      },
    },
    {
      uid: 'currency-precision-low',
      kind: 'input',
      type: 'currency',
      path: 'price_low',
      label: 'No Decimals',
      props: {
        currency: 'USD',
        minimumFractionDigits: 0,
        maximumFractionDigits: 0,
      },
    },
  ],
});

{
  "form": [
    {
      "uid": "currency-precision-high",
      "kind": "input",
      "type": "currency",
      "path": "price_high",
      "label": "High Precision (4-6 digits)",
      "props": {
        "currency": "USD",
        "minimumFractionDigits": 4,
        "maximumFractionDigits": 6
      }
    },
    {
      "uid": "currency-precision-low",
      "kind": "input",
      "type": "currency",
      "path": "price_low",
      "label": "No Decimals",
      "props": {
        "currency": "USD",
        "minimumFractionDigits": 0,
        "maximumFractionDigits": 0
      }
    }
  ]
}

Step

Use the step property to define the increment size for numeric input via keyboard (arrows) or browser controls.

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      uid: 'currency-step',
      kind: 'input',
      type: 'currency',
      path: 'amount',
      label: 'Amount (Step 5.50)',
      props: {
        currency: 'USD',
        step: 5.5,
      },
    },
  ],
});

{
  "form": [
    {
      "uid": "currency-step",
      "kind": "input",
      "type": "currency",
      "path": "amount",
      "label": "Amount (Step 5.50)",
      "props": {
        "currency": "USD",
        "step": 5.5
      }
    }
  ]
}

Styling

Currency inputs can be styled as explained in the Styling Guide.

CSS Variables

Following you will find a list with the CSS Variables and a quick description of what you will style.

CSS Variable	Description
`--gui-bg-default`	Formatted value text background over input
`--gui-font-sm`	Formatted value text and hint font size
`--gui-space-10`	Icon left padding or inline-start space
`--gui-intent-error`	Border and text color when invalid
`--gui-radius-md`	Input radius
`--gui-border-default`	Input border color
`--gui-bg-surface`	Input background color
`--gui-text-default`	Input text color

Anatomy

This is the anatomy of the Currency Component in case you want to use your CSS styles.

<gui-currency>
  <label for="fieldUid">
    Label
    <div class="gui-currency__hint" id="fieldUid_hint">Hint</div>
  </label>

  <div class="gui-widget">
    <input
      type="number"
      inputmode="decimal"
      id="fieldUid"
      class="gui-currency--icon"
      placeholder="Custom placeholder"
      aria-required="true"
      aria-describedby="fieldUid_hint"
    />
    <label
      for="fieldUid"
      class="gui-currency__format-value gui-currency__format-value--icon"
    >$1,111.10</label>
    <span class="gui-widget-icon attach_money"></span>
  </div>
</gui-currency>