Radio

Радиокнопка для выбора одного варианта из списка.

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

Передавайте опции массивом вместо отдельных компонентов радио.

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

Радио в виде карточки с границей, подсвеченной при выборе.

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

Радио в виде кнопок со связанными границами, как сегментированный контрол.

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

Используйте button-class и button-style на группе, чтобы изменить высоту, border-radius и т. д.

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

Полностью кликабельный вариант карточки с подсвеченным фоном.

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

Список с разделителями между элементами.

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

Показывает выбранное значение, но запрещает его изменять.

SelectedOther

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

Loading

Спиннер на отмеченной радиокнопке.

Processing...Done

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

VxRadio Props

Prop	Type	Default	Description
modelValue	string | number | boolean	—	Связанное значение (v-model или наследуется от группы)
value	string | number | boolean	—	Значение этой радиокнопки
label	string	''	Текст метки
description	string	''	Описание под меткой
disabled	boolean	false	Отключить
readonly	boolean	false	Отображать, но запретить изменение
size	'sm' | 'default' | 'lg'	'default'	Размер
name	string	''	Атрибут name инпута
bordered	boolean	false	Стиль границы карточки
color	string	''	Пользовательский цвет при выборе
loading	boolean	false	Показать спиннер при выборе

VxRadioGroup Props

Prop	Type	Default	Description
modelValue	string | number | boolean	—	Выбранное значение (v-model)
options	RadioOption[]	—	Массив опций
disabled	boolean	false	Отключить все
readonly	boolean	false	Только для чтения
size	'sm' | 'default' | 'lg'	'default'	Размер
direction	'horizontal' | 'vertical'	'vertical'	Раскладка
variant	'default' | 'card' | 'list'	'default'	Визуальный вариант
bordered	boolean	false	Стиль границы
color	string	''	Пользовательский цвет при выборе
columns	number	0	Колонок сетки (0=flex)
gap	string	''	Пользовательский отступ
block	boolean	false	Потомки на всю ширину
equal	boolean	false	Потомки одинаковой ширины
required	boolean	false	aria-required
name	string	''	Имя инпута

Events

Component	Event	Description
VxRadioGroup	update:modelValue	Выбор изменился
VxRadioGroup	change	Выбор изменился

Slots

Component	Slot	Description
VxRadio	default	Пользовательское содержимое метки
VxRadio	description	Пользовательское описание