Checkbox

Checkbox for toggling boolean values or selecting multiple options from a set.

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

Use VxCheckboxGroup with v-model as an array to manage multiple selections.

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

Used for "select all" patterns where some children are checked.

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

Restrict the number of selections in a group with min and 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

Use columns for a grid layout.

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	—	Checked state or array of values (v-model)
value	string | number | boolean	—	Value when used in a group
label	string	''	Label text
description	string	''	Description below label
disabled	boolean	false	Disable checkbox
readonly	boolean	false	Read-only state
loading	boolean	false	Loading state
size	'sm' | 'default' | 'lg'	'default'	Size
name	string	''	Input name attribute
bordered	boolean	false	Show border around checkbox
color	string	''	Custom check color
indeterminate	boolean	false	Show indeterminate dash

CheckboxGroup Props

Prop	Type	Default	Description
modelValue	array	[]	Selected values (v-model)
options	CheckboxOption[]	—	Options array
disabled	boolean	false	Disable all checkboxes
readonly	boolean	false	Read-only
size	'sm' | 'default' | 'lg'	'default'	Size for all checkboxes
direction	'horizontal' | 'vertical'	'vertical'	Layout direction
bordered	boolean	false	Bordered style
color	string	''	Custom color for all
name	string	''	Input name
columns	number	0	Grid columns (0 = flex)
gap	string	''	Custom gap
min	number	0	Minimum selections required
max	number	0	Maximum selections allowed

Events

Event	Type	Description
update:modelValue	(value)	Value changed
change	(value)	Value changed

Slots

Slot	Description
default	Custom label content
description	Custom description

CheckboxOption Interface

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