Forms

Forms are critical in our design system to allow users to input data, from calculators to our contact forms. Each from element in our component library is individually documented, however, this page provides the overarching guidelines when working with forms.

Star Rating

The star rating is a component that allows users to provide feedback of a subject or experience by rating it between zero and five stars.

Key Points

Stars are always displayed inline with a label underneath

There should always be five stars shown

Stars can be rated between empty, half or full values

Like other form items they should be introduced with a label above

Usages

Star Ratings should be used inside of forms where you wish to capture a users feedback on a topic.

They should always be used with a clear label that proposes a question e.g. How would you rate this <custom value>?

Star Rating: Example

Behaviour

Users can use either their keyboard or cusor to change their selections. Hovering the cursor selects the rating in half step increments. Clicking the correct icon and increment will confirm the selection.

On the keyboard, with the focus set on the field a user can use their left and right arrow keys to make a selection. Enter or tab out confirms the selection.