BbRadioGroup

Sets autofocus on page load.

Sets the component in a compact state.

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

Timeout used to debounce response to changes to dependencies.

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).

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.

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.

Locks the group. Prefer readonly when the group already carries a selection: the per-option check currently exempts the selected option.

If coherence is enforced the input cannot have a modelValue that is incoherent with its current items. e.g. You cannot set v-model to a user that is not present in the items passed. modelValue will be reset upon incoherence.

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.

The channel that produces the sentence the user reads. required marks the field; it does not write a message.

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.

The identifier of the component.

Defines the direction of the inputs in the fieldset.

Defaults to horizontal: a wrapping row, not a stack. The row is a plain flexbox and options are content-sized, so flex: 1 1 0 on the option is what makes tiles share the width evenly.

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

ADDITIONAL row fields resolved from each item — never its text or value (those stay on itemText / itemValue). Option groups accept one field: - description — a muted line under the option label, beside the control; it may wrap. Either an object with a path or getter per field ({ description: 'email' }) or a function returning the fields ((item) => ({ description: item.email })). Without it no field renders — an item's own description is never read implicitly — and an empty value renders nothing for that item. The description is announced as the option's description, never part of its name. To disable individual options use selectable.

Used to retrieve items; can be an array or a function.

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.

Defines a path that returns a property of the object to use as value or a function that returns any value.

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.

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.

Defines the name of the option inputs. Optional: the options live inside a single component instance, so an omitted name falls back to a generated one that groups them correctly on its own — unique per group, so two groups never clear each other's selection, and stable for the group's lifetime. Pass a name only when the value has to be submitted under a known key by a native (non-JS) form post.

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.

String displayed when there are no items to display.

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.

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

Sets the input as required.

The only one of the three groups with this prop, because one value is either present or absent. It marks the field for assistive technology and raises the asterisk; the message still comes from errors.

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

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.

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.

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.

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 live 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 }, 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 shown when no options are available (replaces the default "no data" text).

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