{"componentChunkName":"component---src-templates-cms-page-tsx","path":"/versions/8/design/currency-input/","result":{"data":{"sitePage":{"pageContext":{"page":{"node":{"title":"Currency input","navTitle":null,"slug":"design/currency-input/","hidePage":false,"collapsibleGroup":"components","group":"form-controls","seoDescription":"The Currency component auto-formats a monetary value to match a particular currency.","cosmosComponent":{"component":{"component":"CurrencyInput","package":"core"}},"childStrapiDesignComponentPageOverviewTextnode":{"overview":"Currency input 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\nThe currency component will only allow a user to enter numerical data, and any other characters will be ignored."},"body":[{"id":"735d3e67-fdc8-57ac-828f-cff460e5947f","strapi_component":"layout.section","title":"Usage","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The currency component can be configured to have a prefix, suffix, or both (e.g., $, USD). It can be displayed prefilled with a value, in which the default is set to “0.00”, or the international equivalent.\n\nThe formatting for the currency (e.g., separators, decimals), as well as any numerical formatting necessary for a particular locale, will be applied as a user types. All numeric fields (including currency, integer, decimal, and percentage fields) always include thousands separators.\n\nFor more best practices on building forms with inputs in Constellation, visit [Pega Academy](https://academy.pega.com/topic/designing-forms-constellation/v2/in/53706/54411)."}},{"id":"c8910260-246b-590a-9e46-d0f8bb690764","strapi_component":"demo.code-editor","demo":{"demoName":"CurrencyInputDemo","component":"Currency","package":"core"}},{"id":"da89a180-7201-5182-b7cd-7fabf29bf57f","strapi_component":"layout.section","title":"Displaying non-editable data","subSections":[{"id":"2dfd4802-2598-5a96-a23b-de944cf8d903","title":"Readonly","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"Display a field as readonly to indicate that a user cannot edit a field due to form conditionality or role restrictions. This way, the field can be editable when certain conditions are met.  \n\nYou can also display a field as readonly when doing so gives the user context, or completes the layout for a set of fields in a form. For example, in a set of address input fields, the “state” field may be readonly, while the “address”, “city”, and “zip code” fields may be editable.\n\n"}},{"id":"5b90db98-9f7b-5ece-9348-55e7b469e2d5","title":"Field-value list","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"[Field-value lists](/versions/8/design/field-value-list) also display non-editable information, but live outside of a form (often in a case's summary panel or details tab card). Display information in a field-value list when users need to reference the information to complete a form or review the information to verify form details.\n\nPreviously, in classic Pega, field-value list was referred to as \"readonly\". This was changed due to \"readonly\" being an HTML input attribute.\n"}}],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"There are two methods of displaying non-editable information in Constellation: as a readonly field or a [field-value list](/versions/8/design/field-value-list). The method used depends on the context and purpose of the information."}},{"id":"c04cc7d5-0dba-5406-97c8-9a0eaa656cb2","strapi_component":"layout.section","title":"Configuration","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"To learn how to configure this component in your Constellation application, visit [Pega Documentation](https://docs.pega.com/bundle/platform/page/platform/user-experience/configuring-currency-field.html).\n\nAll components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit [Pega Documentation](https://docs.pega.com/bundle/platform/page/platform/user-experience/traditional-ui-architecture.html)."}}],"relatedComponents":[{"displayText":"Number input","link":"/versions/8/design/number-input"},{"displayText":"Text input","link":"/versions/8/design/text-input"}]}},"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":"Currency input","navTitle":null,"slug":"design/currency-input/","hidePage":false,"collapsibleGroup":"components","group":"form-controls","seoDescription":"The Currency component auto-formats a monetary value to match a particular currency.","cosmosComponent":{"component":{"component":"CurrencyInput","package":"core"}},"childStrapiDesignComponentPageOverviewTextnode":{"overview":"Currency input 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\nThe currency component will only allow a user to enter numerical data, and any other characters will be ignored."},"body":[{"id":"735d3e67-fdc8-57ac-828f-cff460e5947f","strapi_component":"layout.section","title":"Usage","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The currency component can be configured to have a prefix, suffix, or both (e.g., $, USD). It can be displayed prefilled with a value, in which the default is set to “0.00”, or the international equivalent.\n\nThe formatting for the currency (e.g., separators, decimals), as well as any numerical formatting necessary for a particular locale, will be applied as a user types. All numeric fields (including currency, integer, decimal, and percentage fields) always include thousands separators.\n\nFor more best practices on building forms with inputs in Constellation, visit [Pega Academy](https://academy.pega.com/topic/designing-forms-constellation/v2/in/53706/54411)."}},{"id":"c8910260-246b-590a-9e46-d0f8bb690764","strapi_component":"demo.code-editor","demo":{"demoName":"CurrencyInputDemo","component":"Currency","package":"core"}},{"id":"da89a180-7201-5182-b7cd-7fabf29bf57f","strapi_component":"layout.section","title":"Displaying non-editable data","subSections":[{"id":"2dfd4802-2598-5a96-a23b-de944cf8d903","title":"Readonly","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"Display a field as readonly to indicate that a user cannot edit a field due to form conditionality or role restrictions. This way, the field can be editable when certain conditions are met.  \n\nYou can also display a field as readonly when doing so gives the user context, or completes the layout for a set of fields in a form. For example, in a set of address input fields, the “state” field may be readonly, while the “address”, “city”, and “zip code” fields may be editable.\n\n"}},{"id":"5b90db98-9f7b-5ece-9348-55e7b469e2d5","title":"Field-value list","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"[Field-value lists](/versions/8/design/field-value-list) also display non-editable information, but live outside of a form (often in a case's summary panel or details tab card). Display information in a field-value list when users need to reference the information to complete a form or review the information to verify form details.\n\nPreviously, in classic Pega, field-value list was referred to as \"readonly\". This was changed due to \"readonly\" being an HTML input attribute.\n"}}],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"There are two methods of displaying non-editable information in Constellation: as a readonly field or a [field-value list](/versions/8/design/field-value-list). The method used depends on the context and purpose of the information."}},{"id":"c04cc7d5-0dba-5406-97c8-9a0eaa656cb2","strapi_component":"layout.section","title":"Configuration","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"To learn how to configure this component in your Constellation application, visit [Pega Documentation](https://docs.pega.com/bundle/platform/page/platform/user-experience/configuring-currency-field.html).\n\nAll components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit [Pega Documentation](https://docs.pega.com/bundle/platform/page/platform/user-experience/traditional-ui-architecture.html)."}}],"relatedComponents":[{"displayText":"Number input","link":"/versions/8/design/number-input"},{"displayText":"Text input","link":"/versions/8/design/text-input"}]}},"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"]}