# Feedback & Communication / File Complaint File a complaint form with category selection, description, and optional file upload. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-file-complaint--introduction ## Pattern variants - File Complaint: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-file-complaint--file-complaint ## When to use this pattern Use Feedback & Communication / File Complaint 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 / File Complaint. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. File Complaint — File Complaint HTML: ```html

File a complaint

Report a portal issue — we will respond within 2 working days.

  • Technical Issue
  • Payment Problem
  • Service Delay
  • Other
Powered by -
``` React: ```jsx import React from 'react'; const FeedbackCommunicationFileComplaintExample1Demo = () => ( <>
{/* Help Centre & Contact Support Section */}
{/* Header */}

File a complaint

Report a portal issue — we will respond within 2 working days.

{/* Form Fields */}
{/* Subject field */}
{/* Category field */}
{/* Trigger Button */} {/* Custom List Menu */}
  • Technical Issue check
  • Payment Problem check
  • Service Delay check
  • Other check
{/* Description field */}
{/* Action Buttons */}
{/* Footer Branding */}
Powered by -
); export default FeedbackCommunicationFileComplaintExample1Demo; ``` Angular: ```html

File a complaint

Report a portal issue — we will respond within 2 working days.

  • Technical Issue
  • Payment Problem
  • Service Delay
  • Other
Powered by -
``` ### 2. Introduction — Introduction HTML: ```html
Patterns

File Complaint

File a complaint form with category selection, description, and optional file upload.

feedback

File Complaint

Complaint filing form with service selection, description, and document attachment.

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

File Complaint

File a complaint form with category selection, description, and optional file upload.

feedback

File Complaint

Complaint filing form with service selection, description, and document attachment.

); export default FeedbackCommunicationFileComplaintExample2Demo; ``` Angular: ```html
Patterns

File Complaint

File a complaint form with category selection, description, and optional file upload.

feedback

File Complaint

Complaint filing form with service selection, description, and document attachment.

```