Rating indicators

ComponentsControls

Rating indicators

A rating indicator uses a series of horizontally arranged graphical symbols — by default, stars — to communicate a ranking level.

A stylized representation of a rating indicator denoting a ranking of three out of five stars. The image is tinted red to subtly reflect the red in the original six-color Apple logo.

A rating indicator doesn’t display partial symbols; it rounds the value to display complete symbols only. Within a rating indicator, symbols are always the same distance apart and don’t expand or shrink to fit the component’s width.

Best practices

Make it easy to change rankings. When presenting a list of ranked items, let people adjust the rank of individual items inline without navigating to a separate editing screen.

If you replace the star with a custom symbol, make sure that its purpose is clear. The star is a very recognizable ranking symbol, and people may not associate other symbols with a rating scale.

Platform considerations

No additional considerations for macOS. Not supported in iOS, iPadOS, tvOS, visionOS, or watchOS.

Resources

Ratings and reviews

Developer documentation

NSLevelIndicator.Style.rating — AppKit

Change log

Date| Changes
---|---
September 23, 2022| New page.

Get HIG guidance in your AI

Install Apple HIG Skills and get expert design guidance directly in Claude Code.

npx skills add raintree-technology/apple-hig-skills

Get notified when we update for new Apple releases.