Visuals

UI Kit

To keep in mind

We typically use a 5-point Likert scale for employees to answer survey questions:

• Strongly disagree
• Disagree
• Neither agree or disagree
• Agree
• Strongly agree

Our people scientists can provide case-by-case guidance for when and if a scale with more than 5 options may be appropriate.

Focus indicator

• See Interaction states guidelines for focus indicators.
• On keyboard navigation show focus indicator on each section of likert scale.

Anatomy

• Likert scale group label: a visible statement or question that the user must respond to.
• Rating option: the general term for each specific option.
  • Rating label: the label showing the selected rating.
  • Rating radio button: the input element for the rating option.

Rating scale types

There are a variety of rating scale types using the Likert Scale radio buttons component, which change the available rating option labels:

• Agreement scale
• Quality scale
• Focus scale
• Rating scale
• Satisfaction scale
• Importance scale
• Performance scale
• Frequency scale

Interaction

There are several states for the overall Likert scale radio group:

• Standard interaction states with radio buttons:
  • Default
  • Hover
  • Focus
  • Active (clicked)
• Overall Likert scale interaction states:
  • Not rated
  • Rated

Generally we avoid pre-selecting a value to avoid leading the user.

A rating cannot be cleared once selected. We don't use "half" rating options.

We may present non-interactive versions of the Likert scale in different contexts, such as the survey designer to show how it will look to users but without allowing the HR lead designing the survey to select and submit a response.

Related components

We often use a single stacked bar to represent the favorability of collective results from the Likert scale data.

A Likert scale response may be accompanied by a free text comment.

When to use and when not to use

*  Use a Likert scale when gathering user input with 5 options.

*  Avoid using a Likert scale when gathering imprecise user input. Consider using a [slider](/components/slider) instead.

See also

• Likert Scale
• Radio Group
• Slider

External links

Here are some examples from external links:

• Wikipedia: Likert Scale
• Spectrum: Rating
• Ant Design: Rate
• Seek: Rating