BbRating

Sets autofocus on page load.

Allows clearing the selected rating by clicking the current value.

Adds the only way back to unrated, since a radio group cannot be un-picked: click the selected star again, or press Delete or Backspace on it. Neither gesture is discoverable, so pair it with a hint — and expect null, never 0.

Sets the component in a compact state.

Descriptive text displayed below the label and above the input. Unlike the hint it is always visible, and it is linked to the input via aria-describedby (after any errors / warnings, before the hint).

Always visible, above the stars. The place for what the scale means before anyone picks a point on it.

Direction of the layout of the component. Can either be a predefined value or a pattern separated by a space like xx xxxxx.

Disables the component.

Takes the group out of the tab order, so the score is missing entirely for someone navigating by keyboard. Prefer readonly for a score the user may inspect.

Can be a string or an array of string containing the messages to display. They render in an aria-live="polite" region (announced when they appear) and, while the list is non-empty, are referenced FIRST from the control's aria-describedby, so the reason the field is invalid is re-read whenever the control regains focus.

Applies to the whole fieldset rather than to one star. Clear it as soon as a value is picked — a form that keeps shouting after the user complied is a form people stop reading.

Define if the component should be in an error state. It usually attaches a CSS class for styling purposes.

Define if the component should be in a warning state. Same chrome as errors with --bb-warn; errors take priority.

Visually hides the legend of the fieldset while maintaining accessibility.

Keeps the accessible name and removes only the visible text, which is what a score under a product title wants. legend itself is required by the type and is the only name the group has.

Text box to be displayed near the input, usually to indicate instructions.

The identifier of the component.

Sets the alignment of the input. Since inputs are inline block they can be aligned just as text can.

Aligns the row of stars within its column. It was accepted, typed and documented in v2 and did nothing — the rules targeted a class this component never rendered. v3 repoints them, so a hand-rolled alignment workaround now fights the library and should be deleted.

Text content of the legend.

The family says label; this component says legend, because the control is a real <fieldset>. Same for legend-mode, hide-legend and legend-position.

Legend rendering mode. 'outside' renders the legend above the fieldset in the normal flow; 'inside' overlays the legend inside the fieldset border. Floating mode is not supported for rating groups.

Places the legend the way label-mode places a label elsewhere: outside above the stars, inside pinned in a bordered shell around them.

Sets the text alignment of the legend.

Used by v-model.

Defines the name of the star radio inputs. Optional: the stars live inside a single component instance, so an omitted name falls back to a generated one that groups them correctly on its own. Pass a name only when the value has to be submitted under a known key by a native (non-JS) form post.

Optional in v3, required in v2. Omitted, the component generates a group name that is unique and stable for the instance, so two ratings on one page cannot bleed into each other. Pass it when a native form post needs the value under a key you chose.

Keeps the hint displayed.

Passthrough, object form: the same keys as the pt:* attributes without the prefix. See the pt:<part> row.

Sets the input in a readonly state.

Keeps the group focusable and exposes aria-readonly, and swallows the clear keys so a displayed score cannot be nudged to null. This is the read-only half of the component, not a disabled state.

Sets the input as required.

Applies to the fieldset, so it is satisfied by any star. Combine with errors for the message; the browser will not write one for you.

Reverses the layout. Applicable in every direction the order of the label and the input is swapped.

Defines the component size. Accepted values: - A key from the provided size map (keyof T), e.g. 'sm' | 'md' | 'lg' - A custom CSS size string (e.g. '20px', '1.5rem', '2em') - A number, typically interpreted as pixels by size parsers

The glyph size only — never the number of stars and never the value, both of which are stars. Takes a key from the shared scale or a CSS length.

Maximum number of stars to render and maximum value of the component.

Sets the number of glyphs and the maximum value at once. Past ten or so a row of identical glyphs stops being countable at a glance; a BbSlider or a BbRadioGroup with real labels answers the same question better.

Warning messages to display beneath the field, in their own aria-live region and amber (--bb-text-warn). A string or array; a non-empty list implies the warning state. Errors suppress warnings when both are set. While displayed they are also referenced from the control's aria-describedby, after any errors and before the description/hint.

The amber counterpart of errors, for a score that is accepted and worth a second look. Suppressed when errors are also set.

number | null, always a whole number. null means unrated and is what clearable emits — storing it as 0 puts a real score into every average you compute later.

Content rendered after the row of rating stars.

Where the precise figure and the sample size go, because there are no half stars: a 4.6 average fills four, so round for the glyphs and print the decimal as text.

Replaces the description text. Provided alone (no description prop) it still renders the description region and wires it into aria-describedby.

Replaces the default star SVG for each rating option.

Replaces the star glyph and nothing else. size arrives already resolved into a CSS length string ('24px', not 24), so pass it straight to BbIcon; arithmetic on it produces NaN silently.

Replaces the default fieldset legend text rendered above the rating stars.

Content rendered before the row of rating stars.