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 \| number \| FormData \| File`	determines initial value of the control
`checked`	`boolean`	determines whether element is checked
`indeterminate`	`boolean`
`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
`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`	determines initial value of the control
`checked`	`boolean`	determines whether element is checked
`indeterminate`	`boolean`
`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
`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