Form Radio

For cross browser consistency, BFormRadioGroup and BFormRadio uses Bootstrap's custom radio input to replace the browser default radio input. It is built on top of semantic and accessible markup, so it is a solid replacement for the default radio input.

View Source Edit this page on GitHub

Individual radios

Option A

Option B

Selected:

HTML

vue

<template>
  <div class="my-2">
    <label>Individual radios</label>
  </div>

  <div>
    <BFormRadio
      v-model="selected"
      name="some-radios"
      value="A"
      >Option A
    </BFormRadio>
    <BFormRadio
      v-model="selected"
      name="some-radios"
      value="B"
      >Option B
    </BFormRadio>
  </div>

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

<script setup lang="ts">
import {ref} from 'vue'

const selected = ref()
</script>

Grouped radios

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

Radios using options

Toggle this custom radio

Or toggle this other custom radio

This one is Disabled

This is the 4th radio

Radios using sub-components

Toggle this custom radio

Or toggle this other custom radio

This one is Disabled

This is the 4th radio

Selected: first

HTML

vue

<template>
  <div class="my-2">
    <label>Radios using options</label>
  </div>

  <div>
    <BFormRadioGroup
      id="radio-group-1"
      v-model="selected"
      :options="options"
      name="radio-options"
    />
  </div>

  <div class="my-2">
    <label>Radios using sub-components</label>
  </div>

  <div>
    <BFormRadioGroup
      id="radio-group-2"
      v-model="selected"
      name="radio-sub-component"
    >
      <BFormRadio value="first">Toggle this custom radio</BFormRadio>
      <BFormRadio value="second">Or toggle this other custom radio</BFormRadio>
      <BFormRadio
        value="third"
        disabled
        >This one is Disabled</BFormRadio
      >
      <BFormRadio :value="{fourth: 4}">This is the 4th radio</BFormRadio>
    </BFormRadioGroup>
  </div>

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

<script setup lang="ts">
import {ref} from 'vue'

const options = [
  {text: 'Toggle this custom radio', value: 'first'},
  {text: 'Or toggle this other custom radio', value: 'second'},
  {text: 'This one is Disabled', value: 'third', disabled: true},
  {text: 'This is the 4th radio', value: {fourth: 4}},
]

const selected = ref('first')
</script>

Feel free to mix and match options prop and BFormRadio in BFormRadioGroup. Manually placed BFormRadio inputs will appear below any radio inputs generated by the options prop. To have them appear above the inputs generated by options, place them in the named slot first.

Radios using options and slots

Selected: first

HTML

vue

<template>
  <div class="my-2">
    <label>Radios using options and slots</label>
  </div>

  <div>
    <BFormRadioGroup
      id="radio-slots"
      v-model="selected"
      :options="options"
      name="radio-options-slots"
    >
      <template #first>
        <BFormRadio value="first">Toggle this custom radio from slot first</BFormRadio>
      </template>

      <BFormRadio :value="{fourth: 4}">This is the 4th radio</BFormRadio>
      <BFormRadio value="fifth">This is the 5th radio</BFormRadio>
    </BFormRadioGroup>
  </div>

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

<script setup lang="ts">
import {ref} from 'vue'

const options = [
  {text: 'Or toggle this other custom radio', value: 'second'},
  {text: 'Third radio', value: 'third'},
]

const selected = ref('first')
</script>

Options property

options can be an array of strings or objects, or a key-value object. Available fields:

value The selected value which will be set on v-model
disabled Disables item for selection
text Display text

value can be a string, number, or simple object. Avoid using complex types in values.

NOTE

The BootstrapVue field html on the options object has been deprecated. See our Migration Guide for details.

Options as an array

const options = ['A', 'B', 'C', {text: 'D', value: {d: 1}, disabled: true}, 'E', 'F']

If an array entry is a string, it will be used for both the generated value and text fields.

You can mix using strings and objects in the array.

Internally, BootstrapVueNext will convert the above array to the following array (the array of objects) format:

const options = [
  {text: 'A', value: 'A', disabled: false},
  {text: 'B', value: 'B', disabled: false},
  {text: 'C', value: 'C', disabled: false},
  {text: 'D', value: {d: 1}, disabled: true},
  {text: 'E', value: 'E', disabled: false},
  {text: 'F', value: 'F', disabled: false},
]

