Rating

A rating input with two display modes: stars (default) for a traditional star-based UI, or buttons for numbered buttons. Configure the scale size with rateCount and add descriptive labels with minLabel / maxLabel.

Schema Example

ratingjson

{
  id: "satisfaction",
  type: "rating",
  label: "How satisfied are you?",
  required: true,
  rateCount: 5,
  displayMode: "stars"       // "stars" (default) or "buttons"
}

Available Options

Property	Type	Description
label	string	The question text displayed to the user.
rateCount	number	Number of stars or buttons to display (2–10). Defaults to 5.
displayMode	"stars" \| "buttons"	Visual style of the rating. `"stars"` (default) shows star icons; `"buttons"` shows numbered buttons 1–N.
minLabel	string	Descriptive label shown at the low end of the scale (e.g. "Not at all likely").
maxLabel	string	Descriptive label shown at the high end of the scale (e.g. "Extremely likely").
required	boolean	Whether a rating must be selected.
defaultValue	number	Pre-selected rating value.
description	string	Optional helper text displayed below the label.
visibleIf	string	Conditional expression to show/hide this question.
validation	ValidationRule[]	Custom validation rules for this question.

Display Modes

Choose between a classic star UI or numbered button scale:

Display modesjson

// Stars (default)
{
  id: "stars-rating",
  type: "rating",
  label: "Rate your experience",
  rateCount: 5,
  displayMode: "stars"
}

// Numbered buttons
{
  id: "nps-score",
  type: "rating",
  label: "How likely are you to recommend us?",
  rateCount: 10,
  displayMode: "buttons",
  minLabel: "Not at all likely",
  maxLabel: "Extremely likely"
}

Scale Labels

Use minLabel and maxLabel to add descriptive text at each end of the scale. Works with both display modes:

Scale labelsjson

{
  id: "effort",
  type: "rating",
  label: "How easy was this task?",
  rateCount: 7,
  displayMode: "buttons",
  minLabel: "Very difficult",
  maxLabel: "Very easy"
}

// Stars with labels
{
  id: "quality",
  type: "rating",
  label: "Product quality",
  rateCount: 5,
  minLabel: "Poor",
  maxLabel: "Excellent"
}

Custom Star Count

Custom star countsjson

// 10-point scale
{
  id: "nps",
  type: "rating",
  label: "How likely are you to recommend us?",
  rateCount: 10,
  required: true
}

// 3-star rating
{
  id: "quick-feedback",
  type: "rating",
  label: "Rate this article",
  rateCount: 3
}

Answer Format

Returns a number between 1 and rateCount (inclusive), representing the selected star or button.

Practical Example

Advanced Example

A product review form combining both display modes:

ProductReview.tsxtsx

import { SurveyRenderer } from 'react-minimal-survey-builder';
import type { SurveySchema } from 'react-minimal-survey-builder';

const reviewSchema: SurveySchema = {
  id: 'product-review',
  title: 'Review This Product',
  pages: [
    {
      id: 'ratings',
      questions: [
        {
          id: 'overall',
          type: 'rating',
          label: 'Overall rating',
          required: true,
          rateCount: 5,
          minLabel: 'Poor',
          maxLabel: 'Excellent',
        },
        {
          id: 'quality',
          type: 'rating',
          label: 'Build quality',
          rateCount: 5,
        },
        {
          id: 'value',
          type: 'rating',
          label: 'Value for money',
          rateCount: 5,
        },
        {
          id: 'recommend-score',
          type: 'rating',
          label: 'How likely are you to recommend? (1-10)',
          rateCount: 10,
          displayMode: 'buttons',
          minLabel: 'Not at all likely',
          maxLabel: 'Extremely likely',
          required: true,
        },
        {
          id: 'review-text',
          type: 'textarea',
          label: 'Write your review',
          placeholder: 'What did you like or dislike?',
          validation: [
            { type: 'minLength', value: 10, message: 'Please write at least 10 characters' },
          ],
        },
      ],
    },
  ],
  settings: { submitText: 'Submit Review' },
};

function ProductReview() {
  return (
    <SurveyRenderer
      schema={reviewSchema}
      options={{
        onSubmit: async (answers) => {
          // answers.overall → 4, answers['recommend-score'] → 8
          await fetch('/api/reviews', {
            method: 'POST',
            body: JSON.stringify(answers),
          });
        },
      }}
    />
  );
}