Checkbox

A group of options for multiple choices.

Basic usage

Checkbox can be used alone to switch between two states.

Option 1

Controlled

Control whether the check box is selected use v-model (model-value) attribute.

Option 1(v-model) Option 2(Binding Constants) Option 3(Bind Variable)

Disabled

Disabled state for checkbox.

Option 1 Option 2

Checkbox group

It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.

Indeterminate

The indeterminate property can help you to achieve a `check all` effect.

Check All

Option 1Option 2Option 3Option 4

Minimum / Maximum items checked

The min and max properties can help you to limit the number of checked items.

Minimum 1, maximum 3

Option 1Option 2Option 3Option 4

Checkbox group styles

Checkbox with button / border style.

Button Style

Option 1 Option 2 Option 3

Border Style

Option 1 Option 2 Option 3

Sizes

Besides default size, tu-checkbox-group component provides three additional sizes for you to choose among different scenarios. Use attribute size to set additional sizes with mini, small, large.

<template>
  <tu-row>
    <tu-col :span="8">
      <p>mini</p>
      <tu-checkbox-group v-model="checked1" size="mini">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
      <p>small</p>
      <tu-checkbox-group v-model="checked1" size="small">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
      <p>medium</p>
      <tu-checkbox-group v-model="checked1">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
      <p>large</p>
      <tu-checkbox-group v-model="checked1" size="large">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
    </tu-col>
    <tu-col :span="8">
      <p>mini</p>
      <tu-checkbox-group v-model="checked2" size="mini" type="button">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
      <p>small</p>
      <tu-checkbox-group v-model="checked2" size="small" type="button">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
      <p>medium</p>
      <tu-checkbox-group v-model="checked2" type="button">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
      <p>large</p>
      <tu-checkbox-group v-model="checked2" size="large" type="button">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
    </tu-col>
    <tu-col :span="8">
      <p>mini</p>
      <tu-checkbox-group v-model="checked3" size="mini" type="border">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
      <p>small</p>
      <tu-checkbox-group v-model="checked3" size="small" type="border">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
      <p>medium</p>
      <tu-checkbox-group v-model="checked3" type="border">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
      <p>large</p>
      <tu-checkbox-group v-model="checked3" size="large" type="border">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
    </tu-col>
  </tu-row>
</template>

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

const checked1 = ref([]);
const checked2 = ref([]);
const checked3 = ref([]);
</script>

<template>
  <tu-row>
    <tu-col :span="8">
      <p>mini</p>
      <tu-checkbox-group v-model="checked1" size="mini">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
      <p>small</p>
      <tu-checkbox-group v-model="checked1" size="small">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
      <p>medium</p>
      <tu-checkbox-group v-model="checked1">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
      <p>large</p>
      <tu-checkbox-group v-model="checked1" size="large">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
    </tu-col>
    <tu-col :span="8">
      <p>mini</p>
      <tu-checkbox-group v-model="checked2" size="mini" type="button">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
      <p>small</p>
      <tu-checkbox-group v-model="checked2" size="small" type="button">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
      <p>medium</p>
      <tu-checkbox-group v-model="checked2" type="button">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
      <p>large</p>
      <tu-checkbox-group v-model="checked2" size="large" type="button">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
    </tu-col>
    <tu-col :span="8">
      <p>mini</p>
      <tu-checkbox-group v-model="checked3" size="mini" type="border">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
      <p>small</p>
      <tu-checkbox-group v-model="checked3" size="small" type="border">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
      <p>medium</p>
      <tu-checkbox-group v-model="checked3" type="border">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
      <p>large</p>
      <tu-checkbox-group v-model="checked3" size="large" type="border">
        <tu-checkbox :label="1"> Option 1</tu-checkbox>
        <tu-checkbox :label="2"> Option 2</tu-checkbox>
      </tu-checkbox-group>
    </tu-col>
  </tu-row>
</template>

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

const checked1 = ref([]);
const checked2 = ref([]);
const checked3 = ref([]);
</script>

Checkbox API

Checkbox Attributes

Name	Description	Type	Default
v-model	Binding value	`String` `Number` `Boolean`	-
label	Value of the Checkbox when used inside a checkbox-group	`String` `Number` `Boolean` `Object`	-
true-label	Value of the Checkbox if it's checked	`String` `Number`	-
false-label	Value of the Checkbox if it's not checked	`String` `Number`	-
disabled	Whether the Checkbox is disabled	`Boolean`	false
type	Checkbox type	`String`	-
size	Checkbox size	`String`	medium
name	Native 'name' attribute	`String`	-
checked	If the Checkbox is checked	`Boolean`	false
indeterminate	Set indeterminate state, only responsible for style control	`Boolean`	false
validate-event	Whether to trigger form validation	`Boolean`	true
tabindex	Input tabindex	`String` `Number`	-
id	Input id	`String`	-
controls	Same as aria-controls, takes effect when indeterminate is true	`Boolean`	-

Checkbox Events

Name	Description	Type
change	Triggers when the binding value changes	`Function`

Checkbox Slots

Name	Description
default	Customize default content

CheckboxGroup API

CheckboxGroup Attributes

Name	Description	Type	Default
v-model	Binding value	`Object`	-
label	Label for screen reader	`String`	-
type	CheckboxGroup type	`String`	-
size	CheckboxGroup size	`String`	medium
disabled	Whether the nesting checkboxes are disabled	`Boolean`	false
min	Minimum number of checkbox checked	`Number`	-
max	Maximum number of checkbox checked	`Number`	-
text-color	Font color when button is active	`String`	-
tag	Element tag of the checkbox group	`String`	div
validate-event	Whether to trigger form validation	`Boolean`	true

CheckboxGroup Events

Name	Description	Type
change	Triggers when the binding value changes	`Function`

CheckboxGroup Slots

Name	Description	Type
default	Customize default content	Checkbox

Checkbox ​

Basic usage ​

Controlled ​

Disabled ​

Checkbox group ​

Indeterminate ​

Minimum / Maximum items checked ​

Checkbox group styles ​

Sizes ​

Checkbox API ​

Checkbox Attributes ​

Checkbox Events ​

Checkbox Slots ​

CheckboxGroup API ​

CheckboxGroup Attributes ​

CheckboxGroup Events ​

CheckboxGroup Slots ​