Introduction

An input to provide rating values. Recommended for use when values are less than 10. For larger values, use the range slider component.

Notable features:

• Accessible with proper ARIA attributes and keyboard navigation
• Customizable icons (stars, hearts, thumbs up, etc.)
• Mouse and keyboard interaction support
• Support for number key selection and arrow key navigation
• Form integration with name and id attributes
• Flexible maximum rating values

Basic Example

Here's a simple example of a Rating component. Click on the stars or use number keys to set a rating:

Properties

The Rating component provides several properties to customize its behavior and appearance.

Here's the basic usage with properties:

Custom Icons

By default, the Rating component uses star icons. However, you can easily customize the icons to use hearts, thumbs up, or any other icon of your choice.

Configure custom icons using the stateIcons property:

Accessibility

The Rating component is built with accessibility in mind and includes comprehensive keyboard and screen reader support.

Keyboard Navigation:

• Arrow Keys: Navigate between rating values
• Number Keys (1-9): Directly select a rating value
• Space/Enter: Confirm selection

Screen Reader Support:

• Each icon has proper ARIA roles and labels
• Current rating state is announced to assistive technologies
• Checked/unchecked states are properly conveyed