Options as an array of objects

const options = [
  {text: 'Item 1', value: 'first'},
  {text: 'Item 2', value: 'second'},
  {text: 'Item 3', value: 'third', disabled: true},
  {text: 'Item 4'},
  {text: 'Item 5', value: {foo: 'bar', baz: true}},
]

If value is missing, then text will be used as both the value and text fields.

Internally, BootstrapVueNext will convert the above array to the following array (the array of objects) format:

const options = [
  {text: 'Item 1', value: 'first', disabled: false},
  {text: 'Item 2', value: 'second', disabled: false},
  {text: 'Item 3', value: 'third', disabled: true},
  {text: 'Item 4', value: 'Item 4', disabled: false},
  {text: 'Item 5', value: 'E', disabled: false},
]

Changing the option field names

If you want to customize the field property names (for example using name field for display text) you can easily change them by setting the text-field, value-field, and disabled-field props to a string that contains the property name you would like to use:

Option A

Option B

Option C

Option D

Selected: A

HTML

vue

<template>
  <BFormRadioGroup
    v-model="selected"
    :options="options"
    class="mb-3"
    value-field="item"
    text-field="name"
    disabled-field="notEnabled"
  />

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

<script setup lang="ts">
import {ref} from 'vue'

const selected = ref('A')

const options = [
  {item: 'A', name: 'Option A'},
  {item: 'B', name: 'Option B'},
  {item: 'D', name: 'Option C', notEnabled: true},
  {item: {d: 1}, name: 'Option D'},
]
</script>

Radio value and v-model

BFormRadio components do not have a value by default. You must explicitly supply a value via the value prop on BFormRadio. This value will be sent to the v-model when the radio is checked.

The v-model of both BFormRadio and BFormRadioGroup binds to the default modelValue prop. To pre-check a radio, you must set the v-model value to the one of the radio's value (i.e. must match the value of specified on one of the radio's value prop). Each radio in a radio group must have a unique value.

Radios support values of many types, such as a string, boolean, number, or a plain object.

Inline or stacked radios

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

Inline radios (default)

First radio

Second radio

Third radio

Stacked radios

First radio

Second radio

Third radio

Selected: first

HTML

vue

<template>
  <div class="my-2">
    <label>Inline radios (default)</label>
  </div>

  <div>
    <BFormRadioGroup
      v-model="selected"
      :options="options"
      name="radio-inline"
    />
  </div>

  <div class="my-2">
    <label>Stacked radios</label>
  </div>

  <div>
    <BFormRadioGroup
      v-model="selected"
      :options="options"
      name="radio-stacked"
      stacked
    />
  </div>

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

<script setup lang="ts">
import {ref} from 'vue'

const options = [
  {text: 'First radio', value: 'first'},
  {text: 'Second radio', value: 'second'},
  {text: 'Third radio', value: 'third'},
]

const selected = ref('first')
</script>

Control sizing

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).

Small

Default

Large

HTML

template

<BFormRadio
  name="radio-size"
  size="sm"
  >Small</BFormRadio
>
<BFormRadio name="radio-size">Default</BFormRadio>
<BFormRadio
  name="radio-size"
  size="lg"
  >Large</BFormRadio
>

Sizes can be set on individual BFormRadio components, or inherited from the size setting of BFormRadioGroup.

NOTE

Bootstrap v5.x does not natively support sizes for the custom radio control. However, bootstrap-vue-next includes custom SCSS/CSS that adds support for sizing the custom radios.

Button style radios

Render radios with the look of buttons by setting the prop buttons to true on BFormRadioGroup. Set the button variant by setting the button-variant prop to one of the standard Bootstrap button variants (see BButton for supported variants). The default button-variant is secondary.

The buttons prop has precedence over plain, and button-variant has no effect if buttons is not set.

Button style radios will have the class .active automatically applied to their label when they are in the checked state.

Button style radios

Radio 1Radio 3Radio 3 (disabled)Radio 4

Button style radios with outline-primary variant and size lg

Radio 1Radio 3Radio 3 (disabled)Radio 4

Stacked button style radios

Radio 1Radio 3Radio 3 (disabled)Radio 4

Selected: radio1

HTML

vue

