Feedback Dialog with a Rating

ProNew

A feedback dialog with a five-point rating as a radio group (keyboard and screen reader friendly), a comment that becomes required for low scores, and a thank-you in place of the form. Use this when you collect quick, structured feedback.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

You ask "How was it?" after an action and want a score plus an optional reason.

Do not use it when: For long surveys use a page. Do not interrupt a task to ask for feedback.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`send`	`({ rating, comment }) => Promise<void>`	Receives a 1 to 5 rating and the trimmed comment.

Accessibility

The rating is a radio group inside a fieldset with a legend; each option is a number plus a word, so the scale is clear without color or stars. Arrow keys move between the choices.
The comment label tells you when it is required, changing as the rating changes; errors are linked to their inputs.
Success replaces the trigger with a polite thank-you; nothing is sent twice because the dialog closes after a successful submit.

Testing

The pattern ships with a Testing Library test (feedback-dialog-rating.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

You ask "How was it?" after an action and want a score plus an optional reason.

Do not use it when: For long surveys use a page. Do not interrupt a task to ask for feedback.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`send`	`({ rating, comment }) => Promise<void>`	Receives a 1 to 5 rating and the trimmed comment.

Accessibility

The rating is a radio group inside a fieldset with a legend; each option is a number plus a word, so the scale is clear without color or stars. Arrow keys move between the choices.
The comment label tells you when it is required, changing as the rating changes; errors are linked to their inputs.
Success replaces the trigger with a polite thank-you; nothing is sent twice because the dialog closes after a successful submit.

Testing

The pattern ships with a Testing Library test (feedback-dialog-rating.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.