Radio

Radio button for single selection from a list of options.

AppleBananaCherry

apple

<script setup>
const value = ref('apple')
</script>

<template>
  <VxRadioGroup v-model="value">
    <VxRadio value="apple" label="Apple" />
    <VxRadio value="banana" label="Banana" />
    <VxRadio value="cherry" label="Cherry" />
  </VxRadioGroup>
</template>

Options Prop

Pass options as an array instead of individual radio components.

AppleBananaCherryDragonfruit

apple

<script setup>
const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Dragonfruit', value: 'dragonfruit', disabled: true },
]
</script>

<template>
  <VxRadioGroup v-model="value" :options="options" />
</template>

Horizontal

SmallMediumLarge

medium

<template>
  <VxRadioGroup v-model="value" direction="horizontal">
    <VxRadio value="small" label="Small" />
    <VxRadio value="medium" label="Medium" />
    <VxRadio value="large" label="Large" />
  </VxRadioGroup>
</template>

With Description

FreeUp to 3 projectsProUnlimited projects, priority supportEnterpriseCustom solutions, dedicated manager

card

<script setup>
const plans = [
  { label: 'Free', value: 'free', description: 'Up to 3 projects' },
  { label: 'Pro', value: 'pro', description: 'Unlimited projects' },
  { label: 'Enterprise', value: 'enterprise', description: 'Custom solutions' },
]
</script>

<template>
  <VxRadioGroup v-model="value" :options="plans" />
</template>

Shipping Example

Standard5-7 business daysExpress2-3 business daysOvernightNext business day

standard

<template>
  <VxRadioGroup v-model="value" :options="shipping" />
</template>

Sizes

sm

YesNo

default

YesNo

lg

YesNo

<template>
  <VxRadioGroup size="sm">...</VxRadioGroup>
  <VxRadioGroup>...</VxRadioGroup>
  <VxRadioGroup size="lg">...</VxRadioGroup>
</template>

Disabled

EmailPhoneSMS

<template>
  <VxRadioGroup v-model="value" disabled>...</VxRadioGroup>
</template>

Individual Disabled

MonthlyYearlyLifetime

monthly

<template>
  <VxRadioGroup v-model="value">
    <VxRadio value="monthly" label="Monthly" />
    <VxRadio value="lifetime" label="Lifetime" disabled />
  </VxRadioGroup>
</template>

Custom Content

Email Phone

email

<template>
  <VxRadioGroup v-model="value" direction="horizontal">
    <VxRadio value="email"><MailIcon /> Email</VxRadio>
    <VxRadio value="phone"><PhoneIcon /> Phone</VxRadio>
  </VxRadioGroup>
</template>

Bordered Radio

Card-style radio with border, highlighted when selected.

Default

Option AOption B

Large

Option AOption B

Small

Option AOption B

Disabled

Option AOption B

<template>
  <VxRadioGroup v-model="value" direction="horizontal" bordered>
    <VxRadio value="a" label="Option A" />
    <VxRadio value="b" label="Option B" />
  </VxRadioGroup>
</template>

Bordered with Description

FreeUp to 3 projects, basic featuresProUnlimited projects, priority supportEnterpriseCustom solutions, dedicated manager

a

<template>
  <VxRadioGroup v-model="value" bordered>
    <VxRadio value="free" label="Free" description="Up to 3 projects" />
    <VxRadio value="pro" label="Pro" description="Unlimited projects" />
  </VxRadioGroup>
</template>

Bordered Horizontal

Monthly$9/moYearly$89/yrLifetime$299 once

<template>
  <VxRadioGroup v-model="value" direction="horizontal" bordered>
    <VxRadio value="monthly" label="Monthly" description="$9/mo" />
    <VxRadio value="yearly" label="Yearly" description="$89/yr" />
  </VxRadioGroup>
</template>

Radio Buttons

Button-style radio with connected borders, like a segmented control.

left

<template>
  <VxRadioButtonGroup v-model="value">
    <VxRadioButton value="left">Left</VxRadioButton>
    <VxRadioButton value="center">Center</VxRadioButton>
    <VxRadioButton value="right">Right</VxRadioButton>
  </VxRadioButtonGroup>
</template>

Button Group with Options

monthly

<script setup>
const options = [
  { label: 'Monthly', value: 'monthly' },
  { label: 'Yearly', value: 'yearly' },
  { label: 'Lifetime', value: 'lifetime', disabled: true },
]
</script>

<template>
  <VxRadioButtonGroup v-model="value" :options="options" />
</template>

Button Group with Icons

list

<template>
  <VxRadioButtonGroup v-model="value">
    <VxRadioButton value="grid"><GridIcon /></VxRadioButton>
    <VxRadioButton value="list"><ListIcon /></VxRadioButton>
  </VxRadioButtonGroup>
</template>

Button Sizes

<template>
  <VxRadioButtonGroup size="sm">...</VxRadioButtonGroup>
  <VxRadioButtonGroup>...</VxRadioButtonGroup>
  <VxRadioButtonGroup size="lg">...</VxRadioButtonGroup>
</template>

Custom Button Style

Use button-class and button-style on the group to change height, border-radius, etc.

Pill shape, tall

Square, compact

Rounded 8px

<template>
  <!-- Pill -->
  <VxRadioButtonGroup :button-style="{ height: '44px', borderRadius: '22px', padding: '0 24px' }">
    ...
  </VxRadioButtonGroup>

  <!-- Square -->
  <VxRadioButtonGroup :button-style="{ height: '28px', borderRadius: '0' }">
    ...
  </VxRadioButtonGroup>

  <!-- Custom class -->
  <VxRadioButtonGroup button-class="my-custom-btn">
    ...
  </VxRadioButtonGroup>
</template>

Button Disabled

<template>
  <VxRadioButtonGroup v-model="value" disabled>...</VxRadioButtonGroup>
</template>

Custom Color

BlueGreenRed

<template>
  <VxRadioGroup color="#3b82f6">
    <VxRadio value="a" color="#22c55e" label="Custom per-item" />
  </VxRadioGroup>
</template>

Card Variant

Full clickable card style with highlighted background.

Free$0/mo — 3 projectsPro$19/mo — UnlimitedTeam$49/mo — 10 seats

pro

<template>
  <VxRadioGroup v-model="value" variant="card" direction="horizontal">
    <VxRadio value="free" label="Free" description="$0/mo" />
    <VxRadio value="pro" label="Pro" description="$19/mo" />
  </VxRadioGroup>
</template>

List Variant

List style with dividers between items.

Email notificationsSMS notificationsPush notificationsNo notifications

email

<template>
  <VxRadioGroup v-model="value" variant="list">
    <VxRadio value="email" label="Email" />
    <VxRadio value="sms" label="SMS" />
  </VxRadioGroup>
</template>

Grid Columns

Option AOption BOption COption DOption EOption F

a

<template>
  <VxRadioGroup v-model="value" :columns="3" bordered gap="8px">
    ...
  </VxRadioGroup>
</template>

Block Buttons (Full Width)

<template>
  <VxRadioButtonGroup v-model="value" block>...</VxRadioButtonGroup>
</template>

Equal Width Buttons

<template>
  <VxRadioButtonGroup v-model="value" equal>...</VxRadioButtonGroup>
</template>

Readonly

Shows selected value but prevents changing.

SelectedOther

<template>
  <VxRadioGroup v-model="value" readonly>...</VxRadioGroup>
</template>

Loading

Spinner on the checked radio.

Processing...Done

<template>
  <VxRadio value="processing" label="Processing..." loading />
</template>

VxRadio Props

Prop	Type	Default	Description
modelValue	string | number | boolean	—	Bound value (v-model, or inherited from group)
value	string | number | boolean	—	This radio's value
label	string	''	Label text
description	string	''	Description below label
disabled	boolean	false	Disable
readonly	boolean	false	Show but prevent change
size	'sm' | 'default' | 'lg'	'default'	Size
name	string	''	Input name attribute
bordered	boolean	false	Card border style
color	string	''	Custom checked color
loading	boolean	false	Show spinner when checked

VxRadioGroup Props

Prop	Type	Default	Description
modelValue	string | number | boolean	—	Selected value (v-model)
options	RadioOption[]	—	Options array
disabled	boolean	false	Disable all
readonly	boolean	false	Read only
size	'sm' | 'default' | 'lg'	'default'	Size
direction	'horizontal' | 'vertical'	'vertical'	Layout
variant	'default' | 'card' | 'list'	'default'	Visual variant
bordered	boolean	false	Border style
color	string	''	Custom checked color
columns	number	0	Grid columns (0=flex)
gap	string	''	Custom gap
block	boolean	false	Full-width children
equal	boolean	false	Equal-width children
required	boolean	false	aria-required
name	string	''	Input name

Events

Component	Event	Description
VxRadioGroup	update:modelValue	Selection changed
VxRadioGroup	change	Selection changed

Slots

Component	Slot	Description
VxRadio	default	Custom label content
VxRadio	description	Custom description