Skip to main content

Star Picker

Overview​

A star rating picker that allows you to select a numeric value using a visual star rating interface. This picker provides an intuitive way to rate items on a scale using Material-UI's Rating component.

Configuration​

The Star Picker has a simple configuration. The required props are:

  • type: which needs to be set to number
  • ui:field: which needs to be set to StarPicker
rating:
  title: Rating
  type: number
  description: Rate this item from 1 to 5 stars
  ui:field: StarPicker
  ui:options:
    precision: 1
    maxValue: 5

UI Options​

The following options can be configured under ui:options:

  • precision [number]: Defines the precision of the rating. Can be set to 0.5 for half-star ratings or 1 for whole star ratings. Defaults to 1.
  • maxValue [number]: Defines the maximum value that the rating can reach. The component will scale the 5-star display to represent this maximum value. Defaults to 5.

Example Usage​

Basic Configuration​

parameters:
  - title: Evaluation
    properties:
      importance:
        title: Importance
        type: number
        description: Rate the importance of this item
        ui:field: StarPicker
        ui:options:
          precision: 1
          maxValue: 5

Half-Star Precision​

rating:
  title: User Rating
  type: number
  description: Rate this item with half-star precision
  ui:field: StarPicker
  ui:options:
    precision: 0.5
    maxValue: 10

Custom Scale​

priority:
  title: Priority Level
  type: number
  description: Set priority from 1 to 100
  ui:field: StarPicker
  ui:options:
    precision: 1
    maxValue: 100

Value Handling​

The Star Picker automatically handles value scaling:

  • Display: Always shows 5 stars for visual consistency
  • Internal Value: Stores the actual numeric value based on maxValue
  • Normalization: Automatically converts between the 5-star display and the actual numeric value

For example, if maxValue is set to 10:

  • Selecting 3 stars will store the value 6 (3/5 * 10)
  • A stored value of 8 will display as 4 stars (8/10 * 5)