Emoji Rating Scale React component
A five-face satisfaction rating for quick feedback: hand-drawn faces from a frown to a wide smile that wobble on hover, fill with their own colour and pop when picked, a label that rolls in underneath, and full keyboard support as a radio group.
About the Emoji Rating Scale component
Emoji Rating Scale is a five-face satisfaction rating, from a frown to a wide smile. Hovering a face makes it wobble and shows its label, and picking one fills it with that level's color and gives it a small pop. The faces are drawn as SVG, so they look the same on every device and take any color.
value or defaultValue sets the rating from 1 to 5, or null for none, and onValueChange reports it. options replaces the five labels and colors (Terrible, Bad, Okay, Good, Great by default), worst first. size picks sm, md or lg, showLabel shows the picked label under the faces, and allowClear lets a second click on the picked face clear the rating. It is a radio group, so arrow keys, Home and End move between faces, and the hover and pop animations are skipped under reduced motion.
When to use it
Use Emoji Rating Scale for fast, low-effort feedback: after checkout, support chats, onboarding steps, or an in-app 'How are we doing?' prompt.
For precise product reviews use Rating Stars; for yes/no feedback a thumbs pair is simpler.
Installation
Add the Emoji Rating Scale component to your project with the shadcn CLI. It lands in components/emoji-rating-scale.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/emoji-rating-scaleOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<EmojiRatingScale /> accepts 11 props, all optional.
| Prop | Type | Default |
|---|---|---|
| value | number | null | — |
| defaultValue | number | null | null |
| onValueChange 1 to 5; null when cleared. | (value: number | null) => void | — |
| options Override the five labels and colours, worst first. | { label: string; color: string }[] | DEFAULT_OPTIONS |
| size | "sm" | "md" | "lg" | "md" |
| showLabel Show the picked label under the faces. | boolean | true |
| allowClear Clicking the picked face again clears the rating. | boolean | true |
| label | string | "Rate your experience" |
| disabled | boolean | false |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- valuenumber | null
- defaultValuenumber | nullDefault: null
- onValueChange
1 to 5; null when cleared.
(value: number | null) => void - options
Override the five labels and colours, worst first.
{ label: string; color: string }[]Default: DEFAULT_OPTIONS - size"sm" | "md" | "lg"Default: "md"
- showLabel
Show the picked label under the faces.
booleanDefault: true - allowClear
Clicking the picked face again clears the rating.
booleanDefault: true - labelstringDefault: "Rate your experience"
- disabledbooleanDefault: false
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Emoji Rating Scale FAQ
- Is it keyboard accessible?
- It's a radio group: Tab reaches the picked face (or the first), arrow keys and Home / End move and pick, and screen readers hear each face's label.
- Why SVG faces instead of emoji?
- Emoji look different on every platform and can't change colour. The drawn faces match your UI, fill with the level's colour when picked and stay crisp at any size.
- Can people take a rating back?
- With allowClear (on by default) clicking the picked face again clears it and calls onValueChange(null).
- Can I use more or fewer than five faces?
- No. The faces are drawn for exactly five levels, so options should always have five entries. Change their labels and colors, not their number.
