All components
Rating Group
Star rating input with keyboard-accessible items across four sizes.
Sizes
xs
sm
md
lg
Install
zsh — rating-group
1bunx stylexblocks add rating-groupUsage — Base UI
rating-group.tsx
12345678910111213import { RatingGroup } from "#components/ui/base-ui/rating-group.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { // Base UI ships no rating machine — the component composes the recipe with // Base UI's useRender/mergeProps utilities around an accessible radio group return ( <RatingGroup count={5} defaultValue={3} size="md" palette={indigoPalette} aria-label="Rating" /> );}
// controlled: <RatingGroup value={value} onValueChange={setValue} />// composition: <RatingGroup render={<section />} />