Rating

import { Rating } from '@enmovil/ui-design-system';

A star rating input. It can allow half stars and clearing the rating, and reports changes through onChange.

Properties

Property	Type	Required	Default	Allowed values	Description
className	string	No	—	—	Extra CSS class added to the rating.
value	number	No	—	—	The selected rating, for a controlled rating. Update it from onChange.
defaultValue	number	No	—	—	Rating selected when the component first renders, for an uncontrolled rating. Defaults to 0.
allowClear	boolean	No	—	—	Clicking the selected star again clears the rating to 0. On by default.
allowHalf	boolean	No	—	—	Allows half-star ratings, such as 2.5. Off by default.

Other attributes

Rating passes 15 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.

Events

Name	Signature	When it fires
onChange	((value: number) => void)	Fires when a rating is picked or cleared.
onHoverChange	((value: number) => void)	Fires as the pointer moves across the stars, with the value under the pointer. Useful for a live label such as "Good" or "Excellent".
onFocus	(() => void)	Fires when the rating receives focus.
onBlur	(() => void)	Fires when the rating loses focus.
onKeyDown	KeyboardEventHandler<HTMLUListElement>	Fires on key presses while focused. Arrow keys change the value.

Children

Rating does not accept children.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the basic example.

Loading playground…

Storybook

Open Rating in Storybook to try every story with the full set of controls.