Checkbox

A checkbox component for toggling between checked and unchecked states, with support for groups.

Name	Category	Description	Type	Default
`type`	Style	Preset theme color type	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	—
`type`	Style	Preset theme color for all child checkboxes	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	—
`size`	Size	Size	`'large' \| 'small'`	—
`size`	Size	Size for all child checkboxes	`'large' \| 'small'`	—
`color`	Color	Custom hex color	`string`	—
`color`	Color	Custom hex color for all child checkboxes	`string`	—
`disabled`	State	Whether disabled	`boolean`	`false`
`indeterminate`	State	Whether in indeterminate state	`boolean`	`false`
`disabled`	State	Whether to disable all child checkboxes	`boolean`	`false`
`name`	Behavior	Native name attribute	`string`	—
`min`	Behavior	Minimum number of checked items	`number`	—
`max`	Behavior	Maximum number of checked items	`number`	—
`model-value / v-model`	Content	Binding value (standalone mode)	`boolean`	`false`
`value`	Content	Identifier value when used inside CheckboxGroup	`string \| number \| boolean`	—
`label`	Content	Label text	`string`	—
`model-value / v-model`	Content	Binding value	`Array<string \| number \| boolean>`	`[]`
`change`	Event	Triggered when state changes	`(value: boolean) => void`	—
`change`	Event	Triggered when checked values change	`(value: CheckboxValueType[]) => void`	—
`default`	Slot	Custom label content		—
`default`	Slot	Child checkbox content		—
`focus`	Expose	Focus the checkbox	`() => void`	—
`checked`	Expose	Whether checked	`ComputedRef<boolean>`	—

Basic Usage

Bind v-model to a Boolean type variable.

<template>
  <div class="demo-checkbox">
    <px-checkbox v-model="value1" label="Option A" />
    <px-checkbox v-model="value2" label="Option B" />
  </div>
</template>

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

const value1 = ref(false);
const value2 = ref(true);
</script>

<style scoped>
.demo-checkbox {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

Disabled State

Use disabled property to disable the checkbox.

<template>
  <div class="demo-checkbox">
    <px-checkbox v-model="value1" label="Disabled unchecked" disabled />
    <px-checkbox v-model="value2" label="Disabled checked" disabled />
  </div>
</template>

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

const value1 = ref(false);
const value2 = ref(true);
</script>

<style scoped>
.demo-checkbox {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

Type

Use type property to apply preset theme colors.

<template>
  <div class="demo-checkbox">
    <px-checkbox v-model="v1" label="Primary" type="primary" />
    <px-checkbox v-model="v2" label="Success" type="success" />
    <px-checkbox v-model="v3" label="Warning" type="warning" />
    <px-checkbox v-model="v4" label="Danger" type="danger" />
    <px-checkbox v-model="v5" label="Info" type="info" />
  </div>
</template>

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

const v1 = ref(true);
const v2 = ref(true);
const v3 = ref(true);
const v4 = ref(true);
const v5 = ref(true);
</script>

<style scoped>
.demo-checkbox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
</style>

Custom Color

Use color property to set a custom hex color for the checked state.

<template>
  <div class="demo-checkbox">
    <px-checkbox v-model="v1" label="Coral" color="#ff6b6b" />
    <px-checkbox v-model="v2" label="Teal" color="#20c997" />
    <px-checkbox v-model="v3" label="Purple" color="#845ef7" />
  </div>
</template>

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

const v1 = ref(true);
const v2 = ref(true);
const v3 = ref(true);
</script>

<style scoped>
.demo-checkbox {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

Different Sizes

Use size property to set the checkbox size.

<template>
  <div class="demo-checkbox">
    <px-checkbox v-model="v1" label="Small" size="small" />
    <px-checkbox v-model="v2" label="Default" />
    <px-checkbox v-model="v3" label="Large" size="large" />
  </div>
</template>

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

const v1 = ref(true);
const v2 = ref(true);
const v3 = ref(true);
</script>

<style scoped>
.demo-checkbox {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

Checkbox Group

Use PxCheckboxGroup to manage multiple checkboxes with a single v-model array.

<template>
  <div class="demo-checkbox">
    <px-checkbox-group v-model="selected">
      <px-checkbox value="apple" label="Apple" />
      <px-checkbox value="banana" label="Banana" />
      <px-checkbox value="cherry" label="Cherry" />
      <px-checkbox value="durian" label="Durian" />
    </px-checkbox-group>
    <p class="demo-checkbox__result">Selected: {{ selected }}</p>
  </div>
</template>

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

const selected = ref(['apple', 'cherry']);
</script>

<style scoped>
.demo-checkbox {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.demo-checkbox__result {
  font-family: var(--px-font-family);
  font-size: 14px;
  color: var(--px-text-color-secondary);
}
</style>

Indeterminate

Use indeterminate property for a half-checked state. This is commonly used for "Select All" patterns.

<template>
  <div class="demo-checkbox">
    <px-checkbox
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      label="Select All"
      @change="handleCheckAllChange"
    />
    <px-checkbox-group v-model="checkedItems" @change="handleGroupChange">
      <px-checkbox value="a" label="Option A" />
      <px-checkbox value="b" label="Option B" />
      <px-checkbox value="c" label="Option C" />
    </px-checkbox-group>
  </div>
</template>

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

const allOptions = ['a', 'b', 'c'];
const checkedItems = ref(['a']);
const checkAll = ref(false);
const isIndeterminate = ref(true);

function handleCheckAllChange(val: boolean) {
  checkedItems.value = val ? [...allOptions] : [];
  isIndeterminate.value = false;
}

function handleGroupChange(val: (string | number | boolean)[]) {
  const count = val.length;
  checkAll.value = count === allOptions.length;
  isIndeterminate.value = count > 0 && count < allOptions.length;
}
</script>

<style scoped>
.demo-checkbox {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

Group with Min / Max

Use min and max properties on the group to constrain the number of checked items.

<template>
  <div class="demo-checkbox">
    <p class="demo-checkbox__tip">Min: 1, Max: 3</p>
    <px-checkbox-group v-model="selected" :min="1" :max="3">
      <px-checkbox value="a" label="Option A" />
      <px-checkbox value="b" label="Option B" />
      <px-checkbox value="c" label="Option C" />
      <px-checkbox value="d" label="Option D" />
      <px-checkbox value="e" label="Option E" />
    </px-checkbox-group>
    <p class="demo-checkbox__result">Selected: {{ selected }}</p>
  </div>
</template>

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

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

<style scoped>
.demo-checkbox {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.demo-checkbox__tip {
  font-family: var(--px-font-family);
  font-size: 14px;
  color: var(--px-text-color-secondary);
}
.demo-checkbox__result {
  font-family: var(--px-font-family);
  font-size: 14px;
  color: var(--px-text-color-secondary);
}
</style>

Checkbox ​

Basic Usage ​

Disabled State ​

Type ​

Custom Color ​

Different Sizes ​

Checkbox Group ​

Indeterminate ​

Group with Min / Max ​