# Search & Discovery / Search Results Filterable search results with comprehensive faceted navigation for government services. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-search-results--desktop-workspace ## Pattern variants - Desktop Workspace: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-search-results--desktop-workspace - FullScreen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-search-results--fullscreen - Column: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-search-discovery-search-results--column ## When to use this pattern Use Search & Discovery / Search Results when building citizen-facing flows that match the described government journey. Combine components such as cards, forms, tables, buttons, and status indicators as shown in Storybook. ## 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 & Discovery / Search Results. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Column — Search Results HTML: ```html
  • Apple
  • Pineapple
  • Banana
  • Grapefruit

Showing 48 results for “income”

Sort by: Relevance
48 results

Filters

Clear all
State
Maharashtra
expand_more
Department
Fee
description

Income Certificate

Revenue Department
Free schedule 20 mins
Free schedule 20 mins
assignment

Income Tax Return (ITR) Filing

Income Tax Department
Free schedule 30 mins
Free schedule 30 mins
corporate_fare

Low Income Group (LIG) Certificate

Social Welfare Department
Free schedule 7 days
Free schedule 7 days
account_balance_wallet

Income & Asset Certificate

Revenue Department
Paid ₹ 50/- schedule 15 days
Paid ₹ 50/- schedule 15 days
groups

EWS Certificate

Revenue Department
Free schedule 10 days
Free schedule 10 days
``` React: ```jsx import React from 'react'; const SearchDiscoverySearchResultsExample1Demo = () => ( <>
{/* Center Search input bar styled with semantic component class overridden with utilities */}
search
  • Apple
  • Pineapple
  • Banana
  • Grapefruit
{/* Search Results Section */}
{/* Header: Results Count and Sort */} {/* Desktop Header */}

Showing 48 results for “income”

Sort by: Relevance
{/* Mobile Header */}
48 results
{/* Filter Chips/Tabs */}
{/* Main Grid Layout */}
{/* Left Sidebar: Filters Panel */}

Filters

Clear all
{/* State Filter */}
State
Maharashtra
expand_more
{/* Department Filter */}
Department
{/* Fee Filter */}
Fee
{/* Right Content: Results List */}
{/* Row 1: Income Certificate */}
description

Income Certificate

Revenue Department
Free schedule 20 mins
Free schedule 20 mins
{/* Row 2: Income Tax Return (ITR) Filing */}
assignment

Income Tax Return (ITR) Filing

Income Tax Department
Free schedule 30 mins
Free schedule 30 mins
{/* Row 3: Low Income Group (LIG) Certificate */}
corporate_fare

Low Income Group (LIG) Certificate

Social Welfare Department
Free schedule 7 days
Free schedule 7 days
{/* Row 4: Income & Asset Certificate */}
account_balance_wallet

Income & Asset Certificate

Revenue Department
Paid ₹ 50/- schedule 15 days
Paid ₹ 50/- schedule 15 days
{/* Row 5: EWS Certificate */}
groups

EWS Certificate

Revenue Department
Free schedule 10 days
Free schedule 10 days
{/* Pagination Block */}
); export default SearchDiscoverySearchResultsExample1Demo; ``` Angular: ```html
  • Apple
  • Pineapple
  • Banana
  • Grapefruit

Showing 48 results for “income”

Sort by: Relevance
48 results

Filters

Clear all
State
Maharashtra
expand_more
Department
Fee
description

Income Certificate

Revenue Department
Free schedule 20 mins
Free schedule 20 mins
assignment

Income Tax Return (ITR) Filing

Income Tax Department
Free schedule 30 mins
Free schedule 30 mins
corporate_fare

Low Income Group (LIG) Certificate

Social Welfare Department
Free schedule 7 days
Free schedule 7 days
account_balance_wallet

Income & Asset Certificate

Revenue Department
Paid ₹ 50/- schedule 15 days
Paid ₹ 50/- schedule 15 days
groups

EWS Certificate

Revenue Department
Free schedule 10 days
Free schedule 10 days
``` ### 2. Desktop Workspace — Search Results HTML: ```html
  • Apple
  • Pineapple
  • Banana
  • Grapefruit

Showing 48 results for “income”

Sort by: Relevance
48 results

Filters

Clear all
State
Maharashtra
expand_more
Department
Fee
description

Income Certificate

Revenue Department
Free schedule 20 mins
Free schedule 20 mins
assignment

Income Tax Return (ITR) Filing

Income Tax Department
Free schedule 30 mins
Free schedule 30 mins
corporate_fare

Low Income Group (LIG) Certificate

Social Welfare Department
Free schedule 7 days
Free schedule 7 days
account_balance_wallet

Income & Asset Certificate

Revenue Department
Paid ₹ 50/- schedule 15 days
Paid ₹ 50/- schedule 15 days
groups

EWS Certificate

Revenue Department
Free schedule 10 days
Free schedule 10 days
``` React: ```jsx import React from 'react'; const SearchDiscoverySearchResultsExample2Demo = () => ( <>
{/* Center Search input bar styled with semantic component class overridden with utilities */}
search
  • Apple
  • Pineapple
  • Banana
  • Grapefruit
{/* Search Results Section */}
{/* Header: Results Count and Sort */} {/* Desktop Header */}

Showing 48 results for “income”

Sort by: Relevance
{/* Mobile Header */}
48 results
{/* Filter Chips/Tabs */}
{/* Main Grid Layout */}
{/* Left Sidebar: Filters Panel */}

Filters

Clear all
{/* State Filter */}
State
Maharashtra
expand_more
{/* Department Filter */}
Department
{/* Fee Filter */}
Fee
{/* Right Content: Results List */}
{/* Row 1: Income Certificate */}
description

Income Certificate

Revenue Department
Free schedule 20 mins
Free schedule 20 mins
{/* Row 2: Income Tax Return (ITR) Filing */}
assignment

Income Tax Return (ITR) Filing

Income Tax Department
Free schedule 30 mins
Free schedule 30 mins
{/* Row 3: Low Income Group (LIG) Certificate */}
corporate_fare

Low Income Group (LIG) Certificate

Social Welfare Department
Free schedule 7 days
Free schedule 7 days
{/* Row 4: Income & Asset Certificate */}
account_balance_wallet

Income & Asset Certificate

Revenue Department
Paid ₹ 50/- schedule 15 days
Paid ₹ 50/- schedule 15 days
{/* Row 5: EWS Certificate */}
groups

EWS Certificate

Revenue Department
Free schedule 10 days
Free schedule 10 days
{/* Pagination Block */}
); export default SearchDiscoverySearchResultsExample2Demo; ``` Angular: ```html
  • Apple
  • Pineapple
  • Banana
  • Grapefruit

Showing 48 results for “income”

Sort by: Relevance
48 results

Filters

Clear all
State
Maharashtra
expand_more
Department
Fee
description

Income Certificate

Revenue Department
Free schedule 20 mins
Free schedule 20 mins
assignment

Income Tax Return (ITR) Filing

Income Tax Department
Free schedule 30 mins
Free schedule 30 mins
corporate_fare

Low Income Group (LIG) Certificate

Social Welfare Department
Free schedule 7 days
Free schedule 7 days
account_balance_wallet

Income & Asset Certificate

Revenue Department
Paid ₹ 50/- schedule 15 days
Paid ₹ 50/- schedule 15 days
groups

EWS Certificate

Revenue Department
Free schedule 10 days
Free schedule 10 days
``` ### 3. Full Screen — Search Results HTML: ```html
  • Apple
  • Pineapple
  • Banana
  • Grapefruit

Showing 48 results for “income”

Sort by: Relevance
48 results

Filters

Clear all
State
Maharashtra
expand_more
Department
Fee
description

Income Certificate

Revenue Department
Free schedule 20 mins
Free schedule 20 mins
assignment

Income Tax Return (ITR) Filing

Income Tax Department
Free schedule 30 mins
Free schedule 30 mins
corporate_fare

Low Income Group (LIG) Certificate

Social Welfare Department
Free schedule 7 days
Free schedule 7 days
account_balance_wallet

Income & Asset Certificate

Revenue Department
Paid ₹ 50/- schedule 15 days
Paid ₹ 50/- schedule 15 days
groups

EWS Certificate

Revenue Department
Free schedule 10 days
Free schedule 10 days
``` React: ```jsx import React from 'react'; const SearchDiscoverySearchResultsExample3Demo = () => ( <>
{/* Center Search input bar styled with semantic component class overridden with utilities */}
search
  • Apple
  • Pineapple
  • Banana
  • Grapefruit
{/* Search Results Section */}
{/* Header: Results Count and Sort */} {/* Desktop Header */}

Showing 48 results for “income”

Sort by: Relevance
{/* Mobile Header */}
48 results
{/* Filter Chips/Tabs */}
{/* Main Grid Layout */}
{/* Left Sidebar: Filters Panel */}

Filters

Clear all
{/* State Filter */}
State
Maharashtra
expand_more
{/* Department Filter */}
Department
{/* Fee Filter */}
Fee
{/* Right Content: Results List */}
{/* Row 1: Income Certificate */}
description

Income Certificate

Revenue Department
Free schedule 20 mins
Free schedule 20 mins
{/* Row 2: Income Tax Return (ITR) Filing */}
assignment

Income Tax Return (ITR) Filing

Income Tax Department
Free schedule 30 mins
Free schedule 30 mins
{/* Row 3: Low Income Group (LIG) Certificate */}
corporate_fare

Low Income Group (LIG) Certificate

Social Welfare Department
Free schedule 7 days
Free schedule 7 days
{/* Row 4: Income & Asset Certificate */}
account_balance_wallet

Income & Asset Certificate

Revenue Department
Paid ₹ 50/- schedule 15 days
Paid ₹ 50/- schedule 15 days
{/* Row 5: EWS Certificate */}
groups

EWS Certificate

Revenue Department
Free schedule 10 days
Free schedule 10 days
{/* Pagination Block */}
); export default SearchDiscoverySearchResultsExample3Demo; ``` Angular: ```html
  • Apple
  • Pineapple
  • Banana
  • Grapefruit

Showing 48 results for “income”

Sort by: Relevance
48 results

Filters

Clear all
State
Maharashtra
expand_more
Department
Fee
description

Income Certificate

Revenue Department
Free schedule 20 mins
Free schedule 20 mins
assignment

Income Tax Return (ITR) Filing

Income Tax Department
Free schedule 30 mins
Free schedule 30 mins
corporate_fare

Low Income Group (LIG) Certificate

Social Welfare Department
Free schedule 7 days
Free schedule 7 days
account_balance_wallet

Income & Asset Certificate

Revenue Department
Paid ₹ 50/- schedule 15 days
Paid ₹ 50/- schedule 15 days
groups

EWS Certificate

Revenue Department
Free schedule 10 days
Free schedule 10 days
```