A component used to provide a numerical rating by selecting a number of stars

A rating component allows users to provide a numerical rating by selecting a specific number of stars, providing options for controlling its behavior and appearance.

rating component of Peaka

Key Features

Rating components offer the following key features:

  • Value: Ratings have a value property, which represents the numerical rating. The value must be a number and equal to or less than the total number of stars.

  • Label: The label is the text displayed above the rating component, providing context for the user.

  • Stars: The "Stars" input is a numerical value that determines how many stars are displayed in the rating input, allowing you to customize the scale of the rating.

  • Show Cancel: The "Show Cancel" switch enables the display of a button that allows users to reset the rating value to its initial state.

  • Disabled: When switched on, the "Disabled" property makes the rating component unchangeable, preventing user interaction.

How to Use Ratings

To use rating components in your application, follow these steps:

  1. Value: Utilize the "Value" property to set or retrieve the numerical rating entered by the user.

  2. Label: Add a descriptive label above the rating component to provide context for the user, such as "Rate this product."

  3. Stars: Configure the "Stars" input to determine the number of stars to be displayed for user selection.

  4. Show Cancel: Optionally, enable the "Show Cancel" switch to provide users with the option to reset the rating.

  5. Disabled State: Use the "Disabled" property to make the rating component unchangeable when necessary.

Use Cases

Rating components are commonly used in various scenarios, including:

  • Product reviews: Use the rating component to allow users to rate and review products or services.

  • User feedback: Leverage ratings to gather user feedback on articles, content, or user experiences.

  • Restaurant reviews: Allow users to rate and review restaurants, with the rating component indicating the dining experience.

  • Feedback forms: Include rating components in feedback forms to gather numerical feedback on various aspects.

Rating components enhance user interactions by providing an intuitive way for users to provide numerical ratings, improving the usability of your application.