BbRating

Focuses the field when it mounts (a dialog already open included), unless the user is typing in another field.

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.

Compact density. Swaps --bb-label-spacing-y for --bb-label-spacing-y-compact, so tune a compact group's label gap with the -compact token, not the base one.

Text between the label and the input. Unlike the hint it is always visible; it joins the input's 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.

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.

Error messages under the field, a string or array, in an aria-live="polite" region and first in the control's aria-describedby, so they are re-read when it regains focus.

Applies to the whole fieldset rather than to one star. Inside a BbForm the rule messages land here by themselves; set it by hand only outside one, and clear it as soon as a value is picked.

Keep this control out of the enclosing BbForm entirely: not submitted, not dirty, not reset, not validated. For a control that is not form data (a filter, a "show advanced" switch).

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.

Prefix for the ids of each option's input and of the label, description and message. Generated when omitted.

Vertical position of the control in a side-by-side row; not inputPosition, the horizontal one. Omitted, the control's first line meets the label's.

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.

Vertical position of the label block in a side-by-side row; not labelPosition, the horizontal one. Omitted, the label's first line meets the control's.

How label and input sit together: 'vertical', 'horizontal' (50/50), 'auto', 'label-fill', 'input-fill', a ratio like 'xx xxxxx', or a per-breakpoint map ({ default: 'vertical', md: 'xx xxxxx' }).

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.

Name of the star radio inputs. Optional: the stars live in one component instance, so an omitted name falls back to a generated one that groups them correctly. Pass one only when a native (non-JS) form post must submit the value under a known key.

The key of the value inside a BbForm and in a native form post. Omitted, the radios get a generated group name, unique to the instance, and a BbForm keys the value by the slugged legend; pass it whenever the value is submitted.

Keeps the hint displayed.

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

Passthrough, attribute form: one attribute per part, pt:<part>, and per part and state, pt:<part>:<state>. Parts: description, hint, item, label, message, root. States: disabled, errors, hasValue, readonly, selected, warnings.

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 any star satisfies it, and marks the legend unless the plugin's requiredAsterisk is off. The message still comes from a rule inside a BbForm, or from errors outside one.

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

vee-validate rules for this field. Only inside a BbForm.

Inside a BbForm, and keyed by name (else the slugged legend). Unrated is null, so a rule for "pick a star" refuses null, not 0.

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.

The field's name in validation messages ({field}): "Email is not valid". Defaults to the label (or legend), then "This field"; never the name. Set it when the label is hidden or reads badly in a sentence (icon-only, a question). BbForm only.

When the field validates: aggressive (each change), balanced (on leave, then live while in error), lazy (on leave), submit-only, submit-live. Unset: the BbForm's validation-mode, then formControls.validationMode ('balanced'). BbForm only.

Warning messages under the field, a string or array: amber, in their own aria-live region and in the control's aria-describedby after the errors. Non-empty turns on the warning state; errors win when both are set.

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.

Emitted when the rating becomes active (focus/click enters it).

Emitted when a star input loses focus. Forwards the original DOM FocusEvent.

Emitted when the selected rating changes. Forwards the original DOM Event.

Emitted when a star input receives a click. Forwards the original DOM MouseEvent.

Emitted when a star input gains focus. Forwards the original DOM FocusEvent.

Emitted when focus/click moves outside the rating after it was active.

Emitted on native input events from the star inputs. Forwards the original DOM Event.

Emitted for keyboard interaction on a star input. Forwards the original DOM KeyboardEvent.

Emitted when a pointing device button is pressed over a star input. Forwards the original DOM MouseEvent.

Emitted when a pointing device button is released over a star input. Forwards the original DOM MouseEvent.

Emitted with the selected rating (1 to stars) when clicked. Emits null only when clearable is enabled and the already-selected star is clicked.

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 icon 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. checked is true on every lit star, not only the picked one. Colour still goes through --accent / --empty on the root, never a colour class on the icon.

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

Content rendered before the row of rating stars.