Radio

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.

label radio 1

radio 2

radio 3

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.

label radio 1

radio 2

radio 3

message text

success radio 1

radio 2

radio 3

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.

label radio 1

radio 2

radio 3

message text

disabled radio 1

radio 2

radio 3

disabled message

error radio 1

radio 2

radio 3

error message

success radio 1

radio 2

radio 3

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.

label radio 1

radio 2

radio 3

message text

disabled radio 1

radio 2

radio 3

disabled message

error radio 1

radio 2

radio 3

error message

success radio 1

radio 2

radio 3

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.

label radio 1

radio 2

radio 3

message text

disabled radio 1

radio 2

radio 3

disabled message

error radio 1

radio 2

radio 3

error message

success radio 1

radio 2

radio 3

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.

label radio 1

radio 2

radio 3

message text

disabled radio 1

radio 2

radio 3

disabled message

error radio 1

radio 2

radio 3

error message

success radio 1

radio 2

radio 3

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

Name	Types	Description
`change`	`InputEvent`	occurs when the value changes

Properties

Name	Types	Description
`value`	`string \| number \| FormData \| File`	Defines the value of the radio button for form submission when selected
`checked`	`boolean`	Controls the checked state of the radio button
`indeterminate`	`boolean`	Controls the indeterminate state of the radio button for mixed selection states
`disabled`	`boolean`	determines if element is mutable or focusable
`required`	`boolean`	indicates that the user must specify a value for the input before the owning form can be submitted
`readonly`	`boolean`	makes the element not mutable, meaning the user can not edit the control
`multiple`	`boolean`	determines he form control accepts one or more values
`autocomplete`	`string`	provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
`type`	`string`	string specifying the type of control to render
`formNoValidate`	`boolean`	determines if the form control is novalidate
`name`	`string`	represents the name of the current element as a string.
`pattern`	`string`	regular expression the form control's value should match
`placeholder`	`string`	defines a short hint to help the user with data entry when a form control has no value
`minLength`	`number`	defines minimum number of characters
`maxLength`	`number`	defines maximum number of characters
`min`	`number`	defines the most negative value in the range of permitted values
`max`	`number`	defines the greatest value in the range of permitted values
`size`	`number`	determines number of characters
`formAssociated`	`boolean`
`valueAsNumber`
`composedLabel`
`focus`
`reset`

Attributes

Name	Types	Description
`value`	`string \| number \| FormData \| File`	Defines the value of the radio button for form submission when selected
`checked`	`boolean`	Controls the checked state of the radio button
`indeterminate`	`boolean`	Controls the indeterminate state of the radio button for mixed selection states
`disabled`	`boolean`	determines if element is mutable or focusable
`required`	`boolean`	indicates that the user must specify a value for the input before the owning form can be submitted
`readonly`	`boolean`	makes the element not mutable, meaning the user can not edit the control
`multiple`	`boolean`	determines he form control accepts one or more values
`autocomplete`	`string`	provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
`type`	`string`	string specifying the type of control to render
`formNoValidate`	`boolean`	determines if the form control is novalidate
`pattern`	`string`	regular expression the form control's value should match
`placeholder`	`string`	defines a short hint to help the user with data entry when a form control has no value
`minLength`	`number`	defines minimum number of characters
`maxLength`	`number`	defines maximum number of characters
`min`	`number`	defines the most negative value in the range of permitted values
`max`	`number`	defines the greatest value in the range of permitted values
`size`	`number`	determines number of characters