Rating

Choose, change, or clear one score on an ordered rating scale.

Usage

Five star

Choose and clear a score on a five-point rating scale.

Choose and clear a score on a five-point rating scale.

Required

Require one value to remain selected or one section to remain expanded.

Require one value to remain selected or one section to remain expanded.

Controlled

Let the parent own the current value and apply accepted changes back to the component.

Let the parent own the current value and apply accepted changes back to the component.

API

Vue package: @sectile/vue/rating

Components

• RatingRoot
• RatingItem
• RatingIndicator
• RatingClear

Props

RatingRootProps

as

TypePrimitiveAsDefault'div'

Element or component rendered for this part.

asChild

TypebooleanDefaultfalse

Whether to merge this part into its single child instead of rendering a wrapper.

clearable

TypebooleanDefaultfalse

Whether the current selection can be cleared.

defaultValue

TypestringDefault''

Initial value used when the component owns its state.

disabled

TypebooleanDefaultfalse

Whether interaction is unavailable.

disabledItems

Typereadonly string[]Default[]

Item values excluded from focus and selection.

form

TypestringDefaultundefined

ID of the native form associated with the control.

items

Typereadonly string[]DefaultRequired

Ordered item values managed by the component.

modelValue

TypestringDefaultundefined

Current value when state is controlled by the parent.

name

TypestringDefaultundefined

Name used for native form submission.

readonly

TypebooleanDefaultfalse

Whether the value can be inspected but not changed.

required

TypebooleanDefaultfalse

Whether the control must contain a valid value before submission.

RatingClearProps

as

TypePrimitiveAsDefault'button'

Element or component rendered for this part.

asChild

TypebooleanDefaultfalse

Whether to merge this part into its single child instead of rendering a wrapper.

Slots

RatingRootSlotProps

clearable

Typeboolean

Whether the current value can be cleared.

disabled

Typeboolean

Whether interaction is unavailable.

highlightedValue

Typestring | null

Value currently highlighted for interaction.

readonly

Typeboolean

Whether the value can be inspected but not changed.

value

Typestring

Current value exposed by this contract.

Events

RatingRoot

update:modelValue

Payloadstring

Emitted when the component requests a new controlled value.

Other types

RatingValueChangeHandler

type RatingValueChangeHandler = (value: string) => void

Parts

Shared scope: [data-scope="rating"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
root	[data-part="root"]	Defines the component boundary and owns its composed parts.	—
item	[data-part="item"]	Represents one selectable or actionable item.	—
indicator	[data-part="indicator"]	Shows state or position without replacing the primary content.	—
clear	[data-part="clear"]	Clears the current value or collection.	—

Keyboard interaction

Key	Behavior
Arrow keys	Move the active option in the visible orientation.
Home / End	Move to the first or last eligible option.
Enter / Space	Select or activate the current option.
Printable text	Move to the next matching option when typeahead is available.

Accessibility

Rating choices use radio-group semantics, keep every score named, and provide an explicit clear action.

See the corresponding WAI-ARIA pattern for the host accessibility contract.