Scale Number

A numeric rating field. Users pick a single number from a row of options to answer rating questions, such as Net Promoter Score ("How likely are you to recommend us?").

Default

How likely are you to recommend us?

Not likely Very likely
Helper text shown below the scale (also see "Please select a rating" / "Thank you for your rating!")
States

How likely are you to recommend us?

Not likelyVery likely
Helper text
Default Initial state. All numbers in the range are shown with a neutral outline; nothing is selected yet.

How likely are you to recommend us?

Not likelyVery likely
Helper text
Selected The selected number is filled with UOB Blue. Selecting another number replaces the previous choice — only one number can be selected at a time.

How likely are you to recommend us?

Not likelyVery likely
Helper text
Read-only The previously selected number is preserved but greyed out and not editable. Use after submission or in review screens.

How likely are you to recommend us?

Not likelyVery likely
Please select a rating
Error Shown when the user tries to submit without selecting a number. The cells get a red outline and the helper text turns red — e.g. "Please select a rating".

How likely are you to recommend us?

Not likelyVery likely
Thank you for your rating!
Valid Confirms the rating has been accepted. The selected number stays highlighted and the helper text turns green — e.g. "Thank you for your rating!".
Behaviour
Single selection
  • Only one number can be selected at a time.
  • Selecting a new number replaces the previous choice.
Flexible scale
  • The scale supports two ranges: 1–5 for short satisfaction surveys and 1–10 for NPS-style questions.

How likely are you to recommend us?

Not likelyVery likely

How likely are you to recommend us?

Not likelyVery likely
Specs
1
Question
  • States what the user is rating, in a single line.
  • Recommended max length: 70 characters.
2
Scale options
  • Row of selectable numbers — 1–5 or 1–10 depending on the configured range.
  • Users can pick only one number; the selected cell fills with UOB Blue.
3
Anchor labels
  • Sit at each end of the scale to anchor its meaning (e.g. "Not likely" / "Very likely").
  • Help users interpret what a low vs high number represents.
  • Recommended max length: 30 characters per label.
4
Helper text
  • Provides additional context, an error message ("Please select a rating"), or a confirmation message ("Thank you for your rating!").
  • Colour reflects the field state: grey (default), red (error), green (valid).
  • Recommended max length: 100 characters.
1

How likely are you to recommend us?

2
3
Not likelyVery likely
4 Please select a rating
Dos and Don'ts
  1. Pair the scale with a clear question (e.g. "How likely are you to recommend us?") so users know exactly what they're rating.
  2. Anchor both ends of the scale (e.g. "Not likely" / "Very likely") so users can interpret low vs high values at a glance.
  3. Use the 1–10 scale for NPS-style questions and the 1–5 scale for short satisfaction surveys.
  4. Keep anchor labels short (max 30 characters each) so they fit comfortably under the scale on all viewports.
  5. Avoid using Scale Number for non-numeric or qualitative ratings — use radio buttons or a dropdown instead.