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

Используйте VxCheckboxGroup с v-model в виде массива для управления множественным выбором.

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

Используется для шаблонов "выбрать всё", когда часть дочерних элементов отмечена.

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

Ограничьте количество выбранных элементов в группе через min и max.

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

Используйте columns для сеточной разметки.

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	—	Состояние отметки или массив значений (v-model)
value	string | number | boolean	—	Значение при использовании в группе
label	string	''	Текст метки
description	string	''	Описание под меткой
disabled	boolean	false	Отключить чекбокс
readonly	boolean	false	Состояние только для чтения
loading	boolean	false	Состояние загрузки
size	'sm' | 'default' | 'lg'	'default'	Размер
name	string	''	Атрибут name для input
bordered	boolean	false	Показывать рамку вокруг чекбокса
color	string	''	Кастомный цвет отметки
indeterminate	boolean	false	Показывать индикатор неопределённости (тире)

CheckboxGroup Props

Prop	Type	Default	Description
modelValue	array	[]	Выбранные значения (v-model)
options	CheckboxOption[]	—	Массив опций
disabled	boolean	false	Отключить все чекбоксы
readonly	boolean	false	Только для чтения
size	'sm' | 'default' | 'lg'	'default'	Размер для всех чекбоксов
direction	'horizontal' | 'vertical'	'vertical'	Направление расположения
bordered	boolean	false	Стиль с рамкой
color	string	''	Кастомный цвет для всех
name	string	''	Имя input
columns	number	0	Колонки сетки (0 = flex)
gap	string	''	Кастомный gap
min	number	0	Минимум обязательных выборов
max	number	0	Максимум допустимых выборов

Events

Event	Type	Description
update:modelValue	(value)	Значение изменено
change	(value)	Значение изменено

Slots

Slot	Description
default	Кастомное содержимое метки
description	Кастомное описание

CheckboxOption Interface

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