Checkbox

Boolean qiymatlarni almashtirish yoki to'plamdan bir nechta variantni tanlash uchun checkbox.

Accept termsSubscribed

<script setup lang="ts">
import { ref } from 'vue'
import { VxCheckbox } from 'veloxui'

const accepted = ref(false)
</script>

<template>
  <VxCheckbox v-model="accepted" label="Accept terms" />
</template>

With Description

Marketing emailsReceive updates about new products and featuresSecurity alertsGet notified about security issues

<script setup lang="ts">
import { ref } from 'vue'

const marketing = ref(false)
const security = ref(true)
</script>

<template>
  <VxCheckbox
    v-model="marketing"
    label="Marketing emails"
    description="Receive updates about new products and features"
  />
  <VxCheckbox
    v-model="security"
    label="Security alerts"
    description="Get notified about security issues"
  />
</template>

Checkbox Group

Bir nechta tanlovlarni boshqarish uchun v-model ni massiv sifatida VxCheckboxGroup bilan ishlating.

AppleBananaCherryGrape

Selected: [ "apple", "banana" ]

<script setup lang="ts">
import { ref } from 'vue'
import { VxCheckboxGroup } from 'veloxui'

const fruits = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Cherry', value: 'cherry', disabled: true },
  { label: 'Grape', value: 'grape' },
]
const selected = ref(['apple', 'banana'])
</script>

<template>
  <VxCheckboxGroup v-model="selected" :options="fruits" />
</template>

Group with Descriptions

ReactA JavaScript library for building UIsVueThe Progressive JavaScript FrameworkAngularPlatform for building mobile & desktop appsSvelteCybernetically enhanced web apps

<script setup lang="ts">
import { ref } from 'vue'

const frameworks = [
  { label: 'React', value: 'react', description: 'A JavaScript library for building UIs' },
  { label: 'Vue', value: 'vue', description: 'The Progressive JavaScript Framework' },
  { label: 'Angular', value: 'angular', description: 'Platform for building mobile & desktop apps' },
]
const selected = ref(['react'])
</script>

<template>
  <VxCheckboxGroup v-model="selected" :options="frameworks" />
</template>

Horizontal Direction

AppleBananaCherryGrape

<script setup lang="ts">
import { ref } from 'vue'

const selected = ref(['a', 'b'])
</script>

<template>
  <VxCheckboxGroup v-model="selected" :options="fruits" direction="horizontal" />
</template>

Bordered

AppleBananaCherryGrape

<script setup lang="ts">
import { ref } from 'vue'

const selected = ref([])
</script>

<template>
  <VxCheckboxGroup v-model="selected" :options="fruits" direction="horizontal" bordered />
</template>

Sizes

SmallDefaultLarge

<template>
  <VxCheckbox label="Small" size="sm" />
  <VxCheckbox label="Default" />
  <VxCheckbox label="Large" size="lg" />
</template>

Indeterminate

Ba'zi bolalari belgilangan "barchasini tanlash" naqshlari uchun ishlatiladi.

Select all (some selected)

<script setup lang="ts">
import { ref, computed } from 'vue'

const items = ['A', 'B', 'C', 'D']
const selected = ref(['A', 'C'])

const allChecked = computed(() => selected.value.length === items.length)
const indeterminate = computed(() => selected.value.length > 0 && !allChecked.value)

function toggleAll() {
  selected.value = allChecked.value ? [] : [...items]
}
</script>

<template>
  <VxCheckbox
    :model-value="allChecked"
    :indeterminate="indeterminate"
    label="Select all"
    @change="toggleAll"
  />
</template>

Custom Color

GreenBluePurpleRed

<template>
  <VxCheckbox :model-value="true" label="Green" color="#22c55e" />
  <VxCheckbox :model-value="true" label="Blue" color="#3b82f6" />
  <VxCheckbox :model-value="true" label="Purple" color="#8b5cf6" />
</template>

Min / Max Selection

Guruhdagi tanlovlar sonini min va max bilan cheklang.

Node.jsPythonGoRust

Min 1, Max 2. Selected: [ "node" ]

<script setup lang="ts">
import { ref } from 'vue'

const selected = ref(['node'])
</script>

<template>
  <VxCheckboxGroup
    v-model="selected"
    :options="options"
    :min="1"
    :max="2"
    direction="horizontal"
  />
</template>

Grid Layout

Grid layout uchun columns dan foydalaning.

Extra SmallSmallMediumLargeExtra Large2XL

<script setup lang="ts">
import { ref } from 'vue'

const sizes = ref(['sm'])
</script>

<template>
  <VxCheckboxGroup
    v-model="sizes"
    :options="options"
    :columns="3"
    gap="10px"
    bordered
  />
</template>

Disabled & Readonly

Disabled checkedDisabled uncheckedReadonly

<template>
  <VxCheckbox :model-value="true" label="Disabled" disabled />
  <VxCheckbox :model-value="true" label="Readonly" readonly />
</template>

Checkbox Props

Prop	Type	Default	Description
modelValue	boolean | array	—	Belgilangan holat yoki qiymatlar massivi (v-model)
value	string | number | boolean	—	Guruhda ishlatilganda qiymat
label	string	''	Yorliq matni
description	string	''	Yorliq ostidagi tavsif
disabled	boolean	false	Checkbox ni o'chirish
readonly	boolean	false	Faqat o'qish uchun holat
loading	boolean	false	Yuklash holati
size	'sm' | 'default' | 'lg'	'default'	O'lcham
name	string	''	Input ning name atributi
bordered	boolean	false	Checkbox atrofida chegarani ko'rsatish
color	string	''	Moslashtirilgan belgi rangi
indeterminate	boolean	false	Noaniq chiziqchani ko'rsatish

CheckboxGroup Props

Prop	Type	Default	Description
modelValue	array	[]	Tanlangan qiymatlar (v-model)
options	CheckboxOption[]	—	Variantlar massivi
disabled	boolean	false	Barcha checkbox larni o'chirish
readonly	boolean	false	Faqat o'qish uchun
size	'sm' | 'default' | 'lg'	'default'	Barcha checkbox lar uchun o'lcham
direction	'horizontal' | 'vertical'	'vertical'	Layout yo'nalishi
bordered	boolean	false	Chegarali uslub
color	string	''	Hammasi uchun moslashtirilgan rang
name	string	''	Input nomi
columns	number	0	Grid ustunlari (0 = flex)
gap	string	''	Moslashtirilgan oraliq
min	number	0	Talab qilinadigan minimal tanlovlar
max	number	0	Ruxsat etilgan maksimal tanlovlar

Events

Event	Type	Description
update:modelValue	(value)	Qiymat o'zgardi
change	(value)	Qiymat o'zgardi

Slots

Slot	Description
default	Moslashtirilgan yorliq mazmuni
description	Moslashtirilgan tavsif

CheckboxOption Interface

interface CheckboxOption {
  label: string
  value: string | number | boolean
  disabled?: boolean
  description?: string
}