eds-feedback

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

PropertyAttributeDescriptionTypeDefault
countcountNumber of stars in the rating system.number5
descriptiondescriptionNumber of stars in the rating system.string'This is a description!'
headingLevelheading-levelThe HTML heading level to use for the label. Valid values: ‘h1’ - ‘h5’."h1" | "h2" | "h3" | "h4" | "h5"'h1'
labellabelNumber of stars in the rating system.string'Rate your Experience!'
textMappingtext-mappingMapping of text to star ratings.string | string[]['Very Poor', 'Poor', 'Average', 'Good', 'Excellent']
typetypeThe type of icon to display. Can be “stars” or “thumbs”."star" | "thumbs-down" | "thumbs-up"'star'

Events

EventDescriptionType
ratingEvent emitted when the rating is changed.CustomEvent<number>

Dependencies

Depends on

Graph

graph TD;
  eds-feedback --> eds-rating
  eds-rating --> eds-button
  eds-button --> eds-icon-wrapper
  style eds-feedback fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS