# Rate Picker

**Path:** Components/Form Inputs

[Back to Documentation Index](https://rubicblazor.skyconis.com/docs.md)

---

Rate Picker

 RbRatePicker selects a star rating using a native range input and CSS stars.

 Basic Usage

 Value is the score out of Max. IconCount controls the number of stars independently. HalfRating="true" enables half-icon selections.
 Use a decimal value when the score per selection is fractional.

 Show code

 Whole Stars

 Rating: 3 / 5

 Half Stars

 Rating: 2.5 / 5

 Ten Stars

 Rating: 7 / 10

 Colors & Sizes

 Use the existing theme colors and override --rb-ratepicker-size through Style.

 Show code

 Small / Primary

 Default / Warning

 Large / Success

 Score Scales

 Map a score out of 100 to five or ten icons. SelectedRating exposes the icon amount calculated from Value.
 Set Value to restore the score and its corresponding icon amount.

 Show code

 100 Points / 5 Whole Stars

 Score: 60 / 100; Stars: 3

 100 Points / 5 Half Stars

 Score: 70 / 100; Stars: 3.5

 100 Points / 10 Whole Stars

 Score: 70 / 100; Stars: 7

 100 Points / 10 Half Stars

 Score: 65 / 100; Stars: 6.5

 Load 65 Points 

 Readonly & Disabled

 Readonly and disabled ratings display their value without allowing changes.

 Show code

 Readonly

 Disabled

 Satisfaction Icons

 Provide five Font Awesome expressions through ChildContent, from very dissatisfied to very satisfied.

 Show code

 How satisfied are you?

 Neutral (3 / 5)

 Hearts & Custom Color

 Use heart icons and override --rb-ratepicker-color through Style for a custom pink color.

 Show code

 Heart Rating

 Rating: 3.5 / 5

 Keyboard & RTL

 Focus with Tab. Right/Up increases and Left/Down decreases by one icon, or half an icon when HalfRating is enabled.
 The score step is Max / IconCount, halved for half-icon selections. Home, Delete and Backspace clear the rating; End selects Max.
 The rating scale runs from left to right, including inside RTL layouts.

 Show code

 Keyboard

 Rating: 2.5 / 5

 التقييم

 3 / 5

 ✕

 Contents