Skip to content

Radio ​

The bq-radio component is a radio button form control with label and hint text.

Basic Usage ​

html
<bq-radio name="color" value="red" label="Red"></bq-radio>
<bq-radio name="color" value="blue" label="Blue"></bq-radio>
<bq-radio name="color" value="green" label="Green"></bq-radio>

Checked ​

html
<bq-radio name="plan" value="pro" label="Pro plan" checked></bq-radio>

With Hint ​

html
<bq-radio
  name="plan"
  value="enterprise"
  label="Enterprise"
  hint="For large teams with advanced needs."
></bq-radio>

Disabled ​

html
<bq-radio name="plan" value="legacy" label="Legacy" disabled></bq-radio>

Required ​

html
<bq-radio name="plan" value="pro" label="Pro plan" required></bq-radio>

Properties ​

PropertyTypeDefaultDescription
labelstring—Visible label text
namestring—Radio group name
valuestring—Radio value
checkedbooleanfalseWhether the radio is selected
disabledbooleanfalseDisables the radio
requiredbooleanfalseMarks the radio as required
hintstring—Helper text below the label

Events ​

EventDetailDescription
bq-change{ value: string, checked: boolean }Fired when the selection changes

CSS Parts ​

PartDescription
wrapperThe outer wrapper
controlThe radio control area
inputThe native radio input
labelLabel text element
hintHint text element

Form Participation ​

The component creates a hidden input proxy for native <form> submission. The proxy carries the name and value when checked.

Accessibility ​

  • Each radio renders a native <input type="radio"> inside the shadow DOM for full keyboard support.
  • Radios sharing a name behave as one group. Because each radio lives in its own shadow root, the platform's "one checked per name" rule cannot see the siblings, so the component clears them itself — scoped to the nearest <form> so two unrelated groups on one page do not interfere.
  • The label is associated with the input via a wrapping <label> element.
  • Use the required prop to mark mandatory radio fields; the required indicator is rendered visually and conveyed through the native required attribute on the internal radio input.

Released under the MIT License.