<template>
  <div class="my-2">
    <label>Button style radios</label>
  </div>

  <div>
    <BFormRadioGroup
      v-model="selected"
      :options="options"
      name="radios-btn-default"
      buttons
    />
  </div>

  <div class="my-2">
    <label>Button style radios with outline-primary variant and size lg</label>
  </div>

  <div>
    <BFormRadioGroup
      v-model="selected"
      :options="options"
      button-variant="outline-primary"
      size="lg"
      name="radios-btn-outline"
      buttons
    />
  </div>

  <div class="my-2">
    <label>Stacked button style radios</label>
  </div>

  <div>
    <BFormRadioGroup
      v-model="selected"
      :options="options"
      name="radios-btn-stacked"
      buttons
      stacked
    />
  </div>

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

<script setup lang="ts">
import {ref} from 'vue'

const options = [
  {text: 'Radio 1', value: 'radio1'},
  {text: 'Radio 3', value: 'radio2'},
  {text: 'Radio 3 (disabled)', value: 'radio3', disabled: true},
  {text: 'Radio 4', value: 'radio4'},
]

const selected = ref('radio1')
</script>

Reverse

Use the reverse prop to put your radio buttons on the opposite side of the label.

Reverse checkbox

Disabled reverse checkbox

HTML

template

<BFormRadio reverse>Reverse checkbox</BFormRadio>
<BFormRadio
  reverse
  disabled
  >Disabled reverse checkbox</BFormRadio
>

Without Labels

In order to omit labels as described in the bootstrap documentation just leave the default slot empty. Remember to still provide some form of accessible name for assistive technologies (for instance, using aria-label).

HTML

template

<BFormRadio />
<BFormRadio disabled />

Non-custom style radio inputs (plain)

You can have BFormRadio and BFormRadioGroup render a browser native-styled radio input by setting the plain prop.

Plain inline radios

First radio

Second radio

Third radio

Plain stacked radios

First radio

Second radio

Third radio

Selected: first

HTML

vue

<template>
  <div class="my-2">
    <label>Plain inline radios</label>
  </div>

  <div>
    <BFormRadioGroup
      v-model="selected"
      :options="plainOptions"
      name="plain-inline"
      plain
    />
  </div>

  <div class="my-2">
    <label>Plain stacked radios</label>
  </div>

  <div>
    <BFormRadioGroup
      v-model="selected"
      :options="plainOptions"
      name="plain-stacked"
      plain
    />
  </div>

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

<script setup lang="ts">
import {ref} from 'vue'

const plainOptions = [
  {text: 'First radio', value: 'first'},
  {text: 'Second radio', value: 'second'},
  {text: 'Third radio', value: 'third'},
]

const selected = ref('first')
</script>

NOTE

plain will have no effect if buttons/button is set.

Required constraint

When using individual BFormRadio components (not in a BFormRadioGroup), and you want the radio(s) to be required in your form, you must provide a name on each BFormRadio in order for the required constraint to work. All BFormRadio components tied to the same v-model must have the same name.

The name is required in order for Assistive Technologies (such as screen readers, and keyboard only users) to know which radios belong to the same form variable (the name also automatically enables native browser keyboard navigation), hence required will only work if name is set. BFormRadioGroup will automatically generate a unique input name if one is not provided on the group.

Autofocus

When the autofocus prop is set on BFormRadio, the input will be auto-focused when it is inserted (i.e. mounted) into the document or re-activated when inside a Vue KeepAlive component. Note that this prop does not set the autofocus attribute on the input, nor can it tell when the input becomes visible.

Contextual states

Bootstrap includes validation styles for valid and invalid states on most form controls.

Generally speaking, you'll want to use a particular state for specific types of feedback:

false (denotes invalid state) is great for when there is a blocking or required field. A user must fill in this field properly to submit the form
true (denotes valid state) is ideal for situations when you have per-field validation throughout a form and want to encourage a user through the rest of the fields
null Displays no validation state (neither valid nor invalid)

To apply one of the contextual state icons on BFormRadio, set the state prop to false (for invalid), true (for valid), or null (no validation state).

NOTE

Contextual state is not supported for radios rendered in buttons mode.

Contextual state with feedback example

First radio

Second radio

Third radio

Please select one

HTML

vue

