Send feedback

A short rating and an open comment, the two questions that get answered most often.

Built withcardfieldtoggle-grouptoggletext-areabutton
Send feedback
Default density Compact density Restart from the initial state Show the copyable source

How was your experience?

Your answer goes straight to the product team.

Poor Okay Good Great
Not now Send feedback
<form style="inline-size:min(100%, 26rem)"> <tp-card> <h2 slot="header">How was your experience?</h2> <p slot="description">Your answer goes straight to the product team.</p> <div style="display:grid;gap:var(--tp-space-5)"> <tp-toggle-group label="Rating" variant="outline" default-value='["good"]' style="inline-size:100%"> <tp-toggle value="poor">Poor</tp-toggle> <tp-toggle value="okay">Okay</tp-toggle> <tp-toggle value="good">Good</tp-toggle> <tp-toggle value="great">Great</tp-toggle> </tp-toggle-group> <tp-field label="What could be better?" description="Optional."> <tp-text-area name="comment" rows="3"></tp-text-area> </tp-field> </div> <tp-button slot="footer" variant="ghost">Not now</tp-button> <tp-button slot="footer" type="submit">Send feedback</tp-button> </tp-card> </form>

How it’s composed

  • Toggle group in single mode is the rating: one tab stop, arrow keys between options, and a visible pressed state.
  • Field marks the comment as optional in its description instead of with an asterisk on the others.
  • Button lets people dismiss the prompt as easily as they answer it.

Make it yours

Ask the comment question only after a low rating, or replace the words with a 1 to 5 scale.

More patterns

Sign in

Email and password sign-in with a remember-me option, a recovery link and a single primary action.

Password recovery

Request a reset link by email, with a quiet description of what happens next and a route back to sign in.

Verify code

A six-digit one-time code, grouped in threes, with a resend action for the email that never arrived.

Notification settings

Grouped switches for email and push notifications, each with a one-line explanation.

Invite teammates

Invite by email with a role picker, above the list of people who already have access.

Choose a plan

Three plans as a radio group, with the price and what each includes, and one action to continue.

Upload progress

A list of files uploading in parallel, each with its own progress and a finished state.

Schedule a meeting

Pick a day on the calendar and one of the open time slots beside it.

Sound settings

Volume sliders for each channel and a switch for spatial audio.

Profile card

A person, their role and a few numbers, with follow and message actions.

API key

A secret key shown once, with a copy action, a warning and a way to roll it.