Components

Rating

A component for displaying and selecting star ratings.

Source code

Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

Usage

Basic

Decimal

Show Rating

3.5

Editable

Editable ratings are built on Reka UI's Rating primitive, so they are keyboard accessible (Tab to focus, arrow keys to move between stars, Space to select) and work inside forms via name and required. The step prop controls the granularity (1 by default, 0.5 for half stars). Read-only ratings (the default) can display any decimal value, such as 4.3.

2.5

Clearable

Set clearable to let users reset the rating to 0 by clicking the current value again.

3.0

Size

Icons

Statistics

Customer Reviews Summary

Based on 1,247 reviews
5
745(59.7%)
4
312(25%)
3
124(9.9%)
2
41(3.3%)
1
25(2%)

Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Scroll Area

Augments native scroll functionality for custom, cross-browser styling.