Tutorial: Emoji Rating
Form Preview

What You'll Build

Visual emoji-based rating controls for collecting quick, intuitive feedback. Emojis are universally understood and create a more engaging user experience compared to traditional rating scales.

What You'll Learn

  • Adding basic emoji rating with satisfaction preset
  • Using different presets: mood, effort, agreement
  • Creating custom emoji sets for specific use cases
  • Controlling sizes (sm, md, lg)
  • Making emoji ratings required
  • Toggling labels and alignment options
  • Building dynamic follow-up questions based on selection
  • Creating a complete multi-step feedback form
🎨

Available Presets

  • satisfaction: 😡 😕 😐 🙂 😍 (Very Bad → Excellent)
  • mood: 😢 😔 😐 😊 🤩 (Sad → Excited)
  • effort: 😫 😓 😐 💪 🚀 (Very Hard → Very Easy)
  • agreement: 👎 🤷 👍 (Disagree → Agree)
  • custom: Define your own emojis!
⚡

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 Emoji Rating

Start with the most common use case - a satisfaction rating. The satisfaction preset provides 5 emoji options from "Very Bad" to "Excellent".

💡 Tip:
Use addEmojiRating() with preset: 'satisfaction' for quick customer feedback. Click any emoji to select it - click again to deselect.

Step 2: Mood Preset

The mood preset is perfect for mood tracking, wellness apps, or checking in on how users feel.

💡 Tip:
The mood preset uses: 😢 Sad, 😔 Down, 😐 Neutral, 😊 Happy, 🤩 Excited

Step 3: Effort Preset

The effort preset measures how easy or difficult something was - similar to Customer Effort Score (CES) but more visual and engaging.

💡 Tip:
The effort preset uses: 😫 Very Hard, 😓 Hard, 😐 Neutral, 💪 Easy, 🚀 Very Easy

Step 4: Agreement Preset

The agreement preset is a simple 3-option scale for yes/no/maybe type questions like recommendations.

💡 Tip:
The agreement preset uses only 3 options: 👎 Disagree, 🤷 Neutral, 👍 Agree - perfect for quick binary-ish feedback!

Step 5: Custom Emojis

Create your own emoji sets with preset: 'custom'. Define any emojis that fit your specific use case - weather, food, activities, anything!

💡 Tip:
With preset: 'custom', provide an emojis array with objects containing id, emoji, and optional label. The id is the value stored when selected.

Step 6: Sizes

Control the size of emoji buttons with the size property. Choose from small, medium, or large based on your layout needs.

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

Step 7: Required Rating

Make the emoji rating 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 an emoji. Try clicking Submit without selecting anything!

Step 8: Labels & Alignment

Control whether text labels appear under emojis and how the rating is aligned horizontally.

💡 Tip:
Use showLabels: false for a cleaner look when space is limited. Use alignment: 'left' | 'center' | 'right' to position the rating group.

Step 9: Deselect Behavior

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

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

Step 10: Dynamic Follow-up Questions

The real power comes from reacting to selections! Show different follow-up questions and styling based on the emoji chosen.

💡 Tip:
Use form.emojiRating('id')?.value() to get the selected emoji's id (e.g., 'excellent', 'good', 'neutral', 'bad', 'very-bad' for satisfaction preset). Use this in isVisible, customStyles, and label functions!

Step 11: Complete Feedback Form

Let's build a complete multi-step feedback form using multiple emoji ratings. Questions appear progressively as the user provides input.

💡 Tip:
Combine different presets in one form! Use satisfaction for overall experience, effort for ease of use, agreement for recommendations, and mood for emotional check-ins.

Try It Yourself

  • Challenge 1: Create a custom emoji rating for rating different food types (pizza, sushi, burger, salad)
  • Challenge 2: Build a daily mood tracker that changes background color based on the selected mood
  • Challenge 3: Create a support ticket form where negative ratings automatically show an email field for follow-up

Next Steps

Excellent! You've mastered emoji ratings for engaging user feedback. Ready to explore more?

Continue to Rating Scales Tutorial

Other learning paths: