Radio

Variantlar roʻyxatidan bittani tanlash uchun radio tugma.

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

Alohida radio komponentlari oʻrniga variantlarni massiv sifatida uzating.

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

Chegaraga ega karta uslubidagi radio, tanlanganda ajratib koʻrsatiladi.

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

Segmented control kabi, bogʻlangan chegaralarga ega tugma uslubidagi radio.

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

Balandlik, border-radius va boshqalarni oʻzgartirish uchun guruhda button-class va button-style dan foydalaning.

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

Ajratib koʻrsatilgan fonli, toʻliq bosiladigan karta uslubi.

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

Elementlar orasida ajratkichli roʻyxat uslubi.

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

Tanlangan qiymatni koʻrsatadi, lekin oʻzgartirishning oldini oladi.

SelectedOther

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

Loading

Belgilangan radio ustida spinner.

Processing...Done

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

VxRadio Props

Prop	Type	Default	Description
modelValue	string | number | boolean	—	Bogʻlangan qiymat (v-model yoki guruhdan meros)
value	string | number | boolean	—	Ushbu radio qiymati
label	string	''	Label matni
description	string	''	Label ostidagi tavsif
disabled	boolean	false	Oʻchirish
readonly	boolean	false	Koʻrsatish, lekin oʻzgartirishga yoʻl qoʻymaslik
size	'sm' | 'default' | 'lg'	'default'	Oʻlcham
name	string	''	Input name atributi
bordered	boolean	false	Karta chegara uslubi
color	string	''	Maxsus tanlangan rang
loading	boolean	false	Belgilanganda spinner koʻrsatish

VxRadioGroup Props

Prop	Type	Default	Description
modelValue	string | number | boolean	—	Tanlangan qiymat (v-model)
options	RadioOption[]	—	Variantlar massivi
disabled	boolean	false	Hammasini oʻchirish
readonly	boolean	false	Faqat oʻqish
size	'sm' | 'default' | 'lg'	'default'	Oʻlcham
direction	'horizontal' | 'vertical'	'vertical'	Joylashuv
variant	'default' | 'card' | 'list'	'default'	Vizual variant
bordered	boolean	false	Chegara uslubi
color	string	''	Maxsus tanlangan rang
columns	number	0	Grid ustunlari (0=flex)
gap	string	''	Maxsus masofa
block	boolean	false	Farzandlarni toʻliq kenglikda
equal	boolean	false	Farzandlarni teng kenglikda
required	boolean	false	aria-required
name	string	''	Input nomi

Events

Component	Event	Description
VxRadioGroup	update:modelValue	Tanlov oʻzgardi
VxRadioGroup	change	Tanlov oʻzgardi

Slots

Component	Slot	Description
VxRadio	default	Maxsus label kontenti
VxRadio	description	Maxsus tavsif