# Combobox **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-combobox--introduction ## Variants documented in Storybook - ComboboxSize: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-combobox--comboboxsize - FilterMode: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-combobox--filtermode - StatusVariant: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-combobox--statusvariant ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Combobox. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Combobox Size — ComboboxSize cb-size-single HTML: ```html
Small (S)
info Description
Medium (M)
info Description
Large (L)
info Description
``` React: ```jsx import React from 'react'; const ComboboxExample1Demo = () => ( <>
Small (S)
info Description
Medium (M)
info Description
Large (L)
info Description
); export default ComboboxExample1Demo; ``` Angular: ```html
Small (S)
info Description
Medium (M)
info Description
Large (L)
info Description
``` ### 2. Combobox Size — ComboboxSize cb-size-multi HTML: ```html
Small (S)
info Description
Medium (M) [Default]
info Description
Large (L)
info Description
``` React: ```jsx import React from 'react'; const ComboboxExample2Demo = () => ( <>
Small (S)
info Description
Medium (M) [Default]
info Description
Large (L)
info Description
); export default ComboboxExample2Demo; ``` Angular: ```html
Small (S)
info Description
Medium (M) [Default]
info Description
Large (L)
info Description
``` ### 3. Filter Mode — FilterMode filter-mode-single HTML: ```html
Contains
Starts With
Starts With Term
``` React: ```jsx import React from 'react'; const ComboboxExample3Demo = () => ( <>
Contains
Starts With
Starts With Term
); export default ComboboxExample3Demo; ``` Angular: ```html
Contains
Starts With
Starts With Term
``` ### 4. Filter Mode — FilterMode filter-mode-multi HTML: ```html
Contains
Starts With
Starts With Term
``` React: ```jsx import React from 'react'; const ComboboxExample4Demo = () => ( <>
Contains
Starts With
Starts With Term
); export default ComboboxExample4Demo; ``` Angular: ```html
Contains
Starts With
Starts With Term
``` ### 5. Introduction — Introduction HTML: ```html
Components

Combobox

Combo Box combines a text input with a dropdown overlay, enabling both selection from a list and direct text input.

Implementation Showcase

Visual demonstration of the primary Combobox selection modes.

Single Select Combobox

infoDescription

Multi Select Combobox

infoDescription

CSS Class Reference

Quickly copy sizing and variant utility classes for Comboboxes.

Selection Types

Single Choice Logic ux4g-combobox-single
Multi Choice Logic ux4g-combobox-multi

Combobox Sizes

Large ux4g-combobox-lg
Medium ux4g-combobox-md
Small ux4g-combobox-sm
``` React: ```jsx import React from 'react'; const ComboboxExample5Demo = () => ( <>
Components

Combobox

Combo Box combines a text input with a dropdown overlay, enabling both selection from a list and direct text input.

Implementation Showcase

Visual demonstration of the primary Combobox selection modes.

Single Select Combobox

info Description

Multi Select Combobox

info Description

CSS Class Reference

Quickly copy sizing and variant utility classes for Comboboxes.

{/* Variant Classes */}

Selection Types

Single Choice Logic ux4g-combobox-single
Multi Choice Logic ux4g-combobox-multi
{/* Size Classes */}

Combobox Sizes

Large ux4g-combobox-lg
Medium ux4g-combobox-md
Small ux4g-combobox-sm
); export default ComboboxExample5Demo; ``` Angular: ```html
Components

Combobox

Combo Box combines a text input with a dropdown overlay, enabling both selection from a list and direct text input.

Implementation Showcase

Visual demonstration of the primary Combobox selection modes.

Single Select Combobox

infoDescription

Multi Select Combobox

infoDescription

CSS Class Reference

Quickly copy sizing and variant utility classes for Comboboxes.

Selection Types

Single Choice Logic ux4g-combobox-single
Multi Choice Logic ux4g-combobox-multi

Combobox Sizes

Large ux4g-combobox-lg
Medium ux4g-combobox-md
Small ux4g-combobox-sm
``` ### 6. Status Variant — StatusVariant status-disabled HTML: ```html
Small (S)
Medium (M)
Large (L)
``` React: ```jsx import React from 'react'; const ComboboxExample6Demo = () => ( <>
Small (S)
Medium (M)
Large (L)
); export default ComboboxExample6Demo; ``` Angular: ```html
Small (S)
Medium (M)
Large (L)
``` ### 7. Status Variant — StatusVariant status-error HTML: ```html
Small (S)
Error message
Medium (M)
Error message
Large (L)
Error message
``` React: ```jsx import React from 'react'; const ComboboxExample7Demo = () => ( <>
Small (S)
error Error message
Medium (M)
error Error message
Large (L)
error Error message
); export default ComboboxExample7Demo; ``` Angular: ```html
Small (S)
Error message
Medium (M)
Error message
Large (L)
Error message
``` ### 8. Status Variant — StatusVariant status-success HTML: ```html
Small (S)
Success message
Medium (M)
Success message
Large (L)
Success message
``` React: ```jsx import React from 'react'; const ComboboxExample8Demo = () => ( <>
Small (S)
check_circle Success message
Medium (M)
check_circle Success message
Large (L)
check_circle Success message
); export default ComboboxExample8Demo; ``` Angular: ```html
Small (S)
Success message
Medium (M)
Success message
Large (L)
Success message
``` ### 9. Status Variant — StatusVariant status-warning HTML: ```html
Small (S)
warning Warning message
Medium (M)
Warning message
Large (L)
Warning message
``` React: ```jsx import React from 'react'; const ComboboxExample9Demo = () => ( <>
Small (S)
warning Warning message
Medium (M)
warning Warning message
Large (L)
warning Warning message
); export default ComboboxExample9Demo; ``` Angular: ```html
Small (S)
warning Warning message
Medium (M)
Warning message
Large (L)
Warning message
``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.