Forms & Inputs

Rating

Click, drag, or use arrow keys to pick a value on a row of stars, with optional half-step precision.

Install

import { Rating } from 'vael-ui'

max

allowHalf

readonly

disabled

size

name

motionCss ?

import { Rating } from 'vael-ui'

<Rating :max="5" :allowHalf="false" :readonly="false" :disabled="false" size="md" name="" motionCss>Rating</Rating>

Name	Type	Default	Description
`max`	`number \| undefined`	`5`
`allowHalf`	`boolean \| undefined`	`false`	Half-star precision, for both pointer and keyboard (arrow keys step by 0.5).
`readonly`	`boolean \| undefined`	`false`
`disabled`	`boolean \| undefined`	`false`
`size`	`"md" \| "sm" \| "lg"`	`"md"`
`name`	`string \| undefined`		Falls through to a hidden `<input>` → plain `<form>` participation.
`valueText`	`((value: number) => string) \| undefined`		Drives `aria-valuetext`. Defaults to the `rating.valueText` message ("{value} of {max}").
`motionCss`	`boolean \| undefined`	`true`	Gates the fill-sweep + commit-pop animation.
`ui`	`Partial<{ root: UiPartValue; item: UiPartValue; }> \| undefined`
`modelValue`	`number \| undefined`	`0`

No slots.

Name	Type	Description
`update:modelValue`	`[value: number]`

Name	Type	Description
`el`	`HTMLElement \| null`
`itemEls`	`HTMLElement[] \| null`