<template>
  <BFormRadioGroup
    v-model="selected"
    :options="contextualOptions"
    :state="state"
    name="radio-validation"
  />

  <div
    v-if="!state"
    class="text-danger"
  >
    Please select one
  </div>
  <div
    v-if="state"
    class="text-success"
  >
    Thank you
  </div>
</template>

<script setup lang="ts">
import {computed, ref} from 'vue'

const contextualOptions = [
  {text: 'First radio', value: 'first'},
  {text: 'Second radio', value: 'second'},
  {text: 'Third radio', value: 'third'},
]

const selected = ref()

const state = computed(() => !!selected.value)
</script>

Conveying contextual validation state to assistive technologies and colorblind users

Using these contextual states to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.

Ensure that an alternative indication of state is also provided. For instance, you could include a hint about state in the form control's <label> text itself, or by providing an additional help text block (i.e. BFormInvalidFeedback). Specifically for assistive technologies, invalid form controls can also be assigned an aria-invalid="true" attribute (see below).

ARIA `aria-invalid` attribute

When BFormRadioGroup has an invalid contextual state (i.e. state = false) you may also want to set the BFormRadioGroup prop aria-invalid to true.

Supported aria-invalid values are:

false (default) No errors detected
true The value has failed validation

aria-invalid is automatically set to true if the state prop is false.

TypeScript Type Safety

BFormRadioGroup provides full TypeScript type safety through generic type parameters. When you provide typed options, TypeScript will:

Validate field names - Ensure value-field, text-field, and disabled-field props reference actual keys of your option type
Infer v-model type - Automatically determine the correct type for v-model based on your value-field

Basic Type-Safe Usage

Alice

Bob

Charlie

Selected User ID: 1

HTML

vue

<template>
  <BFormRadioGroup
    v-model="selectedUserId"
    :options="users"
    value-field="id"
    text-field="name"
  />
  <p class="mt-2">Selected User ID: {{ selectedUserId }}</p>
</template>

<script setup lang="ts">
import {ref} from 'vue'

interface User {
  id: number
  name: string
  email: string
}

const users: User[] = [
  {id: 1, name: 'Alice', email: 'alice@example.com'},
  {id: 2, name: 'Bob', email: 'bob@example.com'},
  {id: 3, name: 'Charlie', email: 'charlie@example.com'},
]

// TypeScript infers that selectedUserId is of type: number
const selectedUserId = ref<number>(1)
</script>

In this example, TypeScript knows that selectedUserId is a number because the id field of User is typed as number.

Type-Safe Field Validation

TypeScript will catch errors when you use invalid field names:

Valid field names (autocompleted by IDE):

Alice

Bob

Charlie

Selected: 1

HTML

vue

<template>
  <div>
    <h5>Valid field names (autocompleted by IDE):</h5>
    <BFormRadioGroup
      v-model="selectedUserId"
      :options="users"
      value-field="id"
      text-field="name"
      disabled-field="inactive"
    />
    <p class="mt-2">Selected: {{ selectedUserId }}</p>

    <!-- Uncommenting this will show TypeScript errors: -->
    <!--
    <h5 class="mt-3">Invalid field names (TypeScript errors):</h5>
    <BFormRadioGroup
      v-model="selected"
      :options="users"
      value-field="userId"
      text-field="fullName"
      disabled-field="isDisabled"
    />
    TypeScript errors:
    - 'userId' doesn't exist on User (should be 'id')
    - 'fullName' doesn't exist on User (should be 'name')
    - 'isDisabled' doesn't exist on User (should be 'inactive')
    -->
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'

interface User {
  id: number
  name: string
  email: string
  inactive: boolean
}

const users: User[] = [
  {id: 1, name: 'Alice', email: 'alice@example.com', inactive: false},
  {id: 2, name: 'Bob', email: 'bob@example.com', inactive: false},
  {id: 3, name: 'Charlie', email: 'charlie@example.com', inactive: true},
]

const selectedUserId = ref<number>(1)
</script>

Type-Safe API Responses

Type safety is especially valuable when working with API data that uses different naming conventions:

Alice

Bob

Charlie

Selected User ID: 1

TypeScript validates snake_case field names from API

HTML

vue

