What You'll Build

Professional rating scales for customer feedback surveys, including NPS (Net Promoter Score), CES (Customer Effort Score), Likert scales, and custom scales. These are essential components for measuring customer satisfaction, loyalty, and experience.

What You'll Learn

Creating NPS surveys with the standard 0-10 scale
Using segment colors to highlight Detractor/Passive/Promoter categories
Adding Likert scales (5-point and 7-point) for agreement ratings
Creating CES (Customer Effort Score) surveys
Building satisfaction scales
Defining custom scales with your own min/max and labels
Choosing between button and segmented visual variants
Customizing sizes and alignment
Making rating scales required
Adding confetti animation for promoter scores
Using npsCategory() to create conditional follow-up questions
Building a complete multi-section feedback survey

⚡

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 NPS

Let's start with the most popular feedback metric: Net Promoter Score (NPS). The preset: 'nps' automatically configures a 0-10 scale with standard labels.

💡 Tip:

NPS is the industry standard for measuring customer loyalty. It asks "How likely are you to recommend us?" on a scale of 0-10, categorizing respondents as Detractors (0-6), Passives (7-8), or Promoters (9-10).

Step 2: NPS with Colors & Category Labels

Enhance your NPS with visual feedback! Enable showSegmentColors to color-code each value (red for detractors, yellow for passives, green for promoters), and showCategoryLabel to display the category name after selection. You can also customize the category labels using categoryLabels.

💡 Tip:

Segment colors help users intuitively understand the rating scale. The category label appears after selection. Use categoryLabels to replace default labels ("Detractor", "Passive", "Promoter") with custom ones like "Critic", "Neutral", "Fan".

Step 3: Likert Scales

Likert scales are perfect for measuring agreement with statements. Use preset: 'likert-5' for a 1-5 scale or 'likert-7' for more granularity. Both come with "Strongly disagree" to "Strongly agree" labels.

💡 Tip:

5-point Likert scales are most common for quick surveys, while 7-point scales provide more nuance. Choose based on how much detail you need in responses.

Step 4: CES (Customer Effort Score)

CES measures how easy it was for customers to accomplish a task. The preset: 'ces' creates a 1-7 scale with "Very difficult" to "Very easy" labels.

💡 Tip:

CES is a strong predictor of customer loyalty. Research shows that reducing customer effort increases satisfaction more than delighting customers. Lower effort = higher retention!

Step 5: Satisfaction Scale

The satisfaction preset is ideal for simple satisfaction surveys. It's a 1-5 scale with "Very dissatisfied" to "Very satisfied" labels.

💡 Tip:

Satisfaction scales are versatile - use them for overall satisfaction, service quality, product quality, or any area where you want to gauge happiness levels.

Step 6: Custom Scale

Need a different range? Use preset: 'custom' and define your own min, max, lowLabel, and highLabel.

💡 Tip:

Custom scales give you full control. You can create any numeric range (e.g., 0-5, 1-7, 0-100) with any labels that fit your survey context.

Step 7: Visual Variants

Choose between two visual styles: variant: 'buttons' (default) shows individual clickable buttons, while 'segmented' displays a connected segmented control.

💡 Tip:

The "buttons" variant works well for any scale length, while "segmented" creates a more compact, unified look. Choose based on your form's design language.

Step 8: Sizes and Alignment

Control the appearance with size: 'sm' | 'md' | 'lg' and alignment: 'left' | 'center' | 'right'.

💡 Tip:

Use smaller sizes when space is limited or you have many scales. Center alignment (default) works best for standalone scales, while left/right alignment helps when integrating with other form elements.

Step 9: Required Rating

Make the rating scale mandatory before form submission with isRequired: true.

💡 Tip:

When isRequired is set, the form will show a validation error if the user tries to submit without selecting a rating. Try clicking Submit without selecting anything!

Step 10: Confetti Animation

Add a celebratory touch! Enable showConfettiOnPromoter: true to trigger a confetti animation when users select a promoter score (9 or 10).

💡 Tip:

The confetti effect creates a delightful micro-interaction that rewards positive feedback. It's a small touch that can make surveys feel more engaging!

Step 11: Deselect Behavior

Control whether users can change their mind by clicking the same value again to clear their selection.

💡 Tip:

By default, allowDeselect: true lets users clear their selection by clicking the same value twice. Set to false to make the choice permanent - once a value is selected, it cannot be removed.

Step 12: Tracking User Journey

Use onCategoryChange to track the user's decision journey - count how many times they changed their mind, remember their first impression, and show special follow-up questions for hesitant users. Combine with npsCategory() for reactive UI updates.

💡 Tip:

This example tracks: (1) first category selected, (2) full journey history, (3) number of category changes. If user changes their mind 3+ times, a special "hesitation" question appears. Try clicking different scores to see the journey tracking in action!

Step 13: Complete Feedback Survey

Let's put it all together! This complete example combines NPS, CES, Likert scales, and satisfaction ratings in organized subforms, with conditional follow-up questions.

💡 Tip:

Real-world feedback surveys often combine multiple scale types. Use subforms to organize related questions, and leverage npsCategory() to personalize the experience based on initial responses.

Presets Quick Reference

Preset	Range	Low Label	High Label	Use Case
`nps`	0-10	Not at all likely	Extremely likely	Customer loyalty
`likert-5`	1-5	Strongly disagree	Strongly agree	Agreement surveys
`likert-7`	1-7	Strongly disagree	Strongly agree	Detailed agreement
`ces`	1-7	Very difficult	Very easy	Effort measurement
`satisfaction`	1-5	Very dissatisfied	Very satisfied	Satisfaction surveys
`custom`	Your choice	Your choice	Your choice	Any custom scale

Try It Yourself

Challenge 1: Create an NPS survey with custom category labels (e.g., "Critic", "Neutral", "Fan" instead of Detractor/Passive/Promoter)
Challenge 2: Build a product review form with both Likert scales (for quality, value, usability) and an NPS question
Challenge 3: Create a CES survey that shows different follow-up questions based on whether the score is low (1-3) or high (5-7)

Next Steps

Excellent! You've mastered rating scales for professional feedback surveys. Ready to explore more form components?

Continue to Price Display Tutorial

Other learning paths:

Star Ratings Tutorial - Visual star-based ratings
Conditional Visibility Tutorial - Show/hide fields dynamically
Subforms Tutorial - Organize complex forms