A wider screen, please

This page features interactive demos and side-by-side code samples that need at least 340 pixels of horizontal space. Please widen your browser window, or rotate your device, to continue.

Morpheus v0.1.0
v0.1.0
Morpheus Components Rating Settings

Rating#

Component <neo-rating> is a symbol-based rating control (stars by default) following the WAI-ARIA slider pattern: the host is the single focusable slider and the symbols are decorative, so screen readers announce one value instead of max separate widgets. Hover or drag previews; click commits. Keyboard arrows, Home / End, and digit keys preview; Enter commits. Set precision="0.5" to allow half symbols.

Default
Basic
Half-symbol precision
Read-only
Disabled
Custom range
Hearts, large
Themed via custom properties
Deactivate Rename Duplicate
Delete New state Toggle autoplay
HTML CSS

The selected state's markup and its scoped CSS. The CSS is wrapped in <style>@scope { ... }</style> and applies to the preview only. Edits change the preview above, applied live while Sync is on, or when you click Patch or Replace. Patch morphs the preview; Replace swaps it outright.

Replace Patch

Signals

Datastar signals declared in the selected state's markup. Change a value to drive the preview, applied live while Sync is on, or when you click Patch.

Patch

Reference#

Attributes #

NameTypeDefaultDescription
valuenumber reflected observed0Current rating, clamped to [0, max] and snapped to precision.
maxnumber observed5Number of symbols.
precisionnumber observed1Smallest selectable step in (0, 1]. 0.5 gives half symbols, 0.25 quarters.
iconstring observed"star"neo-icon name drawn for each symbol (e.g. heart).
labelstring observednoneAccessible name; mirrored to aria-label unless an aria-labelledby is already set.
size"" | "sm" | "lg"""Symbol size shorthand for --neo-rating-symbol-size.
readonlyboolean observedfalseDisplay-only: announced to AT but not interactive and out of the tab order.
disabledboolean observedfalseRead-only plus a dimmed, non-interactive appearance.

Events #

NameDetailBubblesDescription
neo-rating-input{ value: number }yesFires continuously while previewing (hover, drag, or keyboard candidate) with the value not yet committed.
neo-rating-change{ value: number }yesFires on commit (click, drag end, keyboard Enter) and only when the value actually changed.

Parts #

NameDescription
::part(svg)The symbol's <svg>, forwarded from the nested <neo-icon> so its fill and stroke can be styled.

CSS variables #

NameDefaultDescription
--neo-rating-symbol-size1.5remSymbol size.
--neo-rating-symbol-gap0.15remGap between symbols.
--neo-rating-color#f59e0bColor of filled symbols.
--neo-rating-preview-colorvar(--neo-rating-color)Color of the preview shown while hovering or dragging.
--neo-rating-empty-colorvar(--btn-border)Color of empty symbols.
--neo-rating-transition-durationcalc(120ms * var(--neo-duration-scale, 1))Fill transition duration.

Examples#

Basic#

Five stars, whole-symbol steps. Click a star or focus the control, preview with a digit / arrow key, and press Enter to commit.

HideHTMLTempl

Half-symbol precision#

With precision="0.5" the left half of a symbol selects the half value and the right half the whole one; pointer and arrow keys both step by 0.5.

HideHTMLTempl

Read-only#

readonly shows an aggregate score: it is still announced to assistive tech but takes no pointer or keyboard input and stays out of the tab order.

HideHTMLTempl

Disabled#

disabled is read-only plus a dimmed, non-interactive look; use it when the rating is temporarily unavailable.

HideHTMLTempl

Custom range#

max sets the symbol count; here a score out of ten.

HideHTMLTempl

Customization#

The symbol is any neo-icon via the icon attribute, and three CSS custom properties drive the look: --neo-rating-color (filled), --neo-rating-empty-color (track), and --neo-rating-symbol-size / --neo-rating-symbol-gap. The size attribute is a shorthand for the common small / large symbol sizes.

Hearts, large#

icon="heart" swaps the symbol; size="lg" scales it up.

HideHTMLTempl

Themed via custom properties#

A scoped class redefines the --neo-rating-* variables (a warm ember palette with wider spacing) without touching the component itself.

HideHTMLTemplCSS

Settings

Theme

Default Sunshine Ocean Matrix Rose☀ ◐ ☾

Accessibility

Playgrounds

Server Simulator