Radio

Native radios for choosing one option from many.

Bootstrap’s radio docs describe the markup and CSS.

Example

Add bsRadio to an <input type="radio">.

HTML

<input type="radio" bsRadio aria-label="Example radio" />

With form field

Put each radio in a bsFormField. Bind radios of a group to the same form control, or give them the same name.

Size

small

medium

large

Value: medium

<fieldset class="form-group">
  <legend class="form-label">Size</legend>
  @for (option of ['small', 'medium', 'large']; track option) {
    <div bsFormField>
      <input type="radio" bsRadio [value]="option" [formControl]="size" />
      <label bsLabel class="text-capitalize">{{ option }}</label>
    </div>
  }
</fieldset>
<p class="mt-2 mb-0">
  Value: <code>{{ size.value }}</code>
</p>

Description

Put the label and a bsFormText in a .form-field-content.

Example radioSupporting description for the above label.

HTML

<div bsFormField>
  <input type="radio" bsRadio />
  <div class="form-field-content">
    <label bsLabel class="fw-medium">Example radio</label>
    <small bsFormText>Supporting description for the above label.</small>
  </div>
</div>

Theme colors

Set theme to color the checked radio.

<div class="vstack gap-2">
  @for (theme of themes; track theme) {
    <div bsFormField>
      <input type="radio" bsRadio [name]="`radio-${theme}`" [theme]="theme" checked />
      <label bsLabel>Example {{ theme }} radio</label>
    </div>
  }
</div>

Disabled

Disabled radios and their labels are shown lighter.

Disabled radio

Disabled checked radio

HTML

<div class="vstack gap-2">
  <div bsFormField>
    <input type="radio" bsRadio name="radioDisabled" disabled />
    <label bsLabel>Disabled radio</label>
  </div>
  <div bsFormField>
    <input type="radio" bsRadio name="radioDisabledChecked" checked disabled />
    <label bsLabel>Disabled checked radio</label>
  </div>
</div>

Sizes

Set size to sm or lg.

Small radio

Default radio

Large radio

HTML

<div class="vstack gap-3">
  <div bsFormField>
    <input type="radio" bsRadio name="radioSizeSm" size="sm" checked />
    <label bsLabel>Small radio</label>
  </div>
  <div bsFormField>
    <input type="radio" bsRadio name="radioSizeMd" checked />
    <label bsLabel>Default radio</label>
  </div>
  <div bsFormField>
    <input type="radio" bsRadio name="radioSizeLg" size="lg" checked />
    <label bsLabel>Large radio</label>
  </div>
</div>

API

BsRadio

Selector: input[type=radio][bsRadio] · Exported as: bsRadio

Inputs

Name	Type	Default	Description
`theme`	`BsTheme \| null`	`null`	Theme color of the checked radio.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the radio.
`id`	`string`	`generated`	Element id. Generated when not set, and used for the field’s label.
`validation`	`'auto' \| 'valid' \| 'invalid' \| 'none'`	`'auto'`	Validation styles. auto follows the bound Angular form control.