<template>
  <BFormRadioGroup
    id="radio-type-safe-api"
    v-model="selectedUserId"
    :options="users"
    value-field="user_id"
    text-field="user_name"
    disabled-field="is_inactive"
  />
  <p class="mt-2">Selected User ID: {{ selectedUserId }}</p>
  <p class="text-muted small">TypeScript validates snake_case field names from API</p>
</template>

<script setup lang="ts">
import {ref} from 'vue'

interface ApiUser {
  user_id: number // API uses snake_case
  user_name: string
  user_email: string
  is_inactive: boolean
}

// In a real app, you'd fetch from API:
// onMounted(async () => {
//   const response = await fetch('/api/users')
//   users.value = await response.json()
// })

const users: ApiUser[] = [
  {user_id: 1, user_name: 'Alice', user_email: 'alice@example.com', is_inactive: false},
  {user_id: 2, user_name: 'Bob', user_email: 'bob@example.com', is_inactive: false},
  {user_id: 3, user_name: 'Charlie', user_email: 'charlie@example.com', is_inactive: true},
]

const selectedUserId = ref<number>(1)
</script>

Type-Safe Enums

Type safety works with TypeScript enums for strongly-typed value constraints:

export enum Priority {
  Low = 'low',
  Medium = 'medium',
  High = 'high',
  Critical = 'critical',
}

export interface PriorityOption {
  label: string
  value: Priority
  color: string
}

Low Priority

Medium Priority

High Priority

Critical Priority

Selected Priority: medium

v-model is constrained to Priority enum values

HTML

vue

<template>
  <BFormRadioGroup
    v-model="selectedPriority"
    :options="priorityOptions"
    value-field="value"
    text-field="label"
  />
  <p class="mt-2">
    Selected Priority: <strong>{{ selectedPriority }}</strong>
  </p>
  <p class="text-muted small">v-model is constrained to Priority enum values</p>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {Priority, type PriorityOption} from './RadioTypeSafeEnumTypes'

const priorityOptions: PriorityOption[] = [
  {label: 'Low Priority', value: Priority.Low, color: 'success'},
  {label: 'Medium Priority', value: Priority.Medium, color: 'info'},
  {label: 'High Priority', value: Priority.High, color: 'warning'},
  {label: 'Critical Priority', value: Priority.Critical, color: 'danger'},
]

// TypeScript ensures selectedPriority can only be a Priority enum value
const selectedPriority = ref<Priority>(Priority.Medium)
</script>

Benefits

IDE autocomplete - Your editor suggests valid field names as you type
Compile-time validation - Typos and invalid field names are caught before runtime
Type inference - The v-model type is automatically inferred from your value field
Refactoring safety - Renaming fields in your interface updates all usages

Backward Compatibility

Type safety is completely opt-in and maintains 100% backward compatibility. Existing code without explicit types continues to work exactly as before:

vue

<!-- Works without type annotations -->
<ComponentName v-model="selected" :options="items" />

To enable type safety, simply provide explicit types for your data:

typescript

interface MyItem {
  id: number
  name: string
}

const items: MyItem[] = [...]

Global Defaults Limitation

Due to technical limitations with TypeScript generic components, this component cannot fully participate in the global defaults system provided by createBootstrap({ components: {...} }) or BApp. However:

✅ Commonly-customized props like buttonVariant, size, and state DO support global defaults
⚠️ Other props will use their hardcoded default values only
✅ You can still override any prop on individual component instances

This trade-off enables full type safety with IDE autocomplete and compile-time validation.

Props That Support Global Defaults

The following props support both component-specific defaults and global defaults:

button-variant - Button variant for button-style checkboxes/radios (default: 'secondary')
size - Size of the checkbox/radio (default: 'md')
state - Validation state (default: null)

Default Value Precedence

When using these components, default values are resolved in this order (highest priority first):

Explicit prop on component instance - Value you provide directly
Component-specific defaults - Set via <BApp :defaults="{ BFormCheckboxGroup: {...} }"> or createBootstrap({ components: { BFormCheckboxGroup: {...} } })
Global defaults - Set via <BApp :defaults="{ global: {...} }"> or createBootstrap({ components: { global: {...} } })
Hardcoded default - Component's built-in fallback value

Example:

BApp Pattern:

template

