Rating

import { RatingDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Rating);

Usage

Controlled

import { useState } from 'react';
import { Rating } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState(0);
  return <Rating value={value} onChange={setValue} />;
}

Uncontrolled

Rating can be used with uncontrolled forms the same way as a native input element. Set the name attribute to include rating value in FormData object on form submission. To control the initial value in uncontrolled forms, use the defaultValue prop.

Example usage of uncontrolled Rating with FormData:

import { Rating } from '@mantine/core';

function Demo() {
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        const formData = new FormData(event.currentTarget);
        console.log('Rating value:', formData.get('rating'));
      }}
    >
      <Rating name="rating" defaultValue={0} />
      <button type="submit">Submit</button>
    </form>
  );
}

Read only

Allow clear

Set allowClear prop to allow users to reset the rating to 0 by clicking the same rating value again. This is useful when you want to give users the ability to undo their rating selection:

Fractions

Custom symbol

Symbols for each item