SOROUSH.DESIGN
Design SystemMarkdownStyled System

Rating

A row of icons the user sets as a rating - or, read-only, a display of one.

Source

A row of icons the user sets as a rating - or, read-only, a display of one. A group of visually hidden native radio inputs, so the keys (Tab to the rating, the arrows to change it), assistive technology and forms work as the platform's. Hovering previews the value under the pointer, and pressing the chosen item clears it.

Every label is yours - an item's name (getLabelText) and the "no rating" radio (emptyLabelText) - so the rating carries no language of its own.

import { Rating } from '@soroush.tech/design-system/Rating'

;<Rating
  aria-label="Quality"
  value={rating}
  onChange={(event, value) => setRating(value)}
  getLabelText={(value) => `${value} of 5`}
/>

Examples

Default

const args: Partial<RatingProps> = { defaultValue: 3, emptyLabelText: 'No rating', 'aria-label': 'Rating' }

<Rating key={String(args.defaultValue)} {...args} />

Halves

const args: Partial<RatingProps> = {
  defaultValue: 2.5,
  precision: 0.5,
  emptyLabelText: 'No rating',
  'aria-label': 'Rating',
}

<Rating key={String(args.defaultValue)} {...args} />

Controlled Value

Rating: 2
const args: Partial<RatingProps> = { 'aria-label': 'Rating', defaultValue: 3, emptyLabelText: 'No rating' }

<Controlled {...args} />

Hover Feedback

Poor+
const args: Partial<RatingProps> = { 'aria-label': 'Rating', defaultValue: 3, emptyLabelText: 'No rating' }

<WithHoverLabel {...args} />

Read Only

<Rating
  defaultValue={3.5}
  precision={0.5}
  emptyLabelText="No rating"
  readOnly
  aria-label="Average, 3.5 of 5"
/>

Disabled

<Rating
  defaultValue={2}
  emptyLabelText="No rating"
  disabled
  aria-label="Rating"
/>

Highlight Selected Only

<Rating
  defaultValue={3}
  highlightSelectedOnly
  emptyLabelText="No rating"
  aria-label="Rating"
/>

Custom Icons

<Rating
  defaultValue={3}
  emptyLabelText="No rating"
  color="error"
  aria-label="Rating"
/>

Sizes

const args: Partial<RatingProps> = { 'aria-label': 'Rating', defaultValue: 3, emptyLabelText: 'No rating' }

<Flex gap={1}>
  {(['sm', 'md', 'lg'] as const).map((size) => (
    <Rating key={size} {...args} size={size} aria-label={`Rating, ${size}`} />
  ))}
</Flex>

Colors

const args: Partial<RatingProps> = { 'aria-label': 'Rating', defaultValue: 3, emptyLabelText: 'No rating' }

<Flex gap={1}>
  {(['warning', 'primary', 'success', 'error'] as const).map((color) => (
    <Rating key={color} {...args} color={color} aria-label={`Rating, ${color}`} />
  ))}
</Flex>

In Form Control

How was it?

const { error, disabled, required, size, color }: Partial<RatingProps> = { 'aria-label': 'Rating', defaultValue: 3, emptyLabelText: 'No rating' }

<FormControl error={error} disabled={disabled} required={required} size={size} color={color}>
  <FormLabel>Quality</FormLabel>
  <Rating emptyLabelText="No rating" />
  <FormHelperText>{error ? 'Choose a rating.' : 'How was it?'}</FormHelperText>
</FormControl>

Required And In Error

<FormControl error required>
  <FormLabel>Quality</FormLabel>
  <Rating />
  <FormHelperText>Choose a rating.</FormHelperText>
</FormControl>

Right To Left

const args: Partial<RatingProps> = { defaultValue: 2, emptyLabelText: 'No rating', 'aria-label': 'Rating' }

<View dir="rtl">
  <Rating {...args} />
</View>

Customized

<ThemeProvider theme={customized}>
  <Rating aria-label="Rating" defaultValue={4} />
</ThemeProvider>