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

Enter your Annual Income

Enter your total annual household income for FY 2025–2026 to verify eligibility.

₹
check_circle Amount format looks correct
Powered by -
``` React: ```jsx import React from 'react'; const FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample1Demo = () => ( <>
{/* Feedback Communication Annual Income Form Section */}
{/* Back Link */}
arrow_back Back
{/* Form Header */}

Enter your Annual Income

Enter your total annual household income for FY 2025–2026 to verify eligibility.

{/* Input Field Group (Success State) */}
₹
check_circle Amount format looks correct
{/* Action Button */}
Powered by -
); export default FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample1Demo; ``` Angular: ```html
arrow_back Back

Enter your Annual Income

Enter your total annual household income for FY 2025–2026 to verify eligibility.

₹
check_circle Amount format looks correct
Powered by -
``` ### 2. Card — Enter your Mobile Number HTML: ```html
arrow_back Back

Enter your Mobile Number

Provide your mobile number for OTP verification and updates.

error Enter a valid 10-digit number
Powered by -
``` React: ```jsx import React from 'react'; const FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample2Demo = () => ( <>
{/* Feedback Communication Mobile Number Form Section */}
{/* Back Link */}
arrow_back Back
{/* Form Header */}

Enter your Mobile Number

Provide your mobile number for OTP verification and updates.

{/* Input Field Group (Error State) */}
error Enter a valid 10-digit number
{/* Action Button */}
Powered by -
); export default FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample2Demo; ``` Angular: ```html
arrow_back Back

Enter your Mobile Number

Provide your mobile number for OTP verification and updates.

error Enter a valid 10-digit number
Powered by -
``` ### 3. Card — Identity Verification HTML: ```html
arrow_back Back

Identity Verification

Enter your Aadhaar number to auto-fill your personal details.

info Enter 12 digits, we'll prefill your name and address
Powered by -
``` React: ```jsx import React from 'react'; const FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample3Demo = () => ( <>
{/* Feedback Communication Identity Verification Section */}
{/* Back Link */}
arrow_back Back
{/* Form Header */}

Identity Verification

Enter your Aadhaar number to auto-fill your personal details.

{/* Input Field Group (Default State) */}
info Enter 12 digits, we'll prefill your name and address
{/* Action Button */}
Powered by -
); export default FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample3Demo; ``` Angular: ```html
arrow_back Back

Identity Verification

Enter your Aadhaar number to auto-fill your personal details.

info Enter 12 digits, we'll prefill your name and address
Powered by -
``` ### 4. Card — Category Details HTML: ```html
arrow_back Back

Category Details

Select your social category as per government records.

