# Search Search component allows users to quickly find relevant information within an application. It enhances navigation, improves content discoverability and supports text based, voice or filter-assisted search functionality. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-search--introduction ## Variants documented in Storybook - Sizing: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-search--sizing - FilterModes: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-search--filtermodes ## 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 Search. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Filter Modes — Contains (Default) HTML: ```html

Search Mode Contain

``` React: ```jsx import React from 'react'; const SearchExample1Demo = () => ( <> {/* Variant: Search Filter Mode - Contains */}

Search Mode Contain

); export default SearchExample1Demo; ``` Angular: ```html

Search Mode Contain

``` ### 2. Filter Modes — Starts With HTML: ```html

Search Mode Starts With

``` React: ```jsx import React from 'react'; const SearchExample2Demo = () => ( <> {/* Variant: Search Filter Mode - Starts With */}

Search Mode Starts With

); export default SearchExample2Demo; ``` Angular: ```html

Search Mode Starts With

``` ### 3. Filter Modes — Starts With Term HTML: ```html

Search Mode Starts With Term

``` React: ```jsx import React from 'react'; const SearchExample3Demo = () => ( <> {/* Variant: Search Filter Mode - Starts With Term */}

Search Mode Starts With Term

); export default SearchExample3Demo; ``` Angular: ```html

Search Mode Starts With Term

``` ### 4. Introduction — Introduction HTML: ```html

Components

Search

Search component allows users to quickly find relevant information within an application. It enhances navigation, improves content discoverability and supports text based, voice or filter-assisted search functionality.

Implementation Showcase

Visual demonstration of search sizing and filtering modes.

Search Small

Label (Search With List)

Label (Search Input Only)

Search Medium (Default)

Label

Search Large

Label

Search Large Only

Ux4g Search Modes

Search Mode Contain

Search Mode Starts With

Search Mode Starts With Term

CSS Class Reference

Quickly copy sizing and variant utility classes for Search.

Sizing Classes

Large Size ux4g-search-lg

Small Size ux4g-search-s

Medium Spinner ux4g-spinner-sm

Small Spinner ux4g-spinner-xs

Filter Mode Attributes

Contains (Default) ux4g-search-filter="contains"

Starts With ux4g-search-filter="starts-with"

Starts With Term ux4g-search-filter="starts-with-term"

``` React: ```jsx import React from 'react'; const SearchExample4Demo = () => ( <>

Components

Search

Implementation Showcase

Visual demonstration of search sizing and filtering modes.

{/* Small Sizing Showcase */}

Search Small

Label (Search With List)

Label (Search Input Only)

{/* Medium Sizing Showcase */}

Search Medium (Default)

Label

{/* Large Sizing Showcase */}

Search Large

Label

Search Large Only

{/* Modes Showcase */}

Ux4g Search Modes

Search Mode Contain

Search Mode Starts With

Search Mode Starts With Term

CSS Class Reference

Quickly copy sizing and variant utility classes for Search.

{/* Sizing Classes */}

Sizing Classes

Large Size ux4g-search-lg

Small Size ux4g-search-s

Medium Spinner ux4g-spinner-sm

Small Spinner ux4g-spinner-xs

{/* Filter Modes Classes */}

Filter Mode Attributes

Contains (Default) ux4g-search-filter="contains"

Starts With ux4g-search-filter="starts-with"

Starts With Term ux4g-search-filter="starts-with-term"

); export default SearchExample4Demo; ``` Angular: ```html

Components

Search

Implementation Showcase

Visual demonstration of search sizing and filtering modes.

Search Small

Label (Search With List)

Label (Search Input Only)

Search Medium (Default)

Label

Search Large

Label

Search Large Only

Ux4g Search Modes

Search Mode Contain

Search Mode Starts With

Search Mode Starts With Term

CSS Class Reference

Quickly copy sizing and variant utility classes for Search.

Sizing Classes

Large Size ux4g-search-lg

Small Size ux4g-search-s

Medium Spinner ux4g-spinner-sm

Small Spinner ux4g-spinner-xs

Filter Mode Attributes

Contains (Default) ux4g-search-filter="contains"

Starts With ux4g-search-filter="starts-with"

Starts With Term ux4g-search-filter="starts-with-term"

``` ### 5. Sizing — Small Size HTML: ```html

Label (Search With List)

Label (Search Input Only)

``` React: ```jsx import React from 'react'; const SearchExample5Demo = () => ( <> {/* Variant: Search Small - With List */}

Label (Search With List)

{/* Variant: Search Small - Input Only */}

Label (Search Input Only)

); export default SearchExample5Demo; ``` Angular: ```html

Label (Search With List)

Label (Search Input Only)

``` ### 6. Sizing — Medium Size (Default) HTML: ```html

Label (Search With List)

Label (Search Input Only)

``` React: ```jsx import React from 'react'; const SearchExample6Demo = () => ( <> {/* Variant: Search Medium - With List */}

Label (Search With List)

{/* Variant: Search Medium - Input Only */}

Label (Search Input Only)

); export default SearchExample6Demo; ``` Angular: ```html

Label (Search With List)

Label (Search Input Only)

``` ### 7. Sizing — Large Size HTML: ```html

Label (Search With List)

Search Large Only

``` React: ```jsx import React from 'react'; const SearchExample7Demo = () => ( <> {/* Variant: Search Large - With List */}

Label (Search With List)

{/* Variant: Search Large - Input Only */}

Search Large Only

); export default SearchExample7Demo; ``` Angular: ```html

Label (Search With List)

Search Large Only

``` ## 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.