5 Star Rating

Values can be by clicking on the stars component and slide to the desired value. To delete a value, just move the cursor to the left.

Stars

Readonly

Disabled

The maximum value is by default '5'. To enable half stars set max to '10' or '20' for quarter stars.

Half Stars

Quarter Stars

If no value is set, a placeholder value is displayed. The placeholder attribute must contain a number between '0' and '5'. Floating point numbers are allowed even if the user can only set full stars.

The placeholder value is set to '4.7' in following example.

Placeholder

A star component can be marked as required. If you click the submit button without setting a value, the submit fails. Once a value has been set, it cannot be deleted for required star components.

Required Input

Output Submit

The star component can also be used with BoundedRangeModel. The model contains the values for the value and the max attribute.

Input

Output0.5