Rating macrolite

A row of stars scoring out of max; readOnly only displays.

Built from: Box Icon
Children: none

Preview

Loading the renderer…

value

max

readOnly

size

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "stretch",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "Rating",
          "value": 3,
          "max": 5
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

Rating rendered by the React renderer on Web — **Web** React

Rating rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

Rating rendered by the Compose renderer on Android — **Android** Compose

Rating rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-rating, painted by each native renderer.

Variants

readOnly

size · sm

size · default

size · lg

Props

Prop	Type	Default	Description
`value`bind	`number`	`0`	The score, 0 to max.
`max`	`number`	`5`	How many stars.
`readOnly`	`boolean`	`false`	Display only; no presses.
`size`	`sm \| default \| lg`	`"default"`	Star size.

Events and slots

Name	Kind
`on.change`	event: runs an action

Accessibility

Role: group
Semantics: A group of star buttons: each labelled ratingStar ("3 of 5"), the chosen one aria-pressed; read-only stars leave the tree and the group is an img labelled ratingValue ($a11y).

Keys	Action
`Tab through the stars; EnterSpace`	rate

Theming

Recipe parts: Rating/rootRating/starRating/icon
Keyed by: sizereadOnlyfilled:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme