Emoji & Thumb Ratings for Quick Feedback

"Was this helpful?" Thumbs up, thumbs down. Done. No thinking, no typing, just a tap. That's the power of visual ratings - they remove friction so completely that even annoyed users will give you feedback.

Star ratings work for considered reviews. But for quick pulse checks - did this article help, how are you feeling, was support useful - emoji and thumb ratings get responses that stars and scales don't.

This guide covers when to use each type, the built-in presets, custom emoji options, and patterns for conditional follow-up questions.

Thumb Ratings: Binary Feedback

Thumbs up or thumbs down. Yes or no. Good or bad. When you need a simple binary response, nothing beats the thumb.

form.addRow(row => {
  row.addThumbRating('helpful', {
    label: 'Was this article helpful?',
    showLabels: true,
    upLabel: 'Yes',
    downLabel: 'No',
    size: 'lg'
  });
});

The showLabels option adds text under each thumb. Custom labels like "Yes" / "No" or "Solved" / "Still stuck" make the choice crystal clear.

Conditional Follow-Up

A thumb rating alone tells you sentiment. But why? Add a follow-up question that adapts based on their response.

form.addRow(row => {
  row.addThumbRating('helpful', {
    label: 'Was this helpful?',
    size: 'lg'
  });
});

// Show follow-up based on response
form.addRow(row => {
  row.addTextarea('feedback', {
    label: () => {
      const response = form.thumbRating('helpful')?.value();
      if (response === 'up') return 'Great! What did you find most useful?';
      if (response === 'down') return 'Sorry to hear that. How can we improve?';
      return 'Your feedback';
    },
    placeholder: 'Optional feedback...',
    rows: 2,
    isVisible: () => form.thumbRating('helpful')?.value() !== null
  });
});

Thumbs up gets "What did you find most useful?" - reinforcing the positive. Thumbs down gets "How can we improve?" - understanding the problem. The question only appears after they respond, keeping the initial ask simple.

Emoji Ratings: Expressive Feedback

When binary isn't enough but a 1-10 scale is overkill, emoji ratings hit the sweet spot. Five faces capture nuance while staying instant to answer.

Satisfaction Preset

form.addRow(row => {
  row.addEmojiRating('satisfaction', {
    label: 'How was your experience?',
    preset: 'satisfaction',
    size: 'lg',
    showLabels: true
  });
});

// Satisfaction preset shows:
// 😡 Very Bad | 😕 Bad | 😐 Neutral | 🙂 Good | 😍 Excellent

The satisfaction preset is the most versatile - it works for products, services, support interactions, anything where you want to know how happy someone is.

Mood Preset

form.addRow(row => {
  row.addEmojiRating('mood', {
    label: 'How are you feeling today?',
    preset: 'mood',
    size: 'lg',
    showLabels: true
  });
});

// Mood preset shows:
// 😢 Sad | 😔 Down | 😐 Neutral | 😊 Happy | 🤩 Excited

Mood is for emotional states, not evaluations. Use it for check-ins, wellness surveys, or any context where you're asking how someone feels rather than how something performed.

Effort Preset

form.addRow(row => {
  row.addEmojiRating('effort', {
    label: 'How easy was this process?',
    preset: 'effort',
    size: 'lg',
    showLabels: true
  });
});

// Effort preset shows:
// 😫 Very Hard | 😓 Hard | 😐 Neutral | 💪 Easy | 🚀 Very Easy

Effort measures difficulty - perfect for Customer Effort Score (CES) surveys or evaluating processes. "How easy was it to..." questions work well here.

Agreement Preset

form.addRow(row => {
  row.addEmojiRating('agreement', {
    label: 'Do you agree with this statement?',
    preset: 'agreement',
    size: 'lg',
    showLabels: true
  });
});

// Agreement preset shows:
// 👎 Disagree | 🤷 Neutral | 👍 Agree

Agreement is a compact three-option scale for yes/no/maybe questions. Use it when you need more nuance than thumbs but less than five options.

Custom Emoji

The presets cover common cases, but you can define any emoji set. Priority levels, energy states, whatever fits your context.

form.addRow(row => {
  row.addEmojiRating('priority', {
    label: 'How urgent is this?',
    preset: 'custom',
    emojis: [
      { id: 'low', emoji: '🐢', label: 'Low' },
      { id: 'medium', emoji: '🚶', label: 'Medium' },
      { id: 'high', emoji: '🏃', label: 'High' },
      { id: 'critical', emoji: '🔥', label: 'Critical' }
    ],
    size: 'lg',
    showLabels: true
  });
});

Each emoji needs an id (the value stored), emoji (what displays), and optional label (text below). Pick emojis that clearly communicate the meaning at a glance.

Real-World Patterns

Support Ticket Resolution

After a support interaction, you need to know if the problem is solved. A thumb rating does the initial triage, then you dig deeper only if needed.

form.setTitle(() => 'Quick Feedback');

// Thumb for initial triage
form.addRow(row => {
  row.addThumbRating('resolved', {
    label: 'Did this solve your problem?',
    size: 'lg',
    showLabels: true,
    upLabel: 'Yes, solved!',
    downLabel: 'No, still stuck'
  });
});

// Conditional follow-up for unresolved
const unresolvedSection = form.addSubform('unresolved', {
  title: 'Help us help you',
  isVisible: () => form.thumbRating('resolved')?.value() === 'down'
});

unresolvedSection.addRow(row => {
  row.addEmojiRating('frustration', {
    label: 'How frustrated are you?',
    preset: 'custom',
    emojis: [
      { id: 'fine', emoji: '😊', label: 'I\'m fine' },
      { id: 'meh', emoji: '😐', label: 'A little' },
      { id: 'frustrated', emoji: '😤', label: 'Frustrated' },
      { id: 'angry', emoji: '🤬', label: 'Very!' }
    ],
    size: 'lg',
    showLabels: true
  });
});

