eds-rating
Explore the Interactive Component
Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.
See It in Use with Code
Check out this practical implementation of component.
Plain HTML
In React
In Vue
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
ratingCount | rating-count | Number of stars in the rating system. | number | 5 |
ratingType | rating-type | The type of icon to display. Can be “stars” or “thumbs”. | "copy" | "arrow-right" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "arrow-left" | "arrow-up-right" | "close" | "add" | "edit" | "checkmark" | "download" | "upload" | "view" | "exit" | "caretSort" | "bookmark" | "createLink" | "activity" | "account" | "analytics" | "template" | "documentExport" | "documentDownload" | "trashCan" | "chooseItem" | "copyLink" | "dragHorizontal" | "dragVertical" | "login" | "logout" | "move" | "replicate" | "sortAscending" | "sortDescending" | "requestQuote" | "reset" | "resultDraft" | "share" | "play" | "book" | "chatOff" | "forum" | "shareKnowledge" | "time" | "help" | "customerService" | "code" | "rocket" | "compass" | "menu" | "search" | "settings" | "notification" | "user" | "group" | "save" | "document" | "folder" | "image" | "calendar" | "information" | "warning" | "error" | "checkmark-filled" | "star" | "thumbs-up" | "thumbs-down" | "twitter" | "linkedin" | "facebook" | "youtube" | "mastodon" | "bluesky" | 'star' |
selectedRating | selected-rating | Current selected rating value (controlled from parent). | number | 0 |
Events
| Event | Description | Type |
|---|---|---|
rating | Event emitted when the rating is changed. | CustomEvent<number> |
Dependencies
Used by
Depends on
Graph
graph TD; eds-rating --> eds-button eds-button --> eds-icon-wrapper eds-feedback --> eds-rating eds-form --> eds-rating style eds-rating fill:#f9f,stroke:#333,stroke-width:4px
Built with StencilJS