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`	`— / 0 / —`	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.