All componentsxssmmdlg
Rating Group
Star rating input with keyboard-accessible items across four sizes.
Sizes
Install
zsh — rating-group
1bunx stylexblocks add rating-groupUsage — Ark UI
rating-group.tsx
123456789101112131415161718import { RatingGroup } from "#components/ui/ark-ui/rating-group.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // each Item styles its star from the machine's highlighted state <RatingGroup.Root count={5} defaultValue={3} size="md" palette={indigoPalette} aria-label="Rating"> <RatingGroup.Control> {[1, 2, 3, 4, 5].map((index) => ( <RatingGroup.Item key={index} index={index} /> ))} <RatingGroup.HiddenInput /> </RatingGroup.Control> </RatingGroup.Root> );}
// controlled: <RatingGroup.Root value={value} onValueChange={(d) => setValue(d.value)}>