Rating

<bh-rating> | BharatRating

The Rating component displays interactive or read-only star-based rating controls with support for half-stars, customizable icons, styles, and colors.

Open in

Basic Usage

Preview

Open in

HTML

<bh-rating></bh-rating>

React

import { BharatRating } from 'bharat-ui';

function MyComponent() {
  return <BharatRating></BharatRating>;
}

Custom Value and Max Value

Preview

Open in

HTML

<bh-rating value="3.5" maxValue="4" showValue></bh-rating>

React

import { BharatRating } from 'bharat-ui/react/components/rating';

function ValueExample() {
  return <BharatRating value="3.5" maxValue="4" showValue></BharatRating>;
}

Sizes

Preview

Open in

 

HTML

<bh-rating size="small" value="3"></bh-rating>
<bh-rating size="medium" value="3"></bh-rating>
<bh-rating size="large" value="3"></bh-rating>

React

import { BharatRating } from 'bharat-ui';

function SizeExample() {
  return (
    <BharatRating>
      <BharatRating size="small" value={3} />
      <BharatRating size="medium" value={3} />
      <BharatRating size="large" value={3} />
    </BharatRating>
  );
}

Customisation

Preview

Open in

HTML

<bh-rating value="3" icon="❤" emptyIcon="♡"></bh-rating>
<bh-rating value="4" color="#ce6b6b"></bh-rating>

React

import { BharatRating } from 'bharat-ui';

function ValueExample() {
  return (
    <BharatRating value="3" icon="❤" emptyIcon="♡"></BharatRating>
    <BharatRating value="4" color="#ce6b6b"></BharatRating>
  );
}

Precision

Preview

Open in

HTML

<bh-rating value="3.5" precision="0.5"></bh-rating>

React

import { BharatRating } from 'bharat-ui/react/components/rating';

function ValueExample() {
  return (
    <BharatRating value="3.5" precision="0.5"></BharatRating>
  );
}

Read-Only Rating

Preview

Open in

HTML

<bh-rating readonly value="4.5" showValue label="BharatUI"></bh-rating>

React

import { BharatRating } from 'bharat-ui/react/components/rating';

function ReadOnlyRating() {
  return <BharatRating readonly value="4.5" showValue label="BharatUI"></BharatRating>;
}

---

Properties

Property	Type	Description
value	number	Current rating value
maxValue	number	Maximum possible rating value
size	string	One of "small", "medium", "large"
color	string	Custom star fill color
readonly	boolean	Prevents changes if true
precision	number	Rating step granularity (e.g., 1 or 0.5)
label	string	Optional label text before stars