Rating

Star rating field for scores from above 0 through max, with optional half steps.

Introduction

Use Rating when users pick a score on a star scale—reviews, satisfaction surveys, or quality marks. The value runs from above 0 through max (default 5), or null when empty. Choosing the current value again clears it.

Compared to similar components:

Slider — Continuous numeric scrubbing along a track. Prefer Slider for ranges like volume or opacity; prefer Rating for discrete star scores.
NumberField — Precise typed values with steppers. Prefer NumberField when exact digits matter more than icon selection.

App-wide form density (size) can be set with global.formDefaults — see Default props.

Import

import { Rating } from "@bridge-ui/vue/Components/Rating";

import { Rating } from "@bridge-ui/react/Components/Rating";

Basic usage

Defaults are max={5}, step={1}, and the star icon. In React, use value and onChange for controlled state, or defaultValue for uncontrolled. In Vue, use v-model or default-value. Hover previews the value under the pointer.

Read-only

Set readonly to display a score without allowing changes. disabled also blocks interaction.

Fractional values

A fraction fills the next item by that amount: 1.5 fills the first item and half of the second. Set step (for example 0.5) so pointer and keyboard selection can land on halves.

Colors

Use color for selected icons. Available colors: primary, secondary, success, info, warning, error, dark, and black.

Sizes

Control icon size and field label typography with size. Available sizes: 2xs, xs, sm, md (default), lg, xl, and 2xl.

Validation

Set required for a label asterisk. Set error and errorMessage for invalid styling and helper text below the control.

Accessibility

Items expose radiogroup semantics. Arrow keys move by step (horizontal arrows follow text direction). Home selects the first step; End selects max. A move at or below the first step clears the rating.
Provide a label (or associate labels via controlId) so assistive technology has an accessible name.
When error is true, invalid styling and the error message are linked through the field chrome.

Anatomy

Rating (root)
├── Header — label, optional corner text, required indicator
├── Control row
│   ├── start slot (optional)
│   ├── Rating items — icon buttons (partial fill when fractional)
│   ├── Hidden input — submitted with name when set
│   └── end slot (optional)
└── Footer — description or error message

Slider, NumberField, OtpField

API

Prop	Type	Default	Description
default-value	number \| null	—	Initial value for uncontrolled usage (without v-model).
v-model	number \| null	—	Two-way binding for the selected score. null clears it.

Prop	Type	Default	Description
defaultValue	number \| null	—	Initial value for uncontrolled usage.
onChange	(value: number \| null) => void	—	Called with the next value. null means the selection was cleared.
value	number \| null	—	Selected value. null clears the rating. A fraction fills the next item partway. Pair with onChange.

Rating-specific

Prop	Type	Default	Description
classes	RatingClasses	—	Classes for the field chrome and the rating parts.
color	RatingColor	"primary"	Color applied to selected icons.
customProps	RatingCustomProps	—	Extra props for internal parts.
icon	IconSource	"star"	Icon used for every item.
max	number	5	Number of items. The value runs from above 0 through max.
name	string	—	The name of the hidden input submitted with the form.
size	RatingSize	"md"	Size of the icons and of the field label (2xs … 2xl).
slots	RatingSlots	—	Chrome slots.
step	number	1	Increment for pointer and keyboard selection. 0.5 selects each half.

Events

Event	Payload	Description
@update:modelValue	number \| null	Emitted for v-model updates.

Prop	Payload	Description
onChange	number \| null	Called when the value changes (or is cleared).

Field chrome

Prop	Type	Default	Description
controlId	string	auto	Id for the control and related labels.
corner	string	—	Secondary header text.
description	string	—	Helper text below the control. Hidden when error and an error message are set, unless showDescriptionOnError.
disabled	boolean	false	Disables interaction.
error	boolean	false	Invalid styling. Hides description when an error message is shown, unless showDescriptionOnError.
errorMessage	string	—	Error message below the control.
hideErrorMessage	boolean	false	Does not reserve the error row. That row is also omitted while a description is shown.
label	string	—	Primary label above the control.
readonly	boolean	false	Prevents interaction.
required	boolean	false	Shows a required asterisk on the label.
showDescriptionOnError	boolean	false	Keeps the description visible while the field is invalid.
slots	object	—	label, corner, description, errorMessage, start, end.