CoreUI PRO hexagon
Our Admin Panel isn’t just a mix of third-party components. It’s the only Bootstrap dashboard built on a professional, enterprise-grade UI Components Library . This component is part of this library, and we present only the basic usage of it here. To explore extended examples, detailed API documentation, and customization options, refer to our docs.
Explore Documentation
or
Get CoreUI PRO →
Rating

Embed the Rating component in your HTML by using a div with data-coreui-toggle="rating" . Set the initial value with data-coreui-value .

Rating Readonly

Set the Rating component to read-only by adding data-coreui-read-only="true" . This disables interaction, preventing users from changing the displayed rating value.

Rating Disabled

Add the data-coreui-disabled="true" boolean attribute to give it a grayed out appearance, remove pointer events, and prevent focusing.

Rating Precision

Adjust the granularity of the Rating component by setting data-coreui-precision . This attribute allows for fractional ratings, such as quarter values, to provide more precise feedback.

Rating Number of items

Control the total number of rating items displayed by using data-coreui-item-count . You can create a Rating component with a custom scale, be it larger for detailed assessments or smaller for simplicity.

Rating Tooltips

Enable descriptive text on hover by setting data-coreui-tooltips to true . This provides immediate feedback or guidance as the user interacts with the rating items.

For custom messages, provide a comma-separated list of tooltips corresponding to each rating value to enhance the user’s understanding of each rating level.

Rating Sizes

Larger or smaller rating component? Add data-coreui-size="lg" or data-coreui-size="sm" for additional sizes.