Rating Component

The Rating component provides an interactive star-based rating system with keyboard navigation, accessibility features, and form integration capabilities.

Key Features

• Interactive Stars: Clickable star icons with hover effects

• Keyboard Navigation: Full keyboard support with arrow keys

• Form Integration: Works seamlessly with form submissions

• Accessibility: ARIA support and screen reader compatibility

Basic Usage

Create a simple rating component:

1
<Rating />

Variants

Sizes

1
<Rating buttonProps={{ size: 'sm' }} />

With Label

1
<Rating label="Rate your experience" />

Required Rating

1
<Rating
2
    label="Product Rating"
3
    required
4
    name="product-rating"
5
/>

Initial Rating Value

1
<Rating
2
    label="Pre-filled Rating"
3
    rating={3}
4
/>

Props API

Rating Functions API

The rating component provides a set of functions to interact with the rating:

Custom Event Listeners

Waiting for events to be emitted… (Click on the rating to see the events)

1
CustomEvent<{
2
  id?: string;
3
  name?: string;
4
  rating: number;
5
}>;

Form Integration

The Rating component works seamlessly with forms as it has a hidden input that is used to store the rating value:

1
<form>
2
    <Rating
3
        name="user-rating"
4
        required
5
        label="How would you rate this?"
6
    />
7
    <button type="submit">Submit Rating</button>
8
</form>

Keyboard Navigation

The Rating component supports full keyboard interaction: