Rating

A feedback component that allows users to provide ratings from a visual scale.

Disabled

Use the disabled attr or the disabled class to disable a component.

Read Only

Use the readOnly attr to make the component read-only.

Compound Version

If you need more control over the children, you can use the compound version of the component.

Custom Symbols

Use the single props to keep only one child highlighted.

With Fractions

Use the fractions prop when you need fractional ratings.

Controlled

Use the value and onValueChange props when you need to control the value externally.

Uncontrolled

Use the name prop to include the value in the form submission.

Sizes

Use the rating-{size} class to control the component size.

Size values can include:smmdlg.

For more information on all available sizing utilities, visit Tailwind

Palette

Use the text-{color} class to control the component color. Refer to the Colors documentation to see all available color and shade options.

For more information on all available color utilities, visit Tailwind .

Customizing

globals.css


:root {
  --ex-rating-cursor: default;
 
  --ex-rating-gap-x-sm: calc(var(--spacing) * 0.5);
  --ex-rating-gap-x-md: calc(var(--spacing) * 0.5);
  --ex-rating-gap-x-lg: calc(var(--spacing) * 0.5);
 
  --ex-rating-indicator-font-size-sm: var(--text-base);
  --ex-rating-indicator-font-size-md: var(--text-lg);
  --ex-rating-indicator-font-size-lg: var(--text-xl);
}

API

Rating

Element	Selector
`Rating`	`.ex-rating`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`count`	`number`
`defaultValue`	`string`
`disabled`	`boolean`	`false`
`fractions`	`number`
`loop`	`boolean`	`true`
`name`	`string`
`readOnly`	`boolean`	`false`
`required`	`boolean`	`false`
`single`	`boolean`	`false`
`value`	`string`
`onValueChange`	`function`

Rating Control

Element	Selector
`Rating.Control`	`.ex-rating-control`

Prop	Type	Default
`as`	`ElementType`	`button`
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`
`required`	`boolean`	`false`
`value`	`string`

Rating Indicator

Element	Selector
`Rating.Indicator`	`.ex-rating-indicator`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	`true`