# Feedback & Communication / Form Annual Income Form input patterns for entering annual income with validation feedback **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-form-annual-income--introduction ## Pattern variants - Form Annual Income: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-form-annual-income--form-annual-income ## When to use this pattern Use Feedback & Communication / Form Annual Income 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 Annual Income. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Form Annual Income — Annual Income Input - Success State 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
``` React: ```jsx import React from 'react'; const FeedbackCommunicationFormAnnualIncomeExample1Demo = () => ( <>
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
); export default FeedbackCommunicationFormAnnualIncomeExample1Demo; ``` 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
``` ### 2. Introduction — Introduction HTML: ```html
Patterns

Form Annual Income

Form input patterns for entering annual income with validation feedback

payments

Annual Income Input

Form input with success validation feedback for entering annual income amounts with currency prefix and format verification.

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

Form Annual Income

Form input patterns for entering annual income with validation feedback

payments

Annual Income Input

Form input with success validation feedback for entering annual income amounts with currency prefix and format verification.

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

Form Annual Income

Form input patterns for entering annual income with validation feedback

payments

Annual Income Input

Form input with success validation feedback for entering annual income amounts with currency prefix and format verification.

```