<template>
  <BApp
    :defaults="{
      global: {
        buttonVariant: 'primary', // Applied to all components
        size: 'lg',
      },
      BFormCheckboxGroup: {
        buttonVariant: 'danger', // Specific to checkbox groups
        size: 'sm',
      },
    }"
  >
    <!-- Uses component defaults: danger variant, sm size -->
    <BFormCheckboxGroup
      :options="options"
      buttons
    />

    <!-- Explicit prop overrides everything: success variant -->
    <BFormCheckboxGroup
      :options="options"
      buttons
      button-variant="success"
    />

    <!-- Individual checkboxes outside a group use global defaults: primary variant -->
    <BFormCheckbox
      button
      value="a"
      >Option A</BFormCheckbox
    >
  </BApp>
</template>

<script setup lang="ts">
const options = [
  {text: 'Option 1', value: 1},
  {text: 'Option 2', value: 2},
]
</script>

Plugin Pattern:

template

// In main.ts or app setup:
import {createBootstrap} from 'bootstrap-vue-next'

app.use(
  createBootstrap({
    components: {
      global: {
        buttonVariant: 'primary', // Applied to all components
        size: 'lg',
      },
      BFormCheckboxGroup: {
        buttonVariant: 'danger', // Specific to checkbox groups
        size: 'sm',
      },
    },
  })
)

TIP

When checkboxes or radios are used within their group component (BFormCheckboxGroup or BFormRadioGroup), the group's defaults automatically cascade to all child checkboxes/radios. You don't need to set defaults on individual BFormCheckbox or BFormRadio components.

// This WILL work for buttonVariant, size, and state:
createBootstrap({
  components: {
    BFormRadioGroup: {
      buttonVariant: 'primary', // ✅ Will be applied
      size: 'lg', // ✅ Will be applied
      state: false, // ✅ Will be applied
      stacked: true, // ⚠️ Will NOT be applied (use prop override)
    },
    global: {
      size: 'sm', // ✅ Will be applied as fallback if BFormRadioGroup.size not set
    },
  },
})

Component Reference

`<BFormRadio>`

View Source

<BFormRadio> Properties
<BFormRadio> Events
<BFormRadio> Slots

Adding styles: input[type="radio"]

Properties

