Vue Bootstrap Checks & radios Component

Checks & radios 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 use CoreUI’s Vue Checks & radios component with Bootstrap styles for flexible, framework-consistent UI.

On this page

Approach

Browser default radios are replaced with the help of <CFormCheck radio>. Radios are for selecting one option from many.

Radios

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

vue

<template>
  <CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault1" label="Default radio" />
  <CFormCheck
    type="radio"
    name="flexRadioDefault"
    id="flexRadioDefault2"
    label="Checked radio"
    checked
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const picked = ref('Four')
</script>

vModel

vue

<template>
  <CFormCheck type="radio" id="flexRadioVModel1" inline label="One" value="One" v-model="picked" />
  <CFormCheck type="radio" id="flexRadioVModel2" inline label="Two" value="Two" v-model="picked" />
  <CFormCheck
    type="radio"
    id="flexRadioVModel3"
    inline
    label="Three"
    value="Three"
    v-model="picked"
  />
  <CFormCheck
    type="radio"
    id="flexRadioVModel4"
    inline
    label="Four"
    value="Four"
    v-model="picked"
  />
  <CFormCheck
    type="radio"
    id="flexRadioVModel5"
    inline
    label="Five"
    value="Five"
    v-model="picked"
  />
  <div>Picked: {{ picked }}</div>
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const picked = ref('Four')
</script>

Disabled

vue

<template>
  <CFormCheck
    type="radio"
    name="flexRadioDisabled"
    id="flexRadioDisabled"
    label="Disabled radio"
    disabled
  />
  <CFormCheck
    type="radio"
    name="flexRadioDisabled"
    id="flexRadioCheckedDisabled"
    label="Disabled checked radio"
    checked
    disabled
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const picked = ref('Four')
</script>

Default (stacked)

By default, any number of radios that are immediate sibling will be vertically stacked and appropriately spaced.

vue

<template>
  <CFormCheck
    type="radio"
    name="exampleRadios"
    id="exampleRadios1"
    value="option1"
    label="Default radio"
    checked
  />
  <CFormCheck
    type="radio"
    name="exampleRadios"
    id="exampleRadios2"
    value="option2"
    label="Second default radio"
  />
  <CFormCheck
    type="radio"
    name="exampleRadios"
    id="exampleRadios3"
    value="option3"
    label="Disabled radio"
    disabled
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const picked = ref('Four')
</script>

Inline

Group radios on the same horizontal row by adding inline boolean property to any <CFormCheck>.

vue

<template>
  <CFormCheck
    inline
    type="radio"
    name="inlineRadioOptions"
    id="inlineCheckbox1"
    value="option1"
    label="1"
  />
  <CFormCheck
    inline
    type="radio"
    name="inlineRadioOptions"
    id="inlineCheckbox2"
    value="option2"
    label="2"
  />
  <CFormCheck
    inline
    type="radio"
    name="inlineRadioOptions"
    id="inlineCheckbox3"
    value="option3"
    label="3 (disabled)"
    disabled
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const picked = ref('Four')
</script>

Reverse

Put your radios on the opposite side by adding reverse boolean property.

vue

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

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const picked = ref('Four')
</script>

Without labels

Remember to still provide some form of accessible name for assistive technologies (for instance, using aria-label).

vue

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

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const picked = ref('Four')
</script>

Toggle buttons

Create button-like radio buttons by using button boolean property on the <CFormCheck> component. These toggle buttons can further be grouped in a button group if needed.

vue

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

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const picked = ref('Four')
</script>

Outlined styles

Different variants of button, such at the various outlined styles, are supported.

vue

<template>
  <CFormCheck
    :button="{ color: 'success', variant: 'outline' }"
    type="radio"
    name="options-outlined"
    id="success-outlined"
    autocomplete="off"
    label="Radio"
    checked
  />
  <CFormCheck
    :button="{ color: 'danger', variant: 'outline' }"
    type="radio"
    name="options-outlined"
    id="danger-outlined"
    autocomplete="off"
    label="Radio"
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const picked = ref('Four')
</script>