Social Category
  • Label 1
  • Label 2
  • Label 3
    info
    Additional Document Required Since you selected SC category, please upload your caste certificate in the Documents step.
    Powered by -
    ``` React: ```jsx import React from 'react'; const FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample4Demo = () => ( <>
    {/* Feedback Communication Category Details Section */}
    {/* Back Link */}
    arrow_back Back
    {/* Form Header */}

    Category Details

    Select your social category as per government records.

    {/* Input Dropdown Field (Select Social Category) */}
    Social Category
    • Label 1 check
    • Label 2 check
    • Label 3 check
    {/* File Upload Drag & Drop Component */}
    cloud_upload

    Drop file here

    File type: PDF JPG PNG Max size: 5 MB

    Or

    error_outline

      {/* Alert Message Block */}
      info
      Additional Document Required Since you defaultSelected SC category, please upload your caste certificate in the Documents step.
      {/* Action Button */}
      Powered by -
      ); export default FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample4Demo; ``` Angular: ```html
      arrow_back Back

      Category Details

      Select your social category as per government records.

      Social Category
      • Label 1
      • Label 2
      • Label 3
        info
        Additional Document Required Since you selected SC category, please upload your caste certificate in the Documents step.
        Powered by -
        ``` ### 5. Card — Note to Citizen HTML: ```html
        arrow_back Back

        Note to Citizen

        A note written by a reviewing officer.

        error
        Note from Revenue Inspector - 12 April 2026, 11:34 AM Please resubmit the income proof with a clearer scan. The current file shows glare on the income figure row. Resubmit within 5 working days to avoid delay.
        Powered by -
        ``` React: ```jsx import React from 'react'; const FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample5Demo = () => ( <>
        {/* Feedback Communication Note to Citizen Section */}
        {/* Back Link */}
        arrow_back Back
        {/* Form Header */}

        Note to Citizen

        A note written by a reviewing officer.

        {/* Warning Message Block */}
        error
        Note from Revenue Inspector - 12 April 2026, 11:34 AM Please resubmit the income proof with a clearer scan. The current file shows glare on the income figure row. Resubmit within 5 working days to avoid delay.
        {/* Action Button */}
        Powered by -
        ); export default FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample5Demo; ``` Angular: ```html
        arrow_back Back

        Note to Citizen

        A note written by a reviewing officer.

        error
        Note from Revenue Inspector - 12 April 2026, 11:34 AM Please resubmit the income proof with a clearer scan. The current file shows glare on the income figure row. Resubmit within 5 working days to avoid delay.
        Powered by -
        ``` ### 6. Card — Verifying your Income Certificate document HTML: ```html
        arrow_back Back

        Verifying your Income Certificate document

        We are checking your uploaded PDF in real time. Each step below updates as the system completes it — keep this page open until all checks finish.

        Income Certificate

        PDF document · 1.2 MB

        Verifying
        check
        22 June 2026 File format and size within limits Passed
        check
        25 June 2026 Document is readable and not blurred Passed
        31 June 2026 Figures match the declared income Checking
        Powered by -
        ``` React: ```jsx import React from 'react'; const FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample6Demo = () => ( <>
        {/* Feedback Communication Document Verification Section */}
        {/* Back Link */}
        arrow_back Back
        {/* Form Header */}

        Verifying your Income Certificate document

        We are checking your uploaded PDF in real time. Each step below updates as the system completes it — keep this page open until all checks finish.

        {/* Document Status Card Block */}

        Income Certificate

        PDF document · 1.2 MB

        Verifying
        {/* Progress Bar Component */}
        {/* Timeline Container Block */}
        {/* Step 1 (Completed) */}
        check
        22 June 2026 File format and size within limits Passed
        {/* Step 2 (Completed) */}
        check
        25 June 2026 Document is readable and not blurred Passed
        {/* Step 3 (Active) */}
        31 June 2026 Figures match the declared income Checking
        {/* Action Button */}
        Powered by -
        ); export default FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample6Demo; ``` Angular: ```html
        arrow_back Back

        Verifying your Income Certificate document

        We are checking your uploaded PDF in real time. Each step below updates as the system completes it — keep this page open until all checks finish.

        Income Certificate

        PDF document · 1.2 MB

        Verifying
        check
        22 June 2026 File format and size within limits Passed
        check
        25 June 2026 Document is readable and not blurred Passed
        31 June 2026 Figures match the declared income Checking
        Powered by -
        ``` ### 7. Full Screen — Enter your Annual Income HTML: ```html
        arrow_back Back

        Enter your Annual Income

        Enter your total annual household income for FY 2025–2026 to verify eligibility.

        ₹
        check_circle Amount format looks correct
        Powered by -
        ``` React: ```jsx import React from 'react'; const FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample7Demo = () => ( <>
        {/* Feedback Communication Annual Income Form Section */}
        {/* Back Link */}
        arrow_back Back
        {/* Form Header */}

        Enter your Annual Income

        Enter your total annual household income for FY 2025–2026 to verify eligibility.

        {/* Input Field Group (Success State) */}
        ₹
        check_circle Amount format looks correct
        {/* Action Button */}
        Powered by -
        ); export default FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample7Demo; ``` Angular: ```html
        arrow_back Back

        Enter your Annual Income

        Enter your total annual household income for FY 2025–2026 to verify eligibility.

        ₹
        check_circle Amount format looks correct
        Powered by -
        ``` ### 8. Full Screen — Enter your Mobile Number HTML: ```html
        arrow_back Back

        Enter your Mobile Number

        Provide your mobile number for OTP verification and updates.

        error Enter a valid 10-digit number
        Powered by -
        ``` React: ```jsx import React from 'react'; const FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample8Demo = () => ( <>
        {/* Feedback Communication Mobile Number Form Section */}
        {/* Back Link */}
        arrow_back Back
        {/* Form Header */}

        Enter your Mobile Number

        Provide your mobile number for OTP verification and updates.

        {/* Input Field Group (Error State) */}
        error Enter a valid 10-digit number
        {/* Action Button */}
        Powered by -
        ); export default FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample8Demo; ``` Angular: ```html
        arrow_back Back

        Enter your Mobile Number

        Provide your mobile number for OTP verification and updates.

        error Enter a valid 10-digit number
        Powered by -
        ``` ### 9. Full Screen — Identity Verification HTML: ```html
        arrow_back Back

        Identity Verification

        Enter your Aadhaar number to auto-fill your personal details.

        info Enter 12 digits, we'll prefill your name and address
        Powered by -
        ``` React: ```jsx import React from 'react'; const FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample9Demo = () => ( <>
        {/* Feedback Communication Identity Verification Section */}
        {/* Back Link */}
        arrow_back Back
        {/* Form Header */}

        Identity Verification

        Enter your Aadhaar number to auto-fill your personal details.

        {/* Input Field Group (Default State) */}
        info Enter 12 digits, we'll prefill your name and address
        {/* Action Button */}
        Powered by -
        ); export default FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample9Demo; ``` Angular: ```html
        arrow_back Back

        Identity Verification

        Enter your Aadhaar number to auto-fill your personal details.

        info Enter 12 digits, we'll prefill your name and address
        Powered by -
        ``` ### 10. Full Screen — Category Details HTML: ```html
        arrow_back Back

        Category Details

        Select your social category as per government records.

        Social Category
        • Label 1
        • Label 2
        • Label 3
          info
          Additional Document Required Since you selected SC category, please upload your caste certificate in the Documents step.
          Powered by -
          ``` React: ```jsx import React from 'react'; const FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample10Demo = () => ( <>
          {/* Feedback Communication Category Details Section */}
          {/* Back Link */}
          arrow_back Back
          {/* Form Header */}

          Category Details

          Select your social category as per government records.

          {/* Input Dropdown Field (Select Social Category) */}
          Social Category
          • Label 1 check
          • Label 2 check
          • Label 3 check
          {/* File Upload Drag & Drop Component */}
          cloud_upload

          Drop file here

          File type: PDF JPG PNG Max size: 5 MB

          Or

          error_outline

            {/* Alert Message Block */}
            info
            Additional Document Required Since you defaultSelected SC category, please upload your caste certificate in the Documents step.
            {/* Action Button */}
            Powered by -
            ); export default FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample10Demo; ``` Angular: ```html
            arrow_back Back

            Category Details

            Select your social category as per government records.

            Social Category
            • Label 1
            • Label 2
            • Label 3
              info
              Additional Document Required Since you selected SC category, please upload your caste certificate in the Documents step.
              Powered by -
              ``` ### 11. Full Screen — Note to Citizen HTML: ```html
              arrow_back Back

              Note to Citizen

              A note written by a reviewing officer.

              error
              Note from Revenue Inspector - 12 April 2026, 11:34 AM Please resubmit the income proof with a clearer scan. The current file shows glare on the income figure row. Resubmit within 5 working days to avoid delay.
              Powered by -
              ``` React: ```jsx import React from 'react'; const FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample11Demo = () => ( <>
              {/* Feedback Communication Note to Citizen Section */}
              {/* Back Link */}
              arrow_back Back
              {/* Form Header */}

              Note to Citizen

              A note written by a reviewing officer.

              {/* Warning Message Block */}
              error
              Note from Revenue Inspector - 12 April 2026, 11:34 AM Please resubmit the income proof with a clearer scan. The current file shows glare on the income figure row. Resubmit within 5 working days to avoid delay.
              {/* Action Button */}
              Powered by -
              ); export default FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample11Demo; ``` Angular: ```html
              arrow_back Back

              Note to Citizen

              A note written by a reviewing officer.

              error
              Note from Revenue Inspector - 12 April 2026, 11:34 AM Please resubmit the income proof with a clearer scan. The current file shows glare on the income figure row. Resubmit within 5 working days to avoid delay.
              Powered by -
              ``` ### 12. Full Screen — Verifying your Income Certificate document HTML: ```html
              arrow_back Back

              Verifying your Income Certificate document

              We are checking your uploaded PDF in real time. Each step below updates as the system completes it — keep this page open until all checks finish.

              Income Certificate

              PDF document · 1.2 MB

              Verifying
              check
              22 June 2026 File format and size within limits Passed
              check
              25 June 2026 Document is readable and not blurred Passed
              31 June 2026 Figures match the declared income Checking
              Powered by -
              ``` React: ```jsx import React from 'react'; const FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample12Demo = () => ( <>
              {/* Feedback Communication Document Verification Section */}
              {/* Back Link */}
              arrow_back Back
              {/* Form Header */}

              Verifying your Income Certificate document

              We are checking your uploaded PDF in real time. Each step below updates as the system completes it — keep this page open until all checks finish.

              {/* Document Status Card Block */}

              Income Certificate

              PDF document · 1.2 MB

              Verifying
              {/* Progress Bar Component */}
              {/* Timeline Container Block */}
              {/* Step 1 (Completed) */}
              check
              22 June 2026 File format and size within limits Passed
              {/* Step 2 (Completed) */}
              check
              25 June 2026 Document is readable and not blurred Passed
              {/* Step 3 (Active) */}
              31 June 2026 Figures match the declared income Checking
              {/* Action Button */}
              Powered by -
              ); export default FeedbackCommunicationInlineFeedbackAndStatusCommunicationExample12Demo; ``` Angular: ```html
              arrow_back Back

              Verifying your Income Certificate document

              We are checking your uploaded PDF in real time. Each step below updates as the system completes it — keep this page open until all checks finish.

              Income Certificate

              PDF document · 1.2 MB

              Verifying
              check
              22 June 2026 File format and size within limits Passed
              check
              25 June 2026 Document is readable and not blurred Passed
              31 June 2026 Figures match the declared income Checking
              Powered by -
              ```