Prop	Type	Default	Description
aria-label	`string`	`undefined`	Sets the value of `aria-label` attribute on the rendered element
aria-labelledby	`string`	`undefined`	The ID of the element that provides a label for this component. Used as the value for the `aria-labelledby` attribute
autofocus	`boolean`	`false`	When set to `true`, attempts to auto-focus the control when it is mounted, or re-activated when in a keep-alive. Does not set the `autofocus` attribute on the control
button	`boolean`	`false`	When set, renders the radio button with the appearance of a button
button-group	`boolean`	`false`	When set, renders the radio button as part of a button group (it doesn't enclose the radio and label with a div). It is not necessary to set this to true if this is part of a RadioGroup as it is handled internally
button-variant	`ButtonVariant \| null`	`null`	Applies one of Bootstrap's theme colors when in `button` mode
disabled	`boolean`	`false`	When set to `true`, disables the component's functionality and places it in a disabled state
form	`string`	`undefined`	ID of the form that the form control belongs to. Sets the `form` attribute on the control
id	`string`	`undefined`	Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed
inline	`boolean`	`false`	When set, renders the radio button as an inline element rather than as a 100% width block
model-value	`RadioValue \| undefined`	`undefined`	The current value of the radio. Looking for `checked` - use `modelValue` instead.
name	`string`	`undefined`	Sets the value of the `name` attribute on the form control
plain	`boolean`	`false`	Render the form control in plain mode, rather than custom styled mode
required	`boolean`	`undefined`	Adds the `required` attribute to the form control
reverse	`boolean`	`false`	When set, renders the radio button on the opposite side
size	`Size`	`'md'`	Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'
state	`ValidationState`	`undefined`	Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state
value	`RadioValue \| undefined`	`true`	Value returned when this radio button is selected

Events

Event	Args	Description
update:model-value	`value: RadioValue` - Value of the radio button.	Emitted when the radio button value is changed

Slots

Name	Scope	Description
default		Content to place in the label of the radio button

`<BFormRadioGroup>`

View Source

<BFormRadioGroup> Properties
<BFormRadioGroup> Events
<BFormRadioGroup> Slots

Adding styles: div[role="radiogroup"]

Properties

Prop	Type	Default	Description
aria-invalid	`AriaInvalid`	`undefined`	Sets the `aria-invalid` attribute value on the wrapper element. When not provided, the `state` prop will control the attribute
autofocus	`boolean`	`false`	When set to `true`, attempts to auto-focus the control when it is mounted, or re-activated when in a keep-alive. Does not set the `autofocus` attribute on the control
button-variant	`ButtonVariant \| null`	`'secondary'`	Specifies the Bootstrap contextual color theme variant to apply to the button style radio buttons
buttons	`boolean`	`false`	When set, renders the radio buttons in this group with button styling
disabled	`boolean`	`false`	When set to `true`, disables the component's functionality and places it in a disabled state
disabled-field	`string`	`'disabled'`	Field name in the `options` array that should be used for the disabled state
form	`string`	`undefined`	ID of the form that the form control belongs to. Sets the `form` attribute on the control
id	`string`	`undefined`	Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed
model-value	`RadioValue \| undefined`	`undefined`	The current value of the checked radio in the group. Looking for `checked` - use `modelValue` instead.
name	`string`	`undefined`	Sets the value of the `name` attribute on the form control
options	`readonly CheckboxOptionRaw[]`	`'() => []'`	Array of items to render in the component
plain	`boolean`	`false`	Render the form control in plain mode, rather than custom styled mode
required	`boolean`	`undefined`	Adds the `required` attribute to the form control
reverse	`boolean`	`false`	When set, renders the radio buttons on the opposite side
size	`Size`	`'md'`	Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'
stacked	`boolean`	`false`	When set, renders the radio button group in stacked mode
state	`ValidationState`	`undefined`	Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state
text-field	`string`	`'text'`	Field name in the `options` array that should be used for the text label
validated	`boolean`	`false`	When set, adds the Bootstrap class `was-validated` to the group wrapper
value-field	`string`	`'value'`	Field name in the `options` array that should be used for the value

Events

Event	Args	Description
update:model-value	`value: RadioValue \| null` - Currently selected value of the radio group.	Emitted when the selected value(s) are changed. Looking for the `input` or `change` event - use `update:model-value` instead.

Slots

Name	Scope	Description
default		Content (form radio buttons) to place in the form radio button group
first		Slot to place for radio buttons so that they appear before radios generated from options prop
option	`value: string \| number \| undefined` - The value of the radio button `disabled: boolean \| undefined` - Whether the radio button is disabled `text: string \| undefined` - The text to display for the radio button	Use this slot to have finer control over the content rendered inside each radio button

Form Radio ​

Individual radios ​

Grouped radios ​

Options property ​

Options as an array ​

Options as an array of objects ​

Changing the option field names ​

Radio value and v-model ​

Inline or stacked radios ​

Control sizing ​

Button style radios ​

Reverse ​

Without Labels ​

Non-custom style radio inputs (plain) ​

Required constraint ​

Autofocus ​

Contextual states ​

Contextual state with feedback example ​

Conveying contextual validation state to assistive technologies and colorblind users ​

ARIA aria-invalid attribute ​

TypeScript Type Safety ​

Basic Type-Safe Usage ​

Type-Safe Field Validation ​

Valid field names (autocompleted by IDE):

Type-Safe API Responses ​

Type-Safe Enums ​

Benefits ​

Backward Compatibility ​

Global Defaults Limitation ​

Props That Support Global Defaults ​

Default Value Precedence ​

Component Reference

<BFormRadio>

Properties

Events

Slots

<BFormRadioGroup>

Properties

Events

Slots

Form Radio

Individual radios

Grouped radios

Options property

Options as an array

Options as an array of objects

Changing the option field names

Radio value and v-model

Inline or stacked radios

Control sizing

Button style radios

Reverse

Without Labels

Non-custom style radio inputs (plain)

Required constraint

Autofocus

Contextual states

Contextual state with feedback example

Conveying contextual validation state to assistive technologies and colorblind users

ARIA `aria-invalid` attribute

TypeScript Type Safety

Basic Type-Safe Usage

Type-Safe Field Validation

Type-Safe API Responses

Type-Safe Enums

Benefits

Backward Compatibility

Global Defaults Limitation

Props That Support Global Defaults

Default Value Precedence

`<BFormRadio>`

`<BFormRadioGroup>`