# Feedback & Communication / Form Category Details Category selection form with dropdown, file upload, and validation alerts **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-form-category-details--introduction ## Pattern variants - Form Category Details: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-form-category-details--form-category-details ## When to use this pattern Use Feedback & Communication / Form Category Details 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 / Form Category Details. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Form Category Details — Category Details - Dropdown with Upload 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.
    ``` React: ```jsx import React from 'react'; const FeedbackCommunicationFormCategoryDetailsExample1Demo = () => ( <>
    arrow_back Back

    Category Details

    Select your social category as per government records.

    Social Category
    • Label 1 check
    • Label 2 check
    • Label 3 check
    cloud_upload

    Drop file here

    File type: PDF JPG PNG Max size: 5 MB

    Or

    error_outline

      info
      Additional Document Required Since you defaultSelected SC category, please upload your caste certificate in the Documents step.
      ); export default FeedbackCommunicationFormCategoryDetailsExample1Demo; ``` 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.
        ``` ### 2. Introduction — Introduction HTML: ```html
        Patterns

        Form Category Details

        Category selection form with dropdown, file upload, and validation alerts

        category

        Category Details

        Social category selection dropdown with document upload area and additional document requirement alert.

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

        Form Category Details

        Category selection form with dropdown, file upload, and validation alerts

        category

        Category Details

        Social category selection dropdown with document upload area and additional document requirement alert.

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

        Form Category Details

        Category selection form with dropdown, file upload, and validation alerts

        category

        Category Details

        Social category selection dropdown with document upload area and additional document requirement alert.

        ```