Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.3

Rating

Rating is a component used to allow users to provide ratings.

Source@yamada-ui/rating

Import

import { Rating } from "@yamada-ui/react"
Copied!

Usage

Editable example

<Rating />
Copied!

Change Size

Editable example

<VStack>
  <Rating size="xs" defaultValue={3} />
  <Rating size="sm" defaultValue={3} />
  <Rating size="md" defaultValue={3} />
  <Rating size="lg" defaultValue={3} />
  <Rating size="xl" defaultValue={3} />
</VStack>
Copied!

Change Color Scheme

Editable example

<VStack>
  <Rating colorScheme="purple" defaultValue={3} />
  <Rating colorScheme="pink" defaultValue={3} />
</VStack>
Copied!

Set Default Value

To set a default value, assign a number to defaultValue.

Editable example

<Rating defaultValue={3} />
Copied!

Change Number of Items

To change the number of items, assign a number to items.

Editable example

<VStack>
  <Rating items={4} />
  <Rating items={5} />
  <Rating items={6} />
</VStack>
Copied!

Allow Decimals

To allow decimals, assign a number to fractions.

For example, to allow 0.25, set 4.

Editable example

<VStack>
  <Rating fractions={2} defaultValue={1.5} />
  <Rating fractions={3} defaultValue={2.33} />
  <Rating fractions={4} defaultValue={3.75} />
</VStack>
Copied!

Change Color

To change the color, assign a string or function to color. color provides the numerical value of the item.

Editable example

const getColor = (value: number) => {
  switch (value) {
    case 1:
      return "red.500"

    case 2:
      return "orange.500"

    case 3:
      return "yellow.500"

    case 4:
      return "green.500"

    case 5:
      return "blue.500"

    default:
      return undefined
  }
}

return (
  <VStack>
    <Rating color="green.500" defaultValue={3} />
    <Rating color={getColor} defaultValue={3} />
  </VStack>
)
Copied!

Customize Icons

To customize icons, assign RectNode or a function to emptyIcon and filledIcon. emptyIcon and filledIcon provide the numerical value of the item.

  • emptyIcon: Used for unselected icons.
  • filledIcon: Used for selected icons.

Editable example

const getColor = (value: number) => {
  switch (value) {
    case 1:
      return "red.500"

    case 2:
      return "orange.500"

    case 3:
      return "yellow.500"

    case 4:
      return "green.500"

    case 5:
      return "blue.500"

    default:
      return undefined
  }
}

const getIcon = (value: number) => {
  switch (value) {
    case 1:
      return <Angry />

    case 2:
      return <Frown />

    case 3:
      return <Smile />

    case 4:
      return <Laugh />

    case 5:
      return <SmilePlus />

    default:
      return null
  }
}

return (
  <VStack>
    <Rating defaultValue={3} emptyIcon={<Ghost />} filledIcon={<Ghost />} />

    <Rating
      gap="xs"
      color={getColor}
      emptyIcon={getIcon}
      filledIcon={getIcon}
    />
  </VStack>
)
Copied!

Disable

To disable, set isDisabled to true.

Editable example

<VStack>
  <Rating isDisabled defaultValue={3} />

  <FormControl isDisabled label="How satisfied are you with Yamada UI?">
    <Rating defaultValue={3} />
  </FormControl>
</VStack>
Copied!

Make Read-Only

To make read-only, set isReadOnly to true.

Editable example

<VStack>
  <Rating isReadOnly defaultValue={3} />

  <FormControl isReadOnly label="How satisfied are you with Yamada UI?">
    <Rating defaultValue={3} />
  </FormControl>
</VStack>
Copied!

Control

Editable example

const [value, onChange] = useState<number>(3)

return <Rating value={value} onChange={onChange} />
Copied!

Use React Hook Form

Editable example

type Data = { rating: boolean }

const {
  control,
  handleSubmit,
  watch,
  formState: { errors },
} = useForm<Data>()

const onSubmit: SubmitHandler<Data> = (data) => console.log("submit:", data)

console.log("watch:", watch())

return (
  <VStack as="form" onSubmit={handleSubmit(onSubmit)}>
    <FormControl
      isInvalid={!!errors.rating}
      label="How satisfied are you with Yamada UI?"
      errorMessage={errors.rating ? errors.rating.message : undefined}
    >
      <Controller
        name="rating"
        control={control}
        render={({ field }) => <Rating {...field} />}
      />
    </FormControl>

    <Button type="submit" alignSelf="flex-end">
      Submit
    </Button>
  </VStack>
)
Copied!

Edit this page on GitHub

PreviousEditableNextSegmentedControl