Skip to main content

Rate

shadow

The wje-rate page was auto-generated to keep API documentation coverage in sync with the current component set. Detailed usage and best-practice guidance will be expanded in the next content phase.

When to use​

Use wje-rate when users need to enter values, choose options, or trigger form-related actions.

When not to use​

Do not use it as a decorative element without interaction. Prefer presentational components in that case.

Accessibility​

Always provide a label (label/aria-label), keep keyboard support, and surface clear validation feedback.

Best Practices​

  • Keep validation rules and error behavior consistent across the entire form.
  • Show loading or disabled states during async operations.
  • Split complex forms into smaller sections with immediate feedback.

Attributes and Properties​

isHover​

DescriptionControls how is-hover behaves in the component.
Attributeis-hover
Typeany
Default-

value​

DescriptionGets the value of the rating component.
Attributevalue
Typenumber
Default-

max​

DescriptionThe maximum value of the rating component.
Attributemax
Typenumber
Default-

disabled​

DescriptionDisables user interaction with the component.
Attributedisabled
Typeany
Default-

readonly​

DescriptionPrevents the value from being edited by the user.
Attributereadonly
Typeany
Default-

precision​

DescriptionThe precision of the rating component.
Attributeprecision
Typenumber
Default-

icons​

DescriptionThe icons of the rating component.
Attributeicons
TypeArray<string>
Default-

Events​

No events available for this component.

Methods​

createIcons​

DescriptionCreates the icons for the rating component.
Signature(i: number) => Element

changeRate​

DescriptionChanges the rate of the rating component.
Signature() => void

getIcons​

DescriptionReturns the icons for the rating component.
Signature(index: number) => Element

getValueFromXPosition​

DescriptionReturns the value from the x position.
Signature(coordinate: number) => number

roundToPrecision​

DescriptionRounds a given number to the nearest specified precision.
Signature(numberToRound: number, precision?: number) => number

CSS Shadow Parts​

NameDescription
nativeThe native part of the rating component.

CSS Custom Properties​

NameDescription
--wje-rate-gapDefines the spacing (gap) between individual items in the rating component. Accepts any valid CSS length unit (e.g., px, rem, em) to adjust the distance between rating elements.
--wje-rate-colorSpecifies the default color of the rating items. Accepts any valid CSS color value, including named colors, hex values, RGB, or CSS variables.
--wje-rate-selected-colorSets the color for selected or highlighted rating items. This property helps visually distinguish selected ratings. Accepts any valid CSS color value.

Slots​

No slots available for this component.

Content