{"componentChunkName":"component---src-templates-cms-page-tsx","path":"/versions/8/design/checkbox/","result":{"data":{"sitePage":{"pageContext":{"page":{"node":{"title":"Checkbox","navTitle":null,"slug":"design/checkbox/","hidePage":false,"collapsibleGroup":"components","group":"form-controls","seoDescription":"Checkboxes allow the user to select or unselect options.","cosmosComponent":{"component":{"component":"Checkbox","package":"core"}},"childStrapiDesignComponentPageOverviewTextnode":{"overview":"Checkboxes allow users to select or unselect a given option."},"body":[{"id":"d7f77313-10ec-5a94-a8d6-9e8d63d4c331","strapi_component":"layout.section","title":"Usage","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"Checkboxes should be used when displaying less than 7 options. If you require more than 7 options, consider using a [select or combobox](/versions/8/design/select-combobox) field instead.\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":"3c9fb417-632f-5568-a6a5-dfd8c6e7bc38","strapi_component":"layout.section","title":"Variations","subSections":[{"id":"705e960a-6686-51a2-b188-a2f0ef4960fb","title":"Checkbox","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"Use a single checkbox for binary selections, such as a decision or affirmation. A user may select and deselect the checkbox as many times as they like. Do not use the checkbox when a user MUST make an active decision, such as yes or no (use a [radio group](/versions/8/design/radio-button)), or if you are expecting the changes to apply instantly (use a switch)."}}],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"9e426e79-8d44-5152-90ef-85ca24c138f0","strapi_component":"demo.code-editor","demo":{"demoName":"DefaultCheckbox","component":"Checkbox","package":"core"}},{"id":"3b49b702-3c0e-53fc-92d7-fddf19311ea8","strapi_component":"layout.sub-section","title":"Checkbox group","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"If there are multiple options to select, wrap the checkboxes in a checkbox group. By doing so, all of the selections made will belong to the same [form](/versions/8/design/form) value. You may also require that users select a certain amount of options to continue."}},{"id":"1490619a-c257-54bc-ba98-9c4f8733f6c6","strapi_component":"demo.code-editor","demo":{"demoName":"CheckboxGroupDemo","component":"CheckboxGroup","package":"core"}},{"id":"ab763fda-ed38-55c4-b827-a43a22c52c2d","strapi_component":"layout.sub-section","title":"Checkbox card","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"A checkbox card can be used to display large volumes of content within a single wrapper. For example, it may include imagery and headings in addition to checkboxes."}},{"id":"f084566c-31f8-5aa0-95d9-4f0f7e3d124e","strapi_component":"demo.code-editor","demo":{"demoName":"CheckboxCard","component":"Checkbox","package":"core"}},{"id":"d6316175-b4d1-5085-a3d8-752f11038608","strapi_component":"layout.section","title":"Display options","subSections":[{"id":"7b0b6267-2e33-5f83-ae45-a6074403b07d","title":"Required","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"This is useful when a user must select an option to progress further in the application, like when accepting Terms & Conditions."}}],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"1c28965f-9b64-5979-88e6-f1e8ae6eb5c1","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-fields.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":"Radio button","link":"/versions/8/design/radio-button"},{"displayText":"Select and combobox","link":"/versions/8/design/select-combobox"}]}},"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":"Checkbox","navTitle":null,"slug":"design/checkbox/","hidePage":false,"collapsibleGroup":"components","group":"form-controls","seoDescription":"Checkboxes allow the user to select or unselect options.","cosmosComponent":{"component":{"component":"Checkbox","package":"core"}},"childStrapiDesignComponentPageOverviewTextnode":{"overview":"Checkboxes allow users to select or unselect a given option."},"body":[{"id":"d7f77313-10ec-5a94-a8d6-9e8d63d4c331","strapi_component":"layout.section","title":"Usage","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"Checkboxes should be used when displaying less than 7 options. If you require more than 7 options, consider using a [select or combobox](/versions/8/design/select-combobox) field instead.\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":"3c9fb417-632f-5568-a6a5-dfd8c6e7bc38","strapi_component":"layout.section","title":"Variations","subSections":[{"id":"705e960a-6686-51a2-b188-a2f0ef4960fb","title":"Checkbox","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"Use a single checkbox for binary selections, such as a decision or affirmation. A user may select and deselect the checkbox as many times as they like. Do not use the checkbox when a user MUST make an active decision, such as yes or no (use a [radio group](/versions/8/design/radio-button)), or if you are expecting the changes to apply instantly (use a switch)."}}],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"9e426e79-8d44-5152-90ef-85ca24c138f0","strapi_component":"demo.code-editor","demo":{"demoName":"DefaultCheckbox","component":"Checkbox","package":"core"}},{"id":"3b49b702-3c0e-53fc-92d7-fddf19311ea8","strapi_component":"layout.sub-section","title":"Checkbox group","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"If there are multiple options to select, wrap the checkboxes in a checkbox group. By doing so, all of the selections made will belong to the same [form](/versions/8/design/form) value. You may also require that users select a certain amount of options to continue."}},{"id":"1490619a-c257-54bc-ba98-9c4f8733f6c6","strapi_component":"demo.code-editor","demo":{"demoName":"CheckboxGroupDemo","component":"CheckboxGroup","package":"core"}},{"id":"ab763fda-ed38-55c4-b827-a43a22c52c2d","strapi_component":"layout.sub-section","title":"Checkbox card","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"A checkbox card can be used to display large volumes of content within a single wrapper. For example, it may include imagery and headings in addition to checkboxes."}},{"id":"f084566c-31f8-5aa0-95d9-4f0f7e3d124e","strapi_component":"demo.code-editor","demo":{"demoName":"CheckboxCard","component":"Checkbox","package":"core"}},{"id":"d6316175-b4d1-5085-a3d8-752f11038608","strapi_component":"layout.section","title":"Display options","subSections":[{"id":"7b0b6267-2e33-5f83-ae45-a6074403b07d","title":"Required","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"This is useful when a user must select an option to progress further in the application, like when accepting Terms & Conditions."}}],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"1c28965f-9b64-5979-88e6-f1e8ae6eb5c1","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-fields.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":"Radio button","link":"/versions/8/design/radio-button"},{"displayText":"Select and combobox","link":"/versions/8/design/select-combobox"}]}},"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"]}