{"componentChunkName":"component---src-templates-cms-page-tsx","path":"/versions/8/design/email-input/","result":{"data":{"sitePage":{"pageContext":{"page":{"node":{"title":"Email input","navTitle":null,"slug":"design/email-input/","hidePage":false,"collapsibleGroup":"components","group":"form-controls","seoDescription":"The email input validates email addresses and displays an error to the user when invalid.","cosmosComponent":{"component":{"component":"Input","package":"core"}},"childStrapiDesignComponentPageOverviewTextnode":{"overview":"Email input allows users to enter and edit email addresses."},"body":[{"id":"52e319a1-b39e-5065-88fb-aaa17cfb35fd","strapi_component":"layout.section","title":"Usage","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The email input component will accept all characters entered but uses built-in Validation for email addresses. If an invalid email is entered, an error will be displayed when the user submits the form.\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":"19a6f724-e2bd-5fe4-b691-778e9307e22b","strapi_component":"demo.code-editor","demo":{"demoName":"InputDemo","component":"Input","package":"core"}},{"id":"02a6eddd-b338-5011-ba20-e8c4f20d1c37","strapi_component":"layout.section","title":"Display options","subSections":[{"id":"337ac86e-005d-5a79-a964-87904a5df6b1","title":"Required","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"This will prevent any form submission until the required input is complete."}},{"id":"5f3e91b1-c436-505e-a468-c193bd673cea","title":"Disabled","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"You may wish to disable an input field in order to prevent a user from entering or editing any information while some task is being completed, or to restrict a user's access."}},{"id":"15e949e1-56f4-52c4-8b12-ffd48cc42512","title":"Readonly","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The user will not be able to edit the input if it is readonly."}}],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"b7399ef1-4f36-5148-81ba-be59a76c5fd9","strapi_component":"layout.section","title":"Displaying non-editable data","subSections":[{"id":"1a434f8a-9371-5a7a-a617-0bf0c10d5b46","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"}},{"id":"770ccf6f-72c0-50f1-9ec0-12728f44a102","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."}}],"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":"0b02d93d-a56b-5386-8b50-741b692b454c","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/common-field-settings-const.html#configuring-controls-tsk). \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":"Phone input","link":"/versions/8/design/phone-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":"Email input","navTitle":null,"slug":"design/email-input/","hidePage":false,"collapsibleGroup":"components","group":"form-controls","seoDescription":"The email input validates email addresses and displays an error to the user when invalid.","cosmosComponent":{"component":{"component":"Input","package":"core"}},"childStrapiDesignComponentPageOverviewTextnode":{"overview":"Email input allows users to enter and edit email addresses."},"body":[{"id":"52e319a1-b39e-5065-88fb-aaa17cfb35fd","strapi_component":"layout.section","title":"Usage","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The email input component will accept all characters entered but uses built-in Validation for email addresses. If an invalid email is entered, an error will be displayed when the user submits the form.\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":"19a6f724-e2bd-5fe4-b691-778e9307e22b","strapi_component":"demo.code-editor","demo":{"demoName":"InputDemo","component":"Input","package":"core"}},{"id":"02a6eddd-b338-5011-ba20-e8c4f20d1c37","strapi_component":"layout.section","title":"Display options","subSections":[{"id":"337ac86e-005d-5a79-a964-87904a5df6b1","title":"Required","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"This will prevent any form submission until the required input is complete."}},{"id":"5f3e91b1-c436-505e-a468-c193bd673cea","title":"Disabled","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"You may wish to disable an input field in order to prevent a user from entering or editing any information while some task is being completed, or to restrict a user's access."}},{"id":"15e949e1-56f4-52c4-8b12-ffd48cc42512","title":"Readonly","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The user will not be able to edit the input if it is readonly."}}],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"b7399ef1-4f36-5148-81ba-be59a76c5fd9","strapi_component":"layout.section","title":"Displaying non-editable data","subSections":[{"id":"1a434f8a-9371-5a7a-a617-0bf0c10d5b46","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"}},{"id":"770ccf6f-72c0-50f1-9ec0-12728f44a102","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."}}],"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":"0b02d93d-a56b-5386-8b50-741b692b454c","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/common-field-settings-const.html#configuring-controls-tsk). \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":"Phone input","link":"/versions/8/design/phone-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"]}