# Feedback Feedback allows users to provide ratings and share opinions about their experience. It supports multiple feedback formats, including thumbs, stars, NPS, and emoji ratings. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-feedback--introduction ## Variants documented in Storybook - Feedback Type: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-feedback--feedback-type ## 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. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Feedback Type — Binary Feedback (Thumb) HTML: ```html

How was your experience?

``` React: ```jsx import React from 'react'; const FeedbackExample1Demo = () => ( <> {/* Variant: Feedback - Binary Thumb */}

How was your experience?

); export default FeedbackExample1Demo; ``` Angular: ```html

How was your experience?

``` ### 2. Feedback Type — Rating Feedback (Stars) HTML: ```html

Rate your experience

star star star star star

What can we improve?

``` React: ```jsx import React from 'react'; const FeedbackExample2Demo = () => ( <> {/* Variant: Feedback - Star Rating */}

Rate your experience

star star star star star

What can we improve?

); export default FeedbackExample2Demo; ``` Angular: ```html

Rate your experience

star star star star star

What can we improve?

``` ### 3. Feedback Type — Recommendation Score (NPS) HTML: ```html

How likely are you to recommend us?

0 - Extremely Unlikely 10 - Extremely Likely

``` React: ```jsx import React from 'react'; const FeedbackExample3Demo = () => ( <> {/* Variant: Feedback - NPS */}

How likely are you to recommend us?

0 - Extremely Unlikely 10 - Extremely Likely

); export default FeedbackExample3Demo; ``` Angular: ```html

How likely are you to recommend us?

0 - Extremely Unlikely 10 - Extremely Likely

``` ### 4. Feedback Type — Sentiment Feedback (Emoji) HTML: ```html

How do you feel about this service?

Bad Good

``` React: ```jsx import React from 'react'; const FeedbackExample4Demo = () => ( <> {/* Variant: Feedback - Emoji Sentiment */}

How do you feel about this service?

chevron_left Bad Good chevron_right

); export default FeedbackExample4Demo; ``` Angular: ```html

How do you feel about this service?

Bad Good

``` ### 5. Feedback Type — Success State HTML: ```html

thumb_up

Feedback submitted

Thank you for your feedback. This helps improve government services.

``` React: ```jsx import React from 'react'; const FeedbackExample5Demo = () => ( <> {/* Variant: Feedback - Submitted Success State */}

thumb_up

Feedback submitted

Thank you for your feedback. This helps improve government services.

); export default FeedbackExample5Demo; ``` Angular: ```html

thumb_up

Feedback submitted

Thank you for your feedback. This helps improve government services.

``` ### 6. Introduction — Introduction HTML: ```html

Components

Feedback

Feedback allows users to provide ratings and share opinions about their experience. It supports multiple feedback formats, including thumbs, stars, NPS, and emoji ratings.

Implementation Showcase

Visual demonstration of various Feedback patterns for capturing user input.

Binary Feedback (Thumb)

How was your experience?

Rating Feedback (Stars)

Rate your experience

star star star star star

What can we improve?

Recommendation Score (NPS)

How likely are you to recommend us?

0 - Extremely Unlikely 10 - Extremely Likely

Sentiment Feedback (Emoji)

How do you feel about this service?

Bad Good

Success State

thumb_up

Feedback submitted

Thank you for your feedback. This helps improve government services.

CSS Class Reference

Quickly copy layout and interaction classes for Feedback components.

Structural Classes

Base Container ux4g-feedback

Thumb Wrapper feedback-thumb-wrapper

Chip Wrapper ux4g-feedback-chip-wrapper

Textarea Wrapper ux4g-textarea-container

NPS Wrapper ux4g-feedback-nps-wrapper

Submitted Wrapper feedback-submitted-wrapper

Interaction Classes

Thumb Button feedback-thumb-up

Star Icon ux4g-feedback-star

NPS Score Button feedback-nps-button

Emoji Button feedback-emoji-button

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

Components

Feedback

Feedback allows users to provide ratings and share opinions about their experience. It supports multiple feedback formats, including thumbs, stars, NPS, and emoji ratings.

Implementation Showcase

Visual demonstration of various Feedback patterns for capturing user input.

Binary Feedback (Thumb)

How was your experience?

Rating Feedback (Stars)

Rate your experience

star star star star star

What can we improve?

Recommendation Score (NPS)

How likely are you to recommend us?

0 - Extremely Unlikely 10 - Extremely Likely

Sentiment Feedback (Emoji)

How do you feel about this service?

chevron_left Bad Good chevron_right

Success State

thumb_up

Feedback submitted

Thank you for your feedback. This helps improve government services.

CSS Class Reference

Quickly copy layout and interaction classes for Feedback components.

{/* Structural Classes */}

Structural Classes

Base Container ux4g-feedback

Thumb Wrapper feedback-thumb-wrapper

Chip Wrapper ux4g-feedback-chip-wrapper

Textarea Wrapper ux4g-textarea-container

NPS Wrapper ux4g-feedback-nps-wrapper

Submitted Wrapper feedback-submitted-wrapper

{/* Interaction Classes */}

Interaction Classes

Thumb Button feedback-thumb-up

Star Icon ux4g-feedback-star

NPS Score Button feedback-nps-button

Emoji Button feedback-emoji-button

); export default FeedbackExample6Demo; ``` Angular: ```html

Components

Feedback

Feedback allows users to provide ratings and share opinions about their experience. It supports multiple feedback formats, including thumbs, stars, NPS, and emoji ratings.

Implementation Showcase

Visual demonstration of various Feedback patterns for capturing user input.

Binary Feedback (Thumb)

How was your experience?

Rating Feedback (Stars)

Rate your experience

star star star star star

What can we improve?

Recommendation Score (NPS)

How likely are you to recommend us?

0 - Extremely Unlikely 10 - Extremely Likely

Sentiment Feedback (Emoji)

How do you feel about this service?

Bad Good

Success State

thumb_up

Feedback submitted

Thank you for your feedback. This helps improve government services.

CSS Class Reference

Quickly copy layout and interaction classes for Feedback components.

Structural Classes

Base Container ux4g-feedback

Thumb Wrapper feedback-thumb-wrapper

Chip Wrapper ux4g-feedback-chip-wrapper

Textarea Wrapper ux4g-textarea-container

NPS Wrapper ux4g-feedback-nps-wrapper

Submitted Wrapper feedback-submitted-wrapper

Interaction Classes

Thumb Button feedback-thumb-up

Star Icon ux4g-feedback-star

NPS Score Button feedback-nps-button

Emoji Button feedback-emoji-button

``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.