Vue Checkbox Component API

Checkbox API

Explore the API reference for the Vue Checkbox component and discover how to effectively utilize its props for customization.

On this page

CCheckbox

jsx

import { CCheckbox } from '@coreui/vue'

Props

Property	Default	Type
id	-	`string`
The id attribute of the input. Generated automatically when a label is set.
indeterminate	-	`boolean`
Display the checkbox in an indeterminate state - there is no HTML attribute for it, only this property.
label	-	`string`
The label rendered after the input, already wired to it with `for`.
modelValue	`undefined`	`boolean`
The checked state, used with v-model.
size	-	`string`
Size the checkbox small or large.
theme	-	`Color`
Sets the color context of the checked state to one of CoreUI’s themed colors.
validationState6.0.0+	-	`string`
The validation state, rendered as the `is-{state}` class; `'invalid'` also sets `aria-invalid` and blocks the submit. Any custom state declared in the `$form-validation-states` Sass map is accepted. The user's next change of the checked state emits `update:validationState` with `undefined`.

Events

Event name
change
Event occurs when the checked value has been changed.
update:modelValue
Emit the new checked state whenever there’s a change event.
update:validationState
Event occurs with `undefined` when the user changes the checked state, or the form is reset, while `validationState` is set. A given state is a verdict on the choice it was given for; bind it with `v-model:validation-state` to drop it and let the browser's own validation show again.

CFormCheck

jsx

import { CFormCheck } from '@coreui/vue'

Props

Property	Default	Type
button	-	`object`
Create button-like checkboxes and radio buttons.
falseValue4.10.0+	-	`string`
Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `false` state.
feedback4.3.0+	-	`string`
Provide valuable, actionable feedback.
feedbackInvalid4.3.0+	-	`string`
Provide valuable, actionable feedback.
feedbackValid4.3.0+	-	`string`
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
id	-	`string`
The id global attribute defines an identifier (ID) that must be unique in the whole document.
indeterminate	-	`boolean`
Input Checkbox indeterminate Property
inline	-	`boolean`
Group checkboxes or radios on the same horizontal row by adding.
invalidDeprecated 6.0.0	-	`boolean`
Mark the control invalid. Use `validationState="invalid"` instead — `invalid` is ignored when `validationState` is set.
label	-	`string`
The element represents a caption for a component.
modelValue	-	`array`, `boolean`, `string`
The default name for a value passed using v-model.
reverse4.8.0+	-	`boolean`
Put checkboxes or radios on the opposite side.
theme6.0.0+	-	`Color`
Sets the color context of the component to one of CoreUI’s themed colors.
tooltipFeedback4.3.0+	-	`boolean`
Display validation feedback in a styled tooltip.
trueValue4.10.0+	-	`string`
Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `true` state.
type	`'checkbox'`	`string`
Specifies the type of component.
validDeprecated 6.0.0	-	`boolean`
Mark the control valid. Use `validationState="valid"` instead — `valid` is ignored when `validationState` is set.
validationState6.0.0+	-	`string`
The validation state, rendered as the `is-{state}` class; `'invalid'` also sets `aria-invalid` and blocks the submit. Any custom state declared in the `$form-validation-states` Sass map is accepted. The user's next change of the checked state emits `update:validationState` with `undefined`.
value	-	`string`
The value attribute of component.

Events

Event name
change
Event occurs when the checked value has been changed.
update:modelValue
Emit the new value whenever there’s a change event.
update:validationState
Event occurs with `undefined` when the user changes the checked state, or the form is reset, while `validationState` (or the deprecated `invalid`) is set. A given state is a verdict on the choice it was given for; bind it with `v-model:validation-state` to drop it and let the browser's own validation show again.