Tutorial: Thumb Rating
Form Preview

What You'll Build

Simple thumbs up/down rating controls for collecting binary feedback. Perfect for "Was this helpful?" scenarios in knowledge bases, support chats, and feature feedback.

What You'll Learn

  • Adding basic thumb rating for quick binary feedback
  • Customizing labels for thumbs up/down
  • Controlling sizes (sm, md, lg)
  • Making ratings required
  • Controlling deselection behavior
  • Aligning thumb buttons (left, center, right)
  • Building dynamic follow-up questions based on selection
  • Creating complete support feedback forms
💡

Common Use Cases

  • Knowledge Base: "Was this article helpful?"
  • Support Chat: "Did this solve your problem?"
  • Feature Feedback: "Is this feature useful?"
  • Onboarding: "Was this step clear?"
⚡

Interactive Learning

Every code snippet below is fully editable! Feel free to modify the code, experiment with different values, and see your changes reflected instantly in the live preview on the right.

Use the play button to run different snippet, or the refresh button to restore the original example.

Tutorial Steps

Step 1: Basic Thumb Rating

Start with the simplest use case - a basic thumbs up/down question. The value will be 'up', 'down', or null.

💡 Tip:
Use addThumbRating() for quick binary feedback. Click a thumb to select, click again to deselect (by default).

Step 2: Custom Labels

Add text labels under the thumbs to make the options clearer for users.

💡 Tip:
Use showLabels: true with upLabel and downLabel to customize the text. Default labels are "Yes" and "No".

Step 3: Sizes

Control the size of thumb buttons with the size property.

💡 Tip:
Available sizes: 'sm' (compact), 'md' (default), 'lg' (prominent). Use larger sizes for primary questions.

Step 4: Required Rating

Make the rating mandatory before form submission.

💡 Tip:
Add isRequired: true to require users to select a rating. The form will show a validation error if not selected.

Step 5: Deselect Behavior

Control whether users can change their mind by clicking the same thumb again.

💡 Tip:
By default, allowDeselect: true lets users clear their selection. Set to false to make the choice permanent.

Step 6: Alignment

Control the horizontal alignment of the thumb buttons within the container.

💡 Tip:
Use alignment to position the buttons: 'left' (default), 'center', or 'right'. This is useful for matching your form's design style.

Step 7: Dynamic Follow-up Questions

Show different follow-up questions based on whether the user gave positive or negative feedback.

💡 Tip:
Use form.thumbRating('id')?.value() to get 'up' or 'down'. React differently to positive vs negative feedback!

Step 8: Support Chat Feedback

A complete support chat feedback form with branching paths for positive and negative feedback.

💡 Tip:
Create different follow-up flows based on the initial rating. Positive path asks for a simple rating, negative path digs into what went wrong.

Step 9: Knowledge Base Article Feedback

A knowledge base article feedback form that thanks users for positive feedback and collects improvement suggestions for negative feedback.

💡 Tip:
Thank users immediately for positive feedback. For negative feedback, offer specific options to understand what needs improvement.

Try It Yourself

  • Challenge 1: Create a feature request form where thumbs down shows a priority dropdown
  • Challenge 2: Build an onboarding step feedback that tracks which steps users found confusing
  • Challenge 3: Create a product feedback form that escalates negative feedback to support

Next Steps

Great! You've learned how to collect quick binary feedback with thumb ratings. Ready to explore more?

Continue to Emoji Rating Tutorial

Other learning paths: