Radio Component Demos

Basic Single Selection

<template>
  <div class="demo-card">
    <p class="demo-label">Preferred contact:</p>
    <ORadio
      v-for="option in contactOptions"
      :key="option.value"
      v-model="singleChoice"
      :label="option.label"
      :value="option.value"
      @change="logChange"
    />
  </div>
</template>

Preferred contact:

Email

SMS

Push

Selected: email

Plan Selector

<template>
  <div class="demo-card">
    <p class="demo-label">Choose a plan:</p>
    <ORadio
      v-for="option in planOptions"
      :key="option.value"
      v-model="planChoice"
      :label="option.label"
      :value="option.value"
      size="md"
    />
  </div>
</template>

Choose a plan:

Basic Plan

Standard Plan

Premium Plan

Selected plan: standard

Size Variants

<template>
  <div class="size-grid">
    <ORadio
      v-for="option in sizeOptions"
      :key="option.value"
      v-model="sizeChoice"
      :label="option.label"
      :value="option.value"
      :size="option.value"
    />
  </div>
</template>

XS

SM

MD

LG

XL

Multiple Selection (Checkbox Mode)

<template>
  <div class="demo-card">
    <p class="demo-label">Pizza toppings (multiple):</p>
    <ORadio
      v-for="option in toppingOptions"
      :key="option.value"
      v-model="toppings"
      :label="option.label"
      :value="option.value"
      :multiple="true"
      :toggle="true"
    />
    <p class="demo-selection">
      Selected: {{ toppings.length ? toppings.join(', ') : 'None' }}
    </p>
  </div>
</template>

Pizza toppings (multiple):

Cheese

Pepperoni

Mushrooms

Olives

Selected: cheese, pepperoni

Toggle Mode

<template>
  <div class="demo-card">
    <p class="demo-label">Newsletter frequency:</p>
    <ORadio
      label="Weekly"
      value="weekly"
      :toggle="true"
      v-model="toggleValue"
    />
    <ORadio label="Monthly" value="monthly" :toggle="true" v-model="toggleValue" />
    <ORadio label="Quarterly" value="quarterly" :toggle="true" v-model="toggleValue" />
  </div>
</template>

Newsletter frequency:

Weekly

Monthly

Quarterly

Selected: weekly

Variants & Disabled

<template>
  <div class="demo-card">
    <p class="demo-label">Variant styling:</p>
    <ORadio
      v-for="option in variantOptions"
      :key="option.value"
      v-model="variantChoice"
      :label="option.label"
      :value="option.value"
      :variant="option.value"
    />
    <ORadio label="Disabled sample" value="disabled" disabled />
  </div>
</template>

Variant styling:

Default

Success

Disabled sample

Custom Icon Slot

<template>
  <div class="demo-card">
    <p class="demo-label">How was the support experience?</p>
    <ORadio
      v-for="option in ratingOptions"
      :key="option.value"
      v-model="ratingValue"
      :value="option.value"
    >
      <template #icon="{ props }">
        <span class="rating-icon" :class="{ active: props.isChecked }">
          {{ option.label }}
        </span>
      </template>
      <template #label="{ props }">
        <span :class="{ 'rating-label': true, active: props.isChecked }">
          {{ option.value }}
        </span>
      </template>
    </ORadio>
  </div>
</template>

How was the support experience?

⭐ok⭐⭐good⭐⭐⭐great