{"componentChunkName":"component---src-templates-cms-page-tsx","path":"/versions/8/develop/currency-input/","result":{"data":{"sitePage":{"pageContext":{"page":{"node":{"title":"CurrencyInput","navTitle":null,"slug":"develop/currency-input/","hidePage":false,"collapsibleGroup":"components","group":"form-controls","seoDescription":"CurrencyInputs auto-format a monetary value to match a particular currency.","cosmosComponent":{"component":{"component":"CurrencyInput","package":"core"}},"childStrapiDeveloperComponentPageOverviewTextnode":{"overview":"_Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit [Pega Community](https://docs.pega.com/user-experience/87/theme-cosmos)._\n\nThe CurrencyInput component allows a user to enter a monetary value that will be auto-formatted to match a particular currency, such as pounds sterling, euros, dollars, etc.\n\nTo learn more about configuration, visit [Pega Community](https://docs.pega.com/bundle/platform/page/platform/user-experience/configuring-currency-field.html)."},"body":[{"id":"e3f75375-d97c-53c4-84b5-5a59af01f38b","strapi_component":"layout.section","title":"Usage","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The formatting for the **value** entered within the CurrencyInput (e.g., separators, decimals), as well as any numerical formatting necessary for a particular locale, will be applied as a user types. You can configure the locale of your application via the [Configuration](/versions/8/develop/configuration) component.\n\nThe CurrencyInput component is built on top of the [NumberInput](/versions/8/develop/number-input) and thus shares certain props such as **unit**, **step**, **min** and **max**. The component will only allow a user to enter numerical data and any other characters will be ignored. The unit placement (either at the start or end of the input) is determined based on the runtime environment's locale.\n\nThere are a variety of formatting options for the CurrencyInput component that enable you to show decimals, show group separators, and show the currency symbol. The component also allows for standard [Form](/versions/8/develop/form) Field structures such as being set **required**, **disabled**, or **readOnly**, as well as including a **label**, **status**, or **info**. If an **onResolveSuggestion** callback function is provided, and the **status** is set to _pending_, the user will be prompted to accept or deny whatever suggested value populates the CurrencyInput.\n\nIf there is a **label** and the Field is not **disabled**, passing an object to the **additionalInfo** prop that includes a **heading** and **content** will provide the user with more useful information on the Field when they click on the associated information [Icon](/versions/8/develop/icon)."}},{"id":"2bd8d94f-4ab3-5679-bd28-97baa7bcf8db","strapi_component":"demo.code-editor","demo":{"demoName":"CurrencyInputDemo","component":"Currency","package":"core"}}],"relatedComponents":[{"displayText":"Configuration","link":"/versions/8/develop/configuration"},{"displayText":"CurrencyDisplay","link":"/versions/8/develop/currency-display"},{"displayText":"Input","link":"/versions/8/develop/input"},{"displayText":"NumberInput","link":"/versions/8/develop/number-input"}],"propsTable":true,"themeTree":null}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}}},"pageContext":{"page":{"node":{"title":"CurrencyInput","navTitle":null,"slug":"develop/currency-input/","hidePage":false,"collapsibleGroup":"components","group":"form-controls","seoDescription":"CurrencyInputs auto-format a monetary value to match a particular currency.","cosmosComponent":{"component":{"component":"CurrencyInput","package":"core"}},"childStrapiDeveloperComponentPageOverviewTextnode":{"overview":"_Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit [Pega Community](https://docs.pega.com/user-experience/87/theme-cosmos)._\n\nThe CurrencyInput component allows a user to enter a monetary value that will be auto-formatted to match a particular currency, such as pounds sterling, euros, dollars, etc.\n\nTo learn more about configuration, visit [Pega Community](https://docs.pega.com/bundle/platform/page/platform/user-experience/configuring-currency-field.html)."},"body":[{"id":"e3f75375-d97c-53c4-84b5-5a59af01f38b","strapi_component":"layout.section","title":"Usage","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The formatting for the **value** entered within the CurrencyInput (e.g., separators, decimals), as well as any numerical formatting necessary for a particular locale, will be applied as a user types. You can configure the locale of your application via the [Configuration](/versions/8/develop/configuration) component.\n\nThe CurrencyInput component is built on top of the [NumberInput](/versions/8/develop/number-input) and thus shares certain props such as **unit**, **step**, **min** and **max**. The component will only allow a user to enter numerical data and any other characters will be ignored. The unit placement (either at the start or end of the input) is determined based on the runtime environment's locale.\n\nThere are a variety of formatting options for the CurrencyInput component that enable you to show decimals, show group separators, and show the currency symbol. The component also allows for standard [Form](/versions/8/develop/form) Field structures such as being set **required**, **disabled**, or **readOnly**, as well as including a **label**, **status**, or **info**. If an **onResolveSuggestion** callback function is provided, and the **status** is set to _pending_, the user will be prompted to accept or deny whatever suggested value populates the CurrencyInput.\n\nIf there is a **label** and the Field is not **disabled**, passing an object to the **additionalInfo** prop that includes a **heading** and **content** will provide the user with more useful information on the Field when they click on the associated information [Icon](/versions/8/develop/icon)."}},{"id":"2bd8d94f-4ab3-5679-bd28-97baa7bcf8db","strapi_component":"demo.code-editor","demo":{"demoName":"CurrencyInputDemo","component":"Currency","package":"core"}}],"relatedComponents":[{"displayText":"Configuration","link":"/versions/8/develop/configuration"},{"displayText":"CurrencyDisplay","link":"/versions/8/develop/currency-display"},{"displayText":"Input","link":"/versions/8/develop/input"},{"displayText":"NumberInput","link":"/versions/8/develop/number-input"}],"propsTable":true,"themeTree":null}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}},"staticQueryHashes":["1103706436","2075638250","2949869146","3642924123","793757994"]}