lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubIntegrationsAngularVueReactDemosFoundationThemesTypographyIconsPopoversInternationalizationStandaloneDrag and DropPopoversKeyboard NavigationVirtual ListLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupAvatarBadgeBreadcrumbButtonButton CopyButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat BytesFormat DatetimeFormat NumberFormat Relative TimeFormat TokenFormsForm InteractionsForm ValidationHeaderIconInputMenuMonthNavNumberPagePaginationPanelPasswordPinProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectSkeletonStepperSwitchTabsTagTelephoneTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVClipboardColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow GroupsVirtual List

Use the radio input component when you want the user to select a single option from a list of mutually exclusive options.

Example

Enables single selection from a group of mutually exclusive options.

message text
code
<bp-fieldset>
  <label>label</label>

  <label>radio 1</label>
  <bp-radio value="1" checked></bp-radio>

  <label>radio 2</label>
  <bp-radio value="2"></bp-radio>

  <label>radio 3</label>
  <bp-radio value="3"></bp-radio>

  <bp-field-message>message text</bp-field-message>
</bp-fieldset>
<script type="module">
  const fieldset = document.querySelector('bp-fieldset');
  const radios = Array.from(fieldset.querySelectorAll('bp-radio'));
  fieldset.addEventListener('change', () => console.log(radios.find((r) => r.checked).value));
</script>

Vertical Group

Demonstrates radio groups in vertical form layout.

message text success message
code
<bp-form-group layout="vertical">
  <bp-fieldset layout="vertical">
    <label>label</label>

    <label>radio 1</label>
    <bp-radio value="1" checked></bp-radio>

    <label>radio 2</label>
    <bp-radio value="2"></bp-radio>

    <label>radio 3</label>
    <bp-radio value="3"></bp-radio>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="vertical" status="success">
    <label>success</label>

    <label>radio 1</label>
    <bp-radio checked></bp-radio>

    <label>radio 2</label>
    <bp-radio></bp-radio>

    <label>radio 3</label>
    <bp-radio></bp-radio>

    <bp-field-message status="success">success message</bp-field-message>
  </bp-fieldset>
</bp-form-group>
<script type="module">
  document.querySelector('bp-form-group').addEventListener('change', (e) => console.log(e.target));
</script>

Vertical Inline Group

Demonstrates radio groups in vertical inline form layout.

message text disabled message error message success message
code
<bp-form-group layout="vertical-inline">
  <bp-fieldset layout="vertical-inline">
    <label>label</label>

    <label>radio 1</label>
    <bp-radio checked></bp-radio>

    <label>radio 2</label>
    <bp-radio></bp-radio>

    <label>radio 3</label>
    <bp-radio></bp-radio>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="vertical-inline" disabled>
    <label>disabled</label>

    <label>radio 1</label>
    <bp-radio checked disabled></bp-radio>

    <label>radio 2</label>
    <bp-radio disabled></bp-radio>

    <label>radio 3</label>
    <bp-radio disabled></bp-radio>

    <bp-field-message>disabled message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="vertical-inline" status="error">
    <label>error</label>

    <label>radio 1</label>
    <bp-radio checked></bp-radio>

    <label>radio 2</label>
    <bp-radio></bp-radio>

    <label>radio 3</label>
    <bp-radio></bp-radio>

    <bp-field-message status="error">error message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="vertical-inline" status="success">
    <label>success</label>

    <label>radio 1</label>
    <bp-radio checked></bp-radio>

    <label>radio 2</label>
    <bp-radio></bp-radio>

    <label>radio 3</label>
    <bp-radio></bp-radio>

    <bp-field-message status="success">success message</bp-field-message>
  </bp-fieldset>
</bp-form-group>

Horizontal Group

Demonstrates radio groups in horizontal form layout.

message text disabled message error message success message
code
<bp-form-group layout="horizontal">
  <bp-fieldset layout="horizontal">
    <label>label</label>

    <label>radio 1</label>
    <bp-radio checked></bp-radio>

    <label>radio 2</label>
    <bp-radio></bp-radio>

    <label>radio 3</label>
    <bp-radio></bp-radio>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="horizontal" disabled>
    <label>disabled</label>

    <label>radio 1</label>
    <bp-radio checked disabled></bp-radio>

    <label>radio 2</label>
    <bp-radio disabled></bp-radio>

    <label>radio 3</label>
    <bp-radio disabled></bp-radio>

    <bp-field-message>disabled message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="horizontal" status="error">
    <label>error</label>

    <label>radio 1</label>
    <bp-radio checked></bp-radio>

    <label>radio 2</label>
    <bp-radio></bp-radio>

    <label>radio 3</label>
    <bp-radio></bp-radio>

    <bp-field-message status="error">error message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="horizontal" status="success">
    <label>success</label>

    <label>radio 1</label>
    <bp-radio checked></bp-radio>

    <label>radio 2</label>
    <bp-radio></bp-radio>

    <label>radio 3</label>
    <bp-radio></bp-radio>

    <bp-field-message status="success">success message</bp-field-message>
  </bp-fieldset>
</bp-form-group>

Horizontal Inline Group

Demonstrates radio groups in horizontal inline form layout.

message text disabled message error message success message
code
<bp-form-group layout="horizontal-inline">
  <bp-fieldset layout="horizontal-inline">
    <label>label</label>

    <label>radio 1</label>
    <bp-radio checked></bp-radio>

    <label>radio 2</label>
    <bp-radio></bp-radio>

    <label>radio 3</label>
    <bp-radio></bp-radio>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="horizontal-inline">
    <label>disabled</label>

    <label>radio 1</label>
    <bp-radio checked disabled></bp-radio>

    <label>radio 2</label>
    <bp-radio disabled></bp-radio>

    <label>radio 3</label>
    <bp-radio disabled></bp-radio>

    <bp-field-message>disabled message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="horizontal-inline" status="error">
    <label>error</label>

    <label>radio 1</label>
    <bp-radio checked></bp-radio>

    <label>radio 2</label>
    <bp-radio></bp-radio>

    <label>radio 3</label>
    <bp-radio></bp-radio>

    <bp-field-message status="error">error message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="horizontal-inline" status="success">
    <label>success</label>

    <label>radio 1</label>
    <bp-radio checked></bp-radio>

    <label>radio 2</label>
    <bp-radio></bp-radio>

    <label>radio 3</label>
    <bp-radio></bp-radio>

    <bp-field-message status="success">success message</bp-field-message>
  </bp-fieldset>
</bp-form-group>

Compact Group

Demonstrates radio groups in compact form layout.

message text disabled message error message success message
code
<bp-form-group layout="compact">
  <bp-fieldset layout="compact">
    <label>label</label>

    <label>radio 1</label>
    <bp-radio checked></bp-radio>

    <label>radio 2</label>
    <bp-radio></bp-radio>

    <label>radio 3</label>
    <bp-radio></bp-radio>

    <bp-field-message>message text</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="compact" disabled>
    <label>disabled</label>

    <label>radio 1</label>
    <bp-radio checked disabled></bp-radio>

    <label>radio 2</label>
    <bp-radio disabled></bp-radio>

    <label>radio 3</label>
    <bp-radio disabled></bp-radio>

    <bp-field-message>disabled message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="compact" status="error">
    <label>error</label>

    <label>radio 1</label>
    <bp-radio checked></bp-radio>

    <label>radio 2</label>
    <bp-radio></bp-radio>

    <label>radio 3</label>
    <bp-radio></bp-radio>

    <bp-field-message status="error">error message</bp-field-message>
  </bp-fieldset>

  <bp-fieldset layout="compact" status="success">
    <label>success</label>

    <label>radio 1</label>
    <bp-radio checked></bp-radio>

    <label>radio 2</label>
    <bp-radio></bp-radio>

    <label>radio 3</label>
    <bp-radio></bp-radio>

    <bp-field-message status="success">success message</bp-field-message>
  </bp-fieldset>
</bp-form-group>

Install

NPM

// npm package
import '@blueprintui/components/include/radio.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/radio.js/+esm';
</script>

Accessibility

  • Ensure that each radio input option has a unique label
  • Use clear and concise labels to ensure that the purpose and options of the radio input component are easily understood by screen reader users.
  • Provide alternative text for the radio input component as a whole using the aria-label attribute if necessary.

bp-radio

Events

NameTypesDescription
changeInputEventoccurs when the value changes

Properties

NameTypesDescription