`<bmx-radio>`

One option inside a bmx-radio-group. It renders, and that is nearly all it does: the group owns the value, the keyboard, the tab order, the form participation and the validity, because in a radio group every one of those is a question about the set rather than about any one option.

7 properties · 0 events · 1 methods · 4 parts

Example

Middle — last resort

Show markup

<div class="row">
  <bmx-radio-group label="Seat" value="window">
    <bmx-radio value="window" label="Window"></bmx-radio>
    <bmx-radio value="aisle" label="Aisle"></bmx-radio>
    <bmx-radio value="middle" label="Middle" tone="warning">Middle — last resort</bmx-radio>
  </bmx-radio-group>
</div>

That is not an implementation convenience, it is what a radio group is. "Is this one selected" cannot be answered by the option itself without knowing what the others are doing, and an option that answered for itself would let two of them be selected at once - which is the single most common bug in hand-rolled radio groups.

So this component takes its checked, its tabindex and its size and tone from the group. Used on its own it will render and do nothing, which is correct: an option with nothing to be an option of has no answer to give.

WHY THE HOST CARRIES `role="radio"` RATHER THAN AN `<input>` INSIDE IT

Native radios are grouped by name, and a name does not cross a shadow boundary. Six bmx-radio elements each holding their own <input> are six groups of one - independently checkable, announced as "1 of 1", and arrowing between them does nothing. Putting the role on the host instead puts the options where the accessibility tree expects them: children of the element carrying role="radiogroup", announced as "3 of 6", because the flattened tree is what that tree is built from.

Properties

Property	Attribute	Type	Default	Description
`checked`	`checked`	`boolean`	`false`	Whether this is the chosen option. Written by the group. Setting it by hand selects the option visually without telling the group, which is how two options end up looking chosen - set the group's `value` instead.
`disabled`	`disabled`	`boolean`	`false`	Disable this option. The group skips it when arrowing.
`label`	`label`	`string`	—	The option's caption. Use the default slot for rich content.
`rovingTabindex`	`roving-tabindex`	`number`	`-1`	This option's place in the group's single tab stop. Set by the group and not normally set by hand. Unlike `bmx-button`'s property of the same name, the focusable element here is the host, so this is rendered straight onto it - but the name is the same because the job is: a composite widget that cannot take its children out of the tab order cannot implement the WAI-ARIA keyboard pattern at all.
`size`	`size`	`BmxSize`	`'md'`	Size step. The group sets it on every option that has not set its own.
`tone`	`tone`	`BmxTone`	`'primary'`	Semantic colour role. The group sets it on every option that has not set its own.
`value`	`value`	`string`	—	The value this option contributes when it is chosen. Required in practice: it is what the group writes into its own `value` and what the form receives. An option without one falls back to its position, which works and is not what anybody wants in a submitted payload.

Methods

Method	Signature	Description
`setFocus`	`setFocus(options?: FocusOptions) => Promise<void>`	Focus the option. Called by the group when the arrow keys move.

Slots

Slot	Description
`(default)`	The option's caption, in place of the `label` property.

CSS shadow parts

Part	Description
`base`	The row holding the dot and the caption.
`box`	The wrapper around the drawn dot.
`label`	The caption.
`mark`	The drawn circle and dot.

CSS custom properties

Property	Description
`--bmx-radio-accent`	The colour of the selected ring and dot. Defaults to the tone's solid colour.
`--bmx-radio-background`	The circle's background when unselected.
`--bmx-radio-border-color`	The circle's border colour when unselected.
`--bmx-radio-border-width`	Border width of the circle when unselected.
`--bmx-radio-duration`	How long the dot takes to appear. Zero under reduced motion.
`--bmx-radio-font-size`	The caption's font size.
`--bmx-radio-gap`	Space between the circle and its caption.
`--bmx-radio-size`	The drawn circle's diameter. The clickable target stays at least 24px regardless.

<bmx-radio>