Radio API Reference

Props

Prop	Type	Default	Description
size	String	'sm'	Visual size of the control. Options: 'xs', 'sm', 'md', 'lg', 'xl'.
disabled	Boolean	false	Prevents user interaction and lowers opacity.
readonly	Boolean	false	Blocks value changes while keeping the normal appearance.
toggle	Boolean	false	Allows deselecting the radio when it’s already selected.
label	String	''	Text shown next to the radio when not using the label slot.
value	String / Number / Boolean	Required	Primitive emitted when this option is selected.
multiple	Boolean	false	Treats the selection as an array, allowing checkbox-like behavior.
modelValue	String / Number / Boolean / Array	'' or []	Bound value (use v-model). Defaults to an empty string (single) or empty array (multiple).
selected	String / Number / Boolean / Array	'' or []	Secondary controlled value, used when modelValue isn’t provided.
valueComparator	Function	(a, b, multiple) => multiple ? Array.isArray(a) && a.includes(b) : a === b	Comparison helper for complex values.
variant	String	'default'	Applies themed styles such as 'default' or 'success'.

Events

Event	Payload	Description
update:modelValue	newValue	Fires whenever the selection changes.
change	(newValue, toggledValue, event)	Emits alongside update:modelValue with the clicked value and DOM event.

Slots

Slot	Props	Description
icon	{ isChecked }	Replace the default circle indicator.
label	{ isChecked }	Replace the inline label content.

Example Usage

Basic Single Selection

<template>
  <ORadio
    v-model="contactMethod"
    label="Email updates"
    value="email"
  />
</template>

<script setup>
import { ref } from 'vue';
import { ORadio } from 'your-component-library';

const contactMethod = ref('email');
</script>

Multiple Selection & Toggle

<template>
  <div class="toppings">
    <ORadio
      v-for="option in toppingOptions"
      :key="option.value"
      v-model="selectedToppings"
      :label="option.label"
      :value="option.value"
      :multiple="true"
      :toggle="true"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ORadio } from 'your-component-library';

const toppingOptions = [
  { label: 'Cheese', value: 'cheese' },
  { label: 'Pepperoni', value: 'pepperoni' },
  { label: 'Mushrooms', value: 'mushrooms' },
];

const selectedToppings = ref(['cheese']);
</script>