unresolvedSection.addRow(row => {
  row.addTextarea('issue', {
    label: 'What\'s still not working?',
    rows: 3,
    isRequired: true
  });
});

Solved? Great, we're done. Not solved? The form expands to capture frustration level and the remaining issue. This pattern collects detailed feedback only from users who need more help.

Product Feedback

Multiple emoji ratings in sequence let customers evaluate different aspects quickly. Each tap takes a second.

// Quick product feedback after purchase
form.addRow(row => {
  row.addEmojiRating('quality', {
    label: 'Product quality',
    preset: 'satisfaction',
    size: 'md'
  });
});

form.addRow(row => {
  row.addEmojiRating('shipping', {
    label: 'Shipping experience',
    preset: 'satisfaction',
    size: 'md'
  });
});

form.addRow(row => {
  row.addEmojiRating('packaging', {
    label: 'Packaging',
    preset: 'satisfaction',
    size: 'md'
  });
});

form.addRow(row => {
  row.addThumbRating('recommend', {
    label: 'Would you recommend us?',
    size: 'lg',
    showLabels: true
  });
});

Four questions, four taps, done. Compare this to a text form asking the same things - the emoji version gets 10x the completion rate.

Article/Documentation Feedback

The classic "Was this page helpful?" pattern. Start minimal, expand if they engage.

// Minimal article/doc feedback
form.addRow(row => {
  row.addThumbRating('helpful', {
    label: 'Was this page helpful?',
    size: 'lg'
  });
});

// Only ask more if they engaged
form.addRow(row => {
  row.addEmojiRating('clarity', {
    label: 'How clear was the explanation?',
    preset: 'custom',
    emojis: [
      { id: 'confusing', emoji: '🤔', label: 'Confusing' },
      { id: 'ok', emoji: '😐', label: 'OK' },
      { id: 'clear', emoji: '💡', label: 'Clear' }
    ],
    size: 'md',
    showLabels: true,
    isVisible: () => form.thumbRating('helpful')?.value() !== null
  });
});

Event/Meeting Check-In

Quick pulse check before starting. Takes five seconds, gives you useful data about the room's energy.

// Quick event/meeting check-in
form.addRow(row => {
  row.addEmojiRating('energy', {
    label: 'Energy level right now?',
    preset: 'mood',
    size: 'lg',
    showLabels: true
  });
});

form.addRow(row => {
  row.addThumbRating('ready', {
    label: 'Ready to start?',
    size: 'lg',
    showLabels: true,
    upLabel: 'Let\'s go!',
    downLabel: 'Need a moment'
  });
});

Styling Options

Size

Three sizes for different contexts. Large for primary questions and mobile, medium for balanced layouts, small for inline or secondary feedback.

// Small - inline feedback, compact spaces
row.addThumbRating('vote', { size: 'sm' });

// Medium - default, balanced
row.addEmojiRating('rating', { preset: 'satisfaction', size: 'md' });

// Large - primary questions, mobile-friendly
row.addEmojiRating('main', { preset: 'satisfaction', size: 'lg' });

Alignment

Control where the rating appears within its container.

// Left aligned (default)
row.addThumbRating('feedback', {
  label: 'Helpful?',
  alignment: 'left'
});

// Center aligned - good for standalone questions
row.addEmojiRating('satisfaction', {
  label: 'How was it?',
  preset: 'satisfaction',
  alignment: 'center'
});

// Right aligned - matches right-aligned layouts
row.addThumbRating('vote', {
  alignment: 'right'
});

Deselect Behavior

By default, clicking a selected option clears it. Sometimes you want to lock in the choice.

// Allow changing mind (default: true)
row.addEmojiRating('rating', {
  preset: 'satisfaction',
  allowDeselect: true  // Click again to clear
});

// Lock in choice
row.addThumbRating('confirm', {
  label: 'Confirm your vote',
  allowDeselect: false  // Can't undo, only change
});

Complete Example

A quick feedback form using emoji and thumb ratings with progressive disclosure:

export function quickFeedback(form: FormTs) {
  form.setTitle(() => 'How did we do?');

  // Primary satisfaction question
  form.addRow(row => {
    row.addEmojiRating('overall', {
      label: 'Overall experience',
      preset: 'satisfaction',
      size: 'lg',
      showLabels: true,
      alignment: 'center'
    });
  });

  // Quick yes/no follow-up
  form.addRow(row => {
    row.addThumbRating('recommend', {
      label: 'Would you recommend us?',
      size: 'lg',
      showLabels: true,
      isVisible: () => form.emojiRating('overall')?.value() !== null
    });
  });

  // Optional comment
  form.addRow(row => {
    row.addTextarea('comment', {
      label: 'Anything else?',
      placeholder: 'Optional...',
      rows: 2,
      isVisible: () => form.thumbRating('recommend')?.value() !== null
    });
  });

  form.configureSubmitButton({ label: 'Send Feedback' });
}

When to Use What

Choosing between thumbs, emoji, and traditional ratings:

• Thumb ratings - Binary questions: yes/no, good/bad, solved/unsolved. Maximum simplicity.
• Emoji ratings - Quick sentiment with some nuance. 3-5 options. Casual, friendly tone.
• Star ratings - Considered reviews where 1-5 precision matters. Products, services.
• NPS/scales - When you need specific numeric data. Formal surveys, benchmarking.

When in doubt, start with thumbs. You can always add more options if you need the nuance. Most of the time, you don't.