{"componentChunkName":"component---src-templates-cms-page-tsx","path":"/versions/8/develop/combo-box/","result":{"data":{"sitePage":{"pageContext":{"page":{"node":{"title":"ComboBox","navTitle":null,"slug":"develop/combo-box/","hidePage":false,"collapsibleGroup":"components","group":"form-controls","seoDescription":"The ComboBox component is a fully-featured dropdown menu that manages state of selected items.","cosmosComponent":{"component":{"component":"ComboBox","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 ComboBox component is a fully-featured dropdown [Menu](/versions/8/develop/menu) that manages state of selected items. If you only require users to select single options that render as plain text, we recommend using the [Select](/versions/8/develop/select) component instead."},"body":[{"id":"ffda3cc5-e4d4-52a5-864e-c654e2fa678f","strapi_component":"layout.section","title":"Usage","subSections":[{"id":"494cbc55-2cac-5d25-b765-61b64b028f34","title":"Single-select","childStrapiComponentLayoutSubSectionBodyTextnode":null}],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The ComboBox component can be configured for one of two **modes**: _single-select_ and _multi-select_. If the **mode** is set to _multi-select_, you can pass an object for **selected** props. By doing so, you can control which selected **items** should render as [Selectable badges](/versions/8/develop/badge) within the ComboBox input region.\n\nThe input region can also be used to filter results within the **menu** by utilizing the **onChange** callback function. The rendering of the [Menu](/versions/8/develop/menu) and its items will depend on the props passed to the ComboBox's **menu** prop. This 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 ComboBox.\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":"fdb465ef-8ec0-5a7e-9137-0e4e2ce0c6c8","strapi_component":"demo.code-editor","demo":{"demoName":"FilterableSingleSelect","component":"ComboBox","package":"core"}},{"id":"383ee6ed-6f00-51ab-9106-f5f9a78f6bf5","strapi_component":"layout.sub-section","title":"Multi-select","childStrapiComponentLayoutSubSectionBodyTextnode":null},{"id":"db4ece09-6431-5553-a6d3-148f4345548a","strapi_component":"demo.code-editor","demo":{"demoName":"FilterableMultiSelect","component":"ComboBox","package":"core"}}],"relatedComponents":[{"displayText":"Badge","link":"/versions/8/develop/badge"},{"displayText":"Icon","link":"/versions/8/develop/icon"},{"displayText":"Select","link":"/versions/8/develop/select"}],"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":"ComboBox","navTitle":null,"slug":"develop/combo-box/","hidePage":false,"collapsibleGroup":"components","group":"form-controls","seoDescription":"The ComboBox component is a fully-featured dropdown menu that manages state of selected items.","cosmosComponent":{"component":{"component":"ComboBox","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 ComboBox component is a fully-featured dropdown [Menu](/versions/8/develop/menu) that manages state of selected items. If you only require users to select single options that render as plain text, we recommend using the [Select](/versions/8/develop/select) component instead."},"body":[{"id":"ffda3cc5-e4d4-52a5-864e-c654e2fa678f","strapi_component":"layout.section","title":"Usage","subSections":[{"id":"494cbc55-2cac-5d25-b765-61b64b028f34","title":"Single-select","childStrapiComponentLayoutSubSectionBodyTextnode":null}],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"The ComboBox component can be configured for one of two **modes**: _single-select_ and _multi-select_. If the **mode** is set to _multi-select_, you can pass an object for **selected** props. By doing so, you can control which selected **items** should render as [Selectable badges](/versions/8/develop/badge) within the ComboBox input region.\n\nThe input region can also be used to filter results within the **menu** by utilizing the **onChange** callback function. The rendering of the [Menu](/versions/8/develop/menu) and its items will depend on the props passed to the ComboBox's **menu** prop. This 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 ComboBox.\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":"fdb465ef-8ec0-5a7e-9137-0e4e2ce0c6c8","strapi_component":"demo.code-editor","demo":{"demoName":"FilterableSingleSelect","component":"ComboBox","package":"core"}},{"id":"383ee6ed-6f00-51ab-9106-f5f9a78f6bf5","strapi_component":"layout.sub-section","title":"Multi-select","childStrapiComponentLayoutSubSectionBodyTextnode":null},{"id":"db4ece09-6431-5553-a6d3-148f4345548a","strapi_component":"demo.code-editor","demo":{"demoName":"FilterableMultiSelect","component":"ComboBox","package":"core"}}],"relatedComponents":[{"displayText":"Badge","link":"/versions/8/develop/badge"},{"displayText":"Icon","link":"/versions/8/develop/icon"},{"displayText":"Select","link":"/versions/8/develop/select"}],"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"]}