BbRadioGroup

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

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.

Defines an array of dependencies that will trigger actions in the component upon change.

Timeout used to debounce response to changes to dependencies.

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.

The place to say why some options are locked. Arrow keys skip a non-selectable radio entirely, so a keyboard user never lands on one to find out.

Disables the component.

Locks every option, the chosen one included, and keeps the value out of a native post. To freeze a choice that must still be submitted, use readonly.

String displayed when there are no items to display.

After every applied, successful load (an empty one included), drops the model values the options no longer contain (a single value resets to null). A failed load never prunes.

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.

Your own messages. Inside a BbForm they join the rule messages; outside one they are the only channel.

String displayed in the empty state while the latest load FAILED (the items provider threw): the twin of emptyText for that case.

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 each option's label text (the text rendered next to every input) while keeping it accessible to screen readers. Does not affect the fieldset legend — use hideLegend for that.

Visually hides the legend of the fieldset while maintaining accessibility.

The right way to drop the legend visually. Removing it instead costs the group its role="radiogroup", which is only claimed when the set can be named.

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.

Vertical position of each option's control in its row; 'center' is the middle of the label plus its description. Omitted, it sits on the label's first line.

Vertical position of each option's label in its row. Omitted, it stays as it is.

How each row's input and label sit together, in the layout keywords: 'auto', 'vertical', 'horizontal', 'label-fill', 'input-fill', or a two-word ratio pattern like 'xx xxxxx'.

ADDITIONAL row fields, never the text or value: description, a muted line under the label (it may wrap; announced as the option's description). An object of paths or getters, or a function of the item; nothing is read implicitly.

Swaps each row's input and label from their natural order (input first), in every item-layout. reverse swaps the legend and the options instead.

The options: an array, or a provider called with a BbRadioGroupItemsContext (reason, modelValue, signal), sync or async. A provider fails by THROWING, never by returning []: the rows clear and #empty gets the error.

Same mapping as every other options component. A radio group has no multiple and no max: one value is the whole contract.

Defines a path that returns a property of the object to use as text or a function that returns a string. Unset: own label, else text ({ label, value } needs no accessor).

Defines a path that returns a property of the object to use as value or a function that returns any value. Unset: own value, even null.

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.

Required, and load-bearing twice over here: it is the fieldset's accessible name and it is what lets the options container claim role="radiogroup", a role no native element supplies.

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 radio groups.

Sets the text alignment of the label.

How the rows sit in the list: 'horizontal' (on a line, wrapping), 'vertical' (stacked), 'vertical-stretch' (stacked, as wide as the list) or 'tiles' (equal boxes; --tile-min-width on pt:list sets the narrowest). Layout only: the cards are pt (guide § Radio cards).

Defaults to horizontal: a wrapping row, not a stack, with each option its own size. tiles is the value for equal-size boxes; --tile-min-width on pt:list sets how narrow a tile gets before it wraps.

String displayed while items are being loaded.

Used by v-model. Can be any serializable type.

Timeout used to debounce response to changes to modelValue.

Name of the option inputs. Optional: a generated one, unique per group and stable, groups them. Pass one only when a native (non-JS) form post must submit the value under a known key.

No longer required in v3. An omitted name falls back to a generated one, unique per group instance and stable for its lifetime, so two unnamed groups never clear each other. Pass one when the value has to post under a known key. A hand-composed set of BbRadio still needs an explicit shared name.

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, icon, indicator, item, itemDescription, label, legend, list, message, root. States: checked, disabled, errors, focused, focusVisible, hasValue, line, loading, pill, readonly, warnings.

Sets the input in a readonly state.

The radio role supports no aria-readonly, so the state can only be announced on the group, which this component has and a hand-composed set of BbRadio does not.

Sets the input as required.

The only group with this prop, because one value is either present or absent. It sets the native attribute and the marker (unless requiredAsterisk is off). Inside a BbForm it is a hint and checks nothing; the message comes from rules there, 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.

Validates the chosen value as one field. Only inside a BbForm, where it is what writes the message required does not.

Defines whether options are selectable. Can be a global boolean that affects all options or a function that accepts an item and returns a boolean that only affects that item. Non-selectable options are rendered disabled.

A rejected option is skipped by the arrow keys, not merely greyed, so the reason has to be written somewhere the user will read. Also where v2's per-item disabled field went: that field is inert in v3, silently.

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.

A tab-strip look (Q76.11 d): 'pill' (a raised pill under the pick) or 'line' (a bar on a baseline); the indicator slides like a tab strip's. list-layout="vertical" stacks it. Register more with radioVariants. Unset: the group's own rows.

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.

One resolved value, never an array. Seed it null for "nothing chosen". Nothing the user can do puts it back to null, so if the empty state stays legitimate, give it an option of its own.

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

Emitted when one of the generated radio inputs loses focus. Forwards the original DOM FocusEvent.

Emitted when a radio option is selected. Forwards the original DOM Event from the radio input.

Emitted when one of the generated radio inputs is clicked. Forwards the original DOM MouseEvent.

Emitted when one of the generated radio inputs receives focus. Forwards the original DOM FocusEvent.

Emitted when focus/click moves outside the group after it was active. Useful for validation-on-blur flows at group level.

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

Emitted for keyboard interaction on generated radio inputs. Forwards the original DOM KeyboardEvent.

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

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

Emitted with the newly selected value when the selection changes.

Content rendered after the last option, inside the options container.

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

Content shown when no options are available (replaces the default "no data" text). error is what the latest failed load rejected with, untouched, and null when nothing failed — a failed load clears the rows, so this slot is where it shows.

Replaces the default radio dot icon for each option. Receives the radio state plus the source item and its display text.

Replaces the dot per option and receives item alongside the current state, which is how a tile is built from your own data. Everything underneath stays a native radio, so exclusivity and the arrow keys are untouched.

Replaces the default label text for each option.

Scoped { item, text, checked, description }, one template for every option. It is what replaced v2's removed #option:prepend and #option:append.

Replaces the default fieldset legend text for the group.

Content shown while options are loading (replaces the default loading text).

Content rendered before the first option, inside the options container.