Rating

A flexible star rating component with multiple shapes, fractional precision, tooltips, and full keyboard support.

Basic Usage

Default Rating

Click a star to set the value. Click the same star again to clear.

Controlled (value: 3)

Uncontrolled with value display

4 / 5

Half-star precision

3.5 / 5

Read-only

4 / 5

Disabled

import { Rating } from 'fluxo-ui';

const [value, setValue] = useState(3);

<Rating value={value} onChange={setValue} />

<Rating defaultValue={4} showValue />

<Rating defaultValue={3.5} precision={0.5} showValue />

Shapes

Choose from five built-in shapes using the shape prop.

Shapes

Five built-in shapes: star, heart, thumb, circle, and square.

Stars

Hearts

Thumbs

Circles

Squares

<Rating shape="star" defaultValue={3} />
<Rating shape="heart" variant="danger" defaultValue={3} />
<Rating shape="thumb" variant="primary" defaultValue={3} />
<Rating shape="circle" variant="info" defaultValue={3} />
<Rating shape="square" variant="success" defaultValue={3} />

Sizes

Five sizes from xs to xl with proportional icon scaling.

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

Variants

Color Variants

Six semantic color variants using theme CSS variables.

default

primary

success

warning

danger

info

<Rating variant="warning" defaultValue={4} />
<Rating variant="primary" defaultValue={4} />
<Rating variant="success" defaultValue={4} />
<Rating variant="danger" defaultValue={4} />
<Rating variant="info" defaultValue={4} />

Precision

Click anywhere on a star to set fractional values. Supports 1, 0.5, or 0.1 precision.

Whole (precision=1)

3 / 5

Half (3.5)

3.5 / 5

Decimal (3.7)

3.7 / 5

<Rating precision={1} defaultValue={3} showValue />

<Rating precision={0.5} defaultValue={3.5} showValue />

<Rating precision={0.1} defaultValue={3.7} showValue />

Tooltips & Labels

Show a dynamic label based on the current hover or selection, plus per-star tooltips.

With tooltips (hover a star)

With dynamic label

Good

Custom count (10 stars)

7 / 10

<Rating
  tooltips={['Terrible', 'Bad', 'Okay', 'Good', 'Excellent']}
  labels={['Terrible', 'Bad', 'Okay', 'Good', 'Excellent']}
  defaultValue={4}
/>

Import

import { Rating } from 'fluxo-ui';
import type { RatingProps, RatingShape, RatingSize, RatingVariant, RatingPrecision } from 'fluxo-ui';

Props

PropertyTypeDefaultDescription

value

number

—

Controlled value of the rating.

value

number

Controlled value of the rating.

defaultValue

number

"0"

Initial value for uncontrolled usage.

defaultValue

number"0"

Initial value for uncontrolled usage.

count

number

"5"

Total number of rating items.

count

number"5"

Total number of rating items.

size

'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'

"'md'"

Icon size. Use 'xxl' (~48px) on touch surfaces to clear the 44x44 touch-target requirement.

size

'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"'md'"

Icon size. Use 'xxl' (~48px) on touch surfaces to clear the 44x44 touch-target requirement.

variant

"'warning'"

Color variant.

variant

Color variant.

shape

'star' | 'heart' | 'circle' | 'square' | 'thumb'

"'star'"

Built-in icon shape.

shape

'star' | 'heart' | 'circle' | 'square' | 'thumb'"'star'"

Built-in icon shape.

precision

1 | 0.5 | 0.1

"1"

Increment precision. Use 0.5 for half-star and 0.1 for decimal ratings.

precision

1 | 0.5 | 0.1"1"

Increment precision. Use 0.5 for half-star and 0.1 for decimal ratings.

readOnly

boolean

"false"

Display-only mode.

readOnly

boolean"false"

Display-only mode.

disabled

boolean

"false"

Disable interaction.

disabled

boolean"false"

Disable interaction.

allowClear

boolean

"true"

Clicking the current value clears it (precision=1 only).

allowClear

boolean"true"

Clicking the current value clears it (precision=1 only).

showValue

boolean

"false"

Display the current value next to the rating.

showValue

boolean"false"

Display the current value next to the rating.

valueFormat

(value, max) => ReactNode

—

Custom formatter for the displayed value.

valueFormat

(value, max) => ReactNode

Custom formatter for the displayed value.

tooltips

string[]

—

Per-star tooltip text shown on hover.

tooltips

string[]

Per-star tooltip text shown on hover.

labels

string[]

—

Labels shown next to the rating, changing with hover/selection.

labels

string[]

Labels shown next to the rating, changing with hover/selection.

icon

ReactNode

—

Override the filled icon.

icon

ReactNode

Override the filled icon.

emptyIcon

ReactNode

—

Override the empty icon.

emptyIcon

ReactNode

Override the empty icon.

onChange

(value: number) => void

—

Called when the user selects a new value.

onChange

(value: number) => void

Called when the user selects a new value.

onHoverChange

(value: number) => void

—

Called when the hovered value changes.

onHoverChange

(value: number) => void

Called when the hovered value changes.

Features

Five Shapes

Star, heart, thumb, circle, and square icons built-in — plus custom icon support.

Fractional Precision

Click anywhere on an icon for half-star or decimal ratings with pixel-accurate fills.

Tooltips & Labels

Per-star tooltips and dynamic labels that update on hover for expressive feedback.

Keyboard Accessible

Arrow keys, Home/End, and ARIA slider roles for full keyboard navigation.