Client component

Rating

Star rating. Interactive mode is a radiogroup of native radios (visually hidden), so arrow keys, form participation and announcements come from the platform. Selection is whole stars. Display mode (readOnly) renders fractional values like 4.5 as half-filled stars.

import { Rating } from "astralis-ui";

export function RatingDemo() {
  return <Rating defaultValue={3} label="Rate this product" />;
}

Import#

import { Rating } from "astralis-ui";

Read-only display#

readOnly swaps the radios for a static img-role display. This is where fractional averages belong:

4.5 · 1,238 reviews

import { Rating, HStack, Text } from "astralis-ui";

export function RatingReadOnly() {
  return (
    <HStack gap="3">
      <Rating value={4.5} readOnly />
      <Text size="sm" color="muted">
        4.5 · 1,238 reviews
      </Text>
    </HStack>
  );
}

Sizes#

import { Rating, VStack } from "astralis-ui";

export function RatingSizes() {
  return (
    <VStack gap="3" alignItems="start">
      <Rating size="sm" defaultValue={3} label="Small rating" />
      <Rating size="md" defaultValue={3} label="Medium rating" />
      <Rating size="lg" defaultValue={3} label="Large rating" />
    </VStack>
  );
}

Props#

Prop	Type	Default	Description
`value / defaultValue / onChange`	`number / number / (value: number) => void`	`None / 0 / None`	Controlled / uncontrolled value. Fractions such as 4.5 render only in readOnly mode.
`max`	`number`	`5`	Number of stars.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Star size.
`colorScheme`	`all 15 schemes`	`"yellow"`	Hue of the filled stars.
`readOnly`	`boolean`	`false`	Static display with an img role, including half stars.
`disabled`	`boolean`	`false`	Blocks interaction.
`label`	`string`	`"Rating"`	Accessible name of the radio group. Without one, a surrounding Field's label names it.
`name`	`string`	`generated`	Name of the star radios, so the rating submits with a native form.

Keyboard#

The stars are native radios, so the keys are the browser's own:

Key	Action
`Tab`	Into the rating: one tab stop, on the selected star
`←` `↑` / `→` `↓`	Select one star fewer / more
`Space`	Select the focused star, when none is selected yet

A readOnly rating is an image, not a control, so it takes no focus.