Description & Source Code

The Rating component is an input control for assigning a value according to the given scale. It allows you to customize the style and amount of symbols, and supports Disabled and Readonly states.

		.z-rating > * {
			min-width: 24px;
		.red-heart .z-rating-selected,
		.red-heart .z-rating-hover {
			color: #d0021b;
		.feedback .z-label {
			font-size: 14px;
	<vlayout sclass="feedback">
		<label style="font-size: 18px;font-weight: bold;" value="Feedback"/>
		<label style="font-weight: bold;" value="Personal skills and competences"/>
		<hlayout valign="middle" spacing="15px">
			<div width="300px">Leadership skills</div>
			<rating rating="3" iconSclass="z-icon-star"/>
		<hlayout valign="middle" spacing="15px">
			<div width="300px">English language knowledge</div>
			<rating rating="2" iconSclass="z-icon-star" readonly="true"/>
		<hlayout valign="middle" spacing="15px">
			<div width="300px">Ability to learn</div>
			<rating rating="5" iconSclass="z-icon-star" disabled="true"/>
		<hlayout valign="middle" spacing="15px">
			<div width="300px">Communication skills</div>
			<rating rating="3" iconSclass="z-icon-heart" sclass="red-heart"/>
			(custom icon)