# Feedback & Communication / Language Switcher Language switcher patterns for government services. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-language-switcher--full-screen ## Pattern variants - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-language-switcher--full-screen - Card: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-language-switcher--card ## When to use this pattern Use Feedback & Communication / Language Switcher 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 Feedback & Communication / Language Switcher. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Card — Choose your interface language HTML: ```html

Choose your interface language

Switch the portal to a language you read most comfortably.
You can change this anytime from the header.

language
  • English (United States)
  • हिन्दी (Hindi)
  • বাংলা (Bengali)
  • मराठी (Marathi)
  • ગુજરાતી (Gujarati)
  • தமிழ் (Tamil)
  • తెలుగు (Telugu)
  • ಕನ್ನಡ (Kannada)
  • മലയാളം (Malayalam)
  • ਪੰਜਾਬੀ (Punjabi)
  • ଓଡ଼ିଆ (Odia)
  • অসমীয়া (Assamese)

Auto-detected from your browser preferences. Changing this updates the portal immediately — no page reload needed.

Powered by -
``` React: ```jsx import React from 'react'; const FeedbackCommunicationLanguageSwitcherExample1Demo = () => ( <>
{/* Help Centre & Contact Support Section */}
{/* Header */}

Choose your interface language

Switch the portal to a language you read most comfortably.
You can change this anytime from the header.

{/* Form Fields */}
{/* Language select field */}
language {/* Trigger Button */} {/* Custom List Menu */}
  • English (United States) check
  • हिन्दी (Hindi) check
  • বাংলা (Bengali) check
  • मराठी (Marathi) check
  • ગુજરાતી (Gujarati) check
  • தமிழ் (Tamil) check
  • తెలుగు (Telugu) check
  • ಕನ್ನಡ (Kannada) check
  • മലയാളം (Malayalam) check
  • ਪੰਜਾਬੀ (Punjabi) check
  • ଓଡ଼ିଆ (Odia) check
  • অসমীয়া (Assamese) check
{/* Subtext helper */}

Auto-detected from your browser preferences. Changing this updates the portal immediately — no page reload needed.

{/* Footer Branding */}
Powered by -
); export default FeedbackCommunicationLanguageSwitcherExample1Demo; ``` Angular: ```html

Choose your interface language

Switch the portal to a language you read most comfortably.
You can change this anytime from the header.

language
  • English (United States)
  • हिन्दी (Hindi)
  • বাংলা (Bengali)
  • मराठी (Marathi)
  • ગુજરાતી (Gujarati)
  • தமிழ் (Tamil)
  • తెలుగు (Telugu)
  • ಕನ್ನಡ (Kannada)
  • മലയാളം (Malayalam)
  • ਪੰਜਾਬੀ (Punjabi)
  • ଓଡ଼ିଆ (Odia)
  • অসমীয়া (Assamese)

Auto-detected from your browser preferences. Changing this updates the portal immediately — no page reload needed.

Powered by -
``` ### 2. Card — Apply for Income Certificate HTML: ```html

Apply for Income Certificate

Switch the inline toggle to change form labels — your entered data is preserved.

Powered by -
``` React: ```jsx import React from 'react'; const FeedbackCommunicationLanguageSwitcherExample2Demo = () => ( <>
{/* Help Centre & Contact Support Section */}
{/* Header */}

Apply for Income Certificate

Switch the inline toggle to change form labels — your entered data is preserved.

{/* Toggle Buttons */}
{/* Footer Branding */}
Powered by -
); export default FeedbackCommunicationLanguageSwitcherExample2Demo; ``` Angular: ```html

Apply for Income Certificate

Switch the inline toggle to change form labels — your entered data is preserved.

Powered by -
``` ### 3. Card — This page is not yet available in Tamil HTML: ```html

This page is not yet available in Tamil

We are translating Income Certificate pages — the Tamil version is coming in May 2026.

error
Translation in progress You can read this page in English meanwhile, or use your browser to auto-translate.
Powered by -
``` React: ```jsx import React from 'react'; const FeedbackCommunicationLanguageSwitcherExample3Demo = () => ( <>
{/* Help Centre & Contact Support Section */}
{/* Header */}

This page is not yet available in Tamil

We are translating Income Certificate pages — the Tamil version is coming in May 2026.

{/* Alert */}
error
Translation in progress You can read this page in English meanwhile, or use your browser to auto-translate.
{/* Action Buttons */}
{/* Footer Branding */}
Powered by -
); export default FeedbackCommunicationLanguageSwitcherExample3Demo; ``` Angular: ```html

This page is not yet available in Tamil

We are translating Income Certificate pages — the Tamil version is coming in May 2026.

error
Translation in progress You can read this page in English meanwhile, or use your browser to auto-translate.
Powered by -
``` ### 4. Full Screen — Choose your interface language HTML: ```html

Choose your interface language

Switch the portal to a language you read most comfortably.
You can change this anytime from the header.

language
  • English (United States)
  • हिन्दी (Hindi)
  • বাংলা (Bengali)
  • मराठी (Marathi)
  • ગુજરાતી (Gujarati)
  • தமிழ் (Tamil)
  • తెలుగు (Telugu)
  • ಕನ್ನಡ (Kannada)
  • മലയാളം (Malayalam)
  • ਪੰਜਾਬੀ (Punjabi)
  • ଓଡ଼ିଆ (Odia)
  • অসমীয়া (Assamese)

Auto-detected from your browser preferences. Changing this updates the portal immediately — no page reload needed.

Powered by -
``` React: ```jsx import React from 'react'; const FeedbackCommunicationLanguageSwitcherExample4Demo = () => ( <>
{/* Help Centre & Contact Support Section */}
{/* Header */}

Choose your interface language

Switch the portal to a language you read most comfortably.
You can change this anytime from the header.

{/* Form Fields */}
{/* Language select field */}
language {/* Trigger Button */} {/* Custom List Menu */}
  • English (United States) check
  • हिन्दी (Hindi) check
  • বাংলা (Bengali) check
  • मराठी (Marathi) check
  • ગુજરાતી (Gujarati) check
  • தமிழ் (Tamil) check
  • తెలుగు (Telugu) check
  • ಕನ್ನಡ (Kannada) check
  • മലയാളം (Malayalam) check
  • ਪੰਜਾਬੀ (Punjabi) check
  • ଓଡ଼ିଆ (Odia) check
  • অসমীয়া (Assamese) check
{/* Subtext helper */}

Auto-detected from your browser preferences. Changing this updates the portal immediately — no page reload needed.

{/* Footer Branding */}
Powered by -
); export default FeedbackCommunicationLanguageSwitcherExample4Demo; ``` Angular: ```html

Choose your interface language

Switch the portal to a language you read most comfortably.
You can change this anytime from the header.

language
  • English (United States)
  • हिन्दी (Hindi)
  • বাংলা (Bengali)
  • मराठी (Marathi)
  • ગુજરાતી (Gujarati)
  • தமிழ் (Tamil)
  • తెలుగు (Telugu)
  • ಕನ್ನಡ (Kannada)
  • മലയാളം (Malayalam)
  • ਪੰਜਾਬੀ (Punjabi)
  • ଓଡ଼ିଆ (Odia)
  • অসমীয়া (Assamese)

Auto-detected from your browser preferences. Changing this updates the portal immediately — no page reload needed.

Powered by -
``` ### 5. Full Screen — Apply for Income Certificate HTML: ```html

Apply for Income Certificate

Switch the inline toggle to change form labels — your entered data is preserved.

Powered by -
``` React: ```jsx import React from 'react'; const FeedbackCommunicationLanguageSwitcherExample5Demo = () => ( <>
{/* Help Centre & Contact Support Section */}
{/* Header */}

Apply for Income Certificate

Switch the inline toggle to change form labels — your entered data is preserved.

{/* Toggle Buttons */}
{/* Footer Branding */}
Powered by -
); export default FeedbackCommunicationLanguageSwitcherExample5Demo; ``` Angular: ```html

Apply for Income Certificate

Switch the inline toggle to change form labels — your entered data is preserved.

Powered by -
``` ### 6. Full Screen — This page is not yet available in Tamil HTML: ```html

This page is not yet available in Tamil

We are translating Income Certificate pages — the Tamil version is coming in May 2026.

error
Translation in progress You can read this page in English meanwhile, or use your browser to auto-translate.
Powered by -
``` React: ```jsx import React from 'react'; const FeedbackCommunicationLanguageSwitcherExample6Demo = () => ( <>
{/* Help Centre & Contact Support Section */}
{/* Header */}

This page is not yet available in Tamil

We are translating Income Certificate pages — the Tamil version is coming in May 2026.

{/* Alert */}
error
Translation in progress You can read this page in English meanwhile, or use your browser to auto-translate.
{/* Action Buttons */}
{/* Footer Branding */}
Powered by -
); export default FeedbackCommunicationLanguageSwitcherExample6Demo; ``` Angular: ```html

This page is not yet available in Tamil

We are translating Income Certificate pages — the Tamil version is coming in May 2026.

error
Translation in progress You can read this page in English meanwhile, or use your browser to auto-translate.
Powered by -
```