Radio

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

Example

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

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

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

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

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

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 \| FormData`
`checked`	`boolean`
`indeterminate`	`boolean`
`disabled`	`boolean`
`required`	`boolean`
`readonly`	`boolean \| undefined`
`multiple`	`boolean`
`autocomplete`	`string`
`type`	`string`
`name`	`string`
`pattern`	`string`
`placeholder`	`string`
`minLength`	`number`
`maxLength`	`number`
`min`	`number`
`max`	`number`
`size`	`number`
`valueAsNumber`
`formAssociated`	`boolean`

Attributes

Name	Types	Description
`value`	`string \| FormData`
`checked`	`boolean`
`indeterminate`	`boolean`
`disabled`	`boolean`
`required`	`boolean`
`readonly`	`boolean \| undefined`
`multiple`	`boolean`
`autocomplete`	`string`
`type`	`string`
`name`	`string`
`pattern`	`string`
`placeholder`	`string`
`minLength`	`number`
`maxLength`	`number`
`min`	`number`
`max`	`number`
`size`	`number`