Logo

Individual radios

<div>
  <b-form-group label="Individual radios">
    <b-form-radio v-model="selected" name="some-radios" value="A">Option A</b-form-radio>
    <b-form-radio v-model="selected" name="some-radios" value="B">Option B</b-form-radio>
  </b-form-group>

  <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
</div>
Individual radios
Selected:

Grouped radios

<div>
  <b-form-group label="Radios using options">
    <b-form-radio-group
      id="radio-group-1"
      v-model="selected"
      :options="options"
      name="radio-options"
    ></b-form-radio-group>
  </b-form-group>

  <b-form-group label="Radios using sub-components">
    <b-form-radio-group id="radio-group-2" v-model="selected" name="radio-sub-component">
      <b-form-radio value="first">Toggle this custom radio</b-form-radio>
      <b-form-radio value="second">Or toggle this other custom radio</b-form-radio>
      <b-form-radio value="third" disabled>This one is Disabled</b-form-radio>
      <b-form-radio :value="{ fourth: 4 }">This is the (fourth: 4) object radio</b-form-radio>
    </b-form-radio-group>
  </b-form-group>

  <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
</div>

The individual radio inputs in <b-form-radio-group> can be specified via the options prop, or via manual placement of the <b-form-radio> sub component. When using manually placed <b-form-radio> components within a <b-form-radio-group>, they will inherit most props and the v-model from the <b-form-radio-group>

Radios using options
Selected: first
Radios using sub-components
Selected: first

Inline or stacked radios

By default <b-form-radio-group> generates inline radio inputs, while <b-form-radio> generates stacked radios. Set the prop stacked on <b-form-radio-group> to make the radios appear one over the other, or when using radios not in a group, set the inline prop on b-form-radio to true to render them inline

Inline radios (default)
Selected: first
Stacked radios
Selected: first

Control sizing

<div>
  <b-form-radio name="radio-size" size="sm">Small</b-form-radio>
  <b-form-radio name="radio-size">Default</b-form-radio>
  <b-form-radio name="radio-size" size="lg">Large</b-form-radio>
</div>

Use the size prop to control the size of the radio. The default size is medium. Supported size values are sm (small) and lg (large).

Button style radios

Render radios with the look of buttons by setting the prop buttons to true on <b-form-radio-group>. Set the button variant by setting the button-variant prop to one of the standard Bootstrap button variants (see <b-button> for supported variants). The default button-variant is secondary.

Button style radios
Button style radios with outline-primary variant and size lg
Stacked button style radios