Vue Bootstrap Radio Component

Radio with Bootstrap Styling

Bootstrap 5 components designed for Vue.js

This component is part of the CoreUI for Vue.js UI components library, which offers all Bootstrap components designed to work seamlessly with Vue.js.

If you want to use Bootstrap 5 in a Vue.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.

Learn how to build consistent, accessible, and customizable radio buttons using CoreUI’s Vue components styled with Bootstrap.

On this page

How to use Vue Bootstrap Radio component

Use CoreUI’s <CRadio> component to create Bootstrap-styled radio buttons for selecting one option from many. These components are built to be accessible, customizable, and responsive.

Default stacked radios

By default, multiple radio buttons rendered as siblings will be stacked vertically with proper spacing.

vue

<template>
  <CFormField>
    <CRadio id="flexRadioDefault1" name="flexRadioDefault" label="Default radio" />
  </CFormField>
  <CFormField>
    <CRadio id="flexRadioDefault2" name="flexRadioDefault" label="Default checked radio" checked />
  </CFormField>
</template>

<script setup>
import { CFormField, CRadio } from '@coreui/vue'
</script>

Disabled state

Add the disabled prop to disable a radio button. The associated label will also receive a muted style to reflect its state.

vue

<template>
  <CFormField>
    <CRadio id="flexRadioDisabled" name="flexRadioDisabled" label="Disabled radio" disabled />
  </CFormField>
  <CFormField>
    <CRadio
      id="flexRadioCheckedDisabled"
      name="flexRadioDisabled"
      label="Disabled checked radio"
      checked
      disabled
    />
  </CFormField>
</template>

<script setup>
import { CFormField, CRadio } from '@coreui/vue'
</script>

Inline radios

Display radio buttons in a horizontal row with a flex utility wrapper.

vue

<template>
  <div class="d-flex gap-4">
    <CFormField>
      <CRadio id="inlineRadio1" name="inlineRadioOptions" value="option1" label="1" />
    </CFormField>
    <CFormField>
      <CRadio id="inlineRadio2" name="inlineRadioOptions" value="option2" label="2" />
    </CFormField>
    <CFormField>
      <CRadio
        id="inlineRadio3"
        name="inlineRadioOptions"
        value="option3"
        label="3 (disabled)"
        disabled
      />
    </CFormField>
  </div>
</template>

<script setup>
import { CFormField, CRadio } from '@coreui/vue'
</script>

Reverse layout

The reverse layout exists only on the deprecated <CFormCheck> — its reverse property places the control after the label.

vue

<template>
  <CFormCheck id="reverseOption1" reverse type="radio" value="option1" label="Reverse radio" />
  <CFormCheck
    id="reverseOption2"
    reverse
    type="radio"
    value="option2"
    label="Disabled reverse radio"
    disabled
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
</script>

Radios without labels

You can omit visual labels, but make sure to provide accessible names using aria-label for screen readers.

vue

<template>
  <CRadio id="radioNoLabel1" name="radioNoLabel" value="" aria-label="..." />
</template>

<script setup>
import { CRadio } from '@coreui/vue'
</script>

Radio toggle buttons

Turn your radios into button-like toggles using the button prop. These can also be grouped using a button group component.

vue

<template>
  <CFormCheck id="radioNoLabel" type="radio" name="radioNoLabel" value="" aria-label="..." />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
</script>

Outlined toggle styles

You can apply outlined styles to toggle radios using Bootstrap’s button variant system.

vue

<template>
  <CFormCheck
    id="option1"
    :button="{ color: 'secondary' }"
    type="radio"
    name="options"
    autocomplete="off"
    label="Checked"
    checked
  />
  <CFormCheck
    id="option2"
    :button="{ color: 'secondary' }"
    type="radio"
    name="options"
    autocomplete="off"
    label="Radio"
  />
  <CFormCheck
    id="option3"
    :button="{ color: 'secondary' }"
    type="radio"
    name="options"
    autocomplete="off"
    label="Radio"
    disabled
  />
  <CFormCheck
    id="option4"
    :button="{ color: 'secondary' }"
    type="radio"
    name="options"
    autocomplete="off"
    label="Radio"
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
</script>

API reference

Refer to the API documentation below for a complete list of props supported by the Vue Bootstrap radio component.