HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
RatingView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA score out of a few marks, given or shown.ExperimentalSince 0.1.0FormsUsageimport'@fusion.dev/helix/rating'import'@fusion.dev/helix-headless/rating'Preview
API ReferenceRoothelix-ratingA score out of a few marks, given or shown.
PropTypeDefaultDescriptiondefaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.feedbackstring""What is wrong, in the reader's words rather than the browser's.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.maxnumber5How many marks there are.minnumber0The lowest score a reader can give, which is what clearing returns to.namestring""Name submitted with the form.readOnlybooleanfalseWhether this shows a score rather than asks for one.requiredbooleanfalseWhether the form refuses to submit without it.showValuebooleanfalseWhether the score is written out beside the marks.stepnumber1The smallest part of a mark that can be chosen.valuestringWhat the control holds now, and what its form submits.valueAsNumbernumberThe value as a number, or `NaN` while the control is empty.valueTextstring""How the score is read out, where "3.5 out of 5" is not what it should say.variant"dots"|"marks"Which mark the row is drawn with.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.scorenumberThe score, as a number, clamped to what the marks can show.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionmarkThe shape of a mark, cloned into every position. Left empty, the stylesheet draws its own and `--rating-mark` swaps it.
EventTypeDescriptionchangeEventAnnounced with it, the choice being the commit.helix-before-changeHelixBeforeChangeEventFired before the score changes, and cancelable.inputEventAnnounced once the value has moved.
MethodTypeDescriptionrequestValue(next: string) => booleanRequests a new value, and reports whether the request stood.
PartDescriptionfeedbackWhat is wrong with it.fillThe filled marks, clipped to the score.hintHelp under the marks, while nothing is wrong.labelThe question, over the marks.markOne mark, in either layer.marksThe row of marks.optionOne place a reader can press, which is one step.trackThe unfilled marks.valueThe score written out, under `show-value`.
CSS PropertyDescription--rating-colorThe color of a filled mark.--rating-empty-colorAnd of an unfilled one.--rating-fullHow many marks are wholly filled.--rating-gapSpace between marks.--rating-markThe shape of one mark, as a mask image.--rating-partHow much of the next mark is filled, 0 to 1.--rating-sizeHow big one mark is.--rating-stepThe width of one step, as a fraction of a mark.--rating-stepsHow many steps one mark is divided into.
Roothelix-headless-ratingA score out of a few marks, given or shown.
PropTypeDefaultDescriptiondefaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.feedbackstring""What is wrong, in the reader's words rather than the browser's.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.maxnumber5How many marks there are.minnumber0The lowest score a reader can give, which is what clearing returns to.namestring""Name submitted with the form.readOnlybooleanfalseWhether this shows a score rather than asks for one.requiredbooleanfalseWhether the form refuses to submit without it.showValuebooleanfalseWhether the score is written out beside the marks.stepnumber1The smallest part of a mark that can be chosen.valuestringWhat the control holds now, and what its form submits.valueAsNumbernumberThe value as a number, or `NaN` while the control is empty.valueTextstring""How the score is read out, where "3.5 out of 5" is not what it should say.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.scorenumberThe score, as a number, clamped to what the marks can show.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
EventTypeDescriptionchangeEventAnnounced with it, the choice being the commit.helix-before-changeHelixBeforeChangeEventFired before the score changes, and cancelable.inputEventAnnounced once the value has moved.
MethodTypeDescriptionrequestValue(next: string) => booleanRequests a new value, and reports whether the request stood.
PartDescriptionfeedbackWhat is wrong with it.fillThe filled marks, clipped to the score.hintHelp under the marks, while nothing is wrong.labelThe question, over the marks.markOne mark, in either layer.marksThe row of marks.optionOne place a reader can press, which is one step.trackThe unfilled marks.valueThe score written out, under `show-value`.
CSS PropertyDescription--rating-fullHow many marks are wholly filled.--rating-partHow much of the next mark is filled, 0 to 1.--rating-stepThe width of one step, as a fraction of a mark.--rating-stepsHow many steps one mark is divided into.
ExamplesNameDescriptionDotsA level rather than a judgment, which is what a plain circle says.EventsOne score per choice, because a drag asks for nothing until it is let go.HalvesHalf marks, which is the case the value is a number for.In A FieldA rating as a form control, with help under it and a message when it is missing.PreviewA score out of five, set by pointer or by arrow key.PreviewA score out of five, set by pointer or by arrow key.ReadonlyA score being shown rather than asked for, which is not a control.SlottedOne shape, cloned into every position, halves and all.SummaryA review summary: the average as a readout, the spread as meters.ValueMarks say roughly and a number says exactly, so most ratings print both.