Currency

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

Programmatic

currency.ts

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

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

JSON

currency.json

{
  "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.

Programmatic

currency.ts

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

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

JSON

currency.json

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

Hint

Note

A label is required for the hint to be displayed.

Use the property hint to add a description.

Programmatic

currency.ts

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.',
      },
    },
  ],
});

JSON

currency.json

{
  "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.

Programmatic

currency.ts

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

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

JSON

currency.json

{
  "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.

Programmatic

currency.ts

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,
      },
    },
  ],
});

JSON

currency.json

{
  "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.

Programmatic

currency.ts

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,
      },
    },
  ],
});

JSON

currency.json

{
  "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.

Programmatic

currency.ts

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,
      },
    },
  ],
});

JSON

currency.json

{
  "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.

currency-anatomy.html

<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>