BbRadio

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

Defines the input as checked.

Overrides the model-derived display and fights a v-model: pick one source of truth. Narrowed to a plain boolean in v3, so the v2 string forms no longer compile.

Compact density. Swaps --bb-label-spacing-y for --bb-label-spacing-y-compact, so tune a compact field's label gap with the -compact token, not the base one. The same meaning as on the checkbox, radio and switch groups.

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.

Wired into the input's aria-describedby, so it is announced as part of the option. The same sentence in a sibling element is read as unrelated page content.

Disables the component.

Removes the option from the tab order and from the post. Prefer offering a real choice; when you cannot, say why in description.

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.

Lives on one button, while the error usually belongs to the whole set. Put it on a single radio, the last, rather than on each one: repeated, it renders and announces the same sentence per button. A BbRadio never joins a BbForm, so a set that needs validating is BbRadioGroup; when the radios must stay in your own markup, bind the choice with useBbFormField and pass its errors here.

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 label of the input while maintaining accessibility.

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

The id of the native control; the label's for and the description and message ids derive from it. 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.

Text content of the label of the element.

Required on every button: it is the accessible name, and it stays the accessible name when the label slot replaces the rendered text.

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.

Sets the text alignment of the label.

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

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

Name of the input. Optional: a generated one is unique to this radio, so radios that form ONE exclusive group must share an explicit name. Pass one too for a native (non-JS) form post under a known key.

No longer required in v3: an omitted name is generated per button. That is exactly why a hand-composed group must still pass one shared explicit name: generated names differ, so those buttons never form a native group and you lose exclusivity and arrow-key navigation with it.

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, label, message, root. States: checked, disabled, errors, focused, focusVisible, readonly, warnings.

Sets the input in a readonly state.

Blocks changes while staying focusable and still submitting. A lone radio cannot announce it (role="radio" supports no aria-readonly), so explain it in description, or use BbRadioGroup, whose radiogroup does carry the attribute.

Sets the input as required.

Reverses the layout: in every direction the order of the label and the input is swapped from the standard arrangement.

Its meaning inverted in v3 and the compiler cannot see it. The default rendering is unchanged, but a v2 :reverse="false" becomes a bare reverse, and a v2 reverse is deleted.

Defines the value of the radio input. It can be any serializable value.

Required, and distinct per button: two buttons sharing a value are not two options. Any serializable value is matched structurally, but prefer stable primitive ids: they survive a refetch and are cheap to submit.

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 model shared by every button in the set: that is what makes selecting one deselect the rest. It carries the chosen value and nothing else.

Emitted when the native input loses focus. Forwards the original DOM FocusEvent.

Emitted when the radio selection changes. Forwards the original DOM Event.

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

Emitted when the native input gains focus. Forwards the original DOM FocusEvent.

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

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

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

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

Emitted when the radio becomes selected, carrying the radio's value prop.

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 visual inside the radio container. Receives the radio state plus the label text.

Replaces the whole radio-dot visual, so the slot owns selected, unselected and the focus ring. When the row around it is the problem rather than the dot, drop to BbBaseRadioIcon.

Replaces the default label text rendered next to the radio button.

Receives { text, hasErrors, hasWarnings }. Use it for the one option that needs a badge or emphasis. If every option needs the same decoration, you have a uniform mapping again and BbRadioGroup expresses it with less markup.