Rating
The Rating
component is used to display ratings using stars or custom indicators.
Usage
Editable Example
3 stars
Maxium stars
Editable Example
5 stars
Half star
Editable Example
2.9 stars
3.5 stars
4.1 stars
5 stars
Custom icon
Editable Example
1 star
2.5 stars
3.5 stars
2.5 stars
Copywriting
Editable Example
1 starA for Amazing
2.5 starsB for Brilliant
5 starsS for Search.io
Direction
Editable Example
1.5 starsA for Amazing
2.5 starsB for Brilliant
5 starsS for Search.io
Unit
Editable Example
2.5 likess
Accessibility
- Container has
role
img and corresponding label e.g "Rating: 2 out of 5 stars". - Children has
hidden
true aria-setsize
=count
andaria-posinset
=index + 1
Props
Name | Type | Default | Description |
---|---|---|---|
value | number | The value of this rating | |
max | number | 5 | The maximum rating. |
children | React.ReactNode | null | Children for copywriting. |
character | React.ReactNode | React.FC<{index, count}> | <Star/> | The component used to render rating. |
direction | 'ltr' | 'rtl' | 'ltr' | |
unit | string | 'star' | Singular form, used in label to convey more accurately. |