Checkbox
Represents the KendoVue Checkbox component. Use the Checkbox to let the user turn an option on or off.
Definition
Package:@progress/kendo-vue-inputs
Properties Interface:CheckboxProps
Syntax:
<Checkbox :default-checked="true" :label="'Subscribe to updates'" />Properties
ariaDescribedBy?
string
Sets the IDs of the elements that describe the Checkbox, like the HTML aria-describedby attribute. For example, these elements can contain an error or a hint message.
ariaLabelledBy?
string
Sets the IDs of the elements that label the Checkbox.
checked?
boolean
Sets the checked state of the Checkbox.
Set it to null to show the indeterminate state of the Checkbox (see example).
defaultChecked?
boolean
Sets the initial checked state of the Checkbox when you use it in uncontrolled mode (see example).
Sets the initial value of the Checkbox.
dir?
string
Sets the dir HTML attribute. Use it to switch from LTR to RTL.
disabled?
boolean
Sets whether the Checkbox is disabled (see example).
id?
string
Sets the id of the Checkbox input element. The label of the Checkbox uses it as its target.
label?
string | HTMLElement
Sets the label of the Checkbox (see example).
labelClass?
string
Sets the class of the label element of the Checkbox.
labelOptional?
boolean
Sets whether the Checkbox shows the optional text after the label.
labelPlacement?
string
Sets the position of the Checkbox label. Accepts before or after (see example).
labelRender?
any
Sets the template of the Checkbox label.
Accepts a slot name, a render function, or a Vue component.
name?
string
Sets the name property of the input DOM element.
onChange?
(event: CheckboxChangeEvent) => void
Fires when the user changes the checked state. The event name is change.
onFocus?
(event: CheckboxFocusEvent) => void
Fires when the Checkbox gets the focus. The event name is focus.
required?
boolean
Sets whether null is a valid value for the component.
rounded?
"small" | "medium" | "large" | "none"
Sets the border radius of the Checkbox.
The available options are:
- none
- small
- medium
- large
undefined
size?
"small" | "medium" | "large"
Sets the size of the Checkbox.
The available options are:
- small
- medium
- large
undefined
tabIndex?
number
Sets the tabIndex of the Checkbox.
Defaults to 0.
valid?
boolean
Overrides the validity state of the component.
When you set valid, the component ignores the required property.
validationMessage?
string
Sets the form error message of the component. If you set it to an empty string, the component shows no error.
validityStyles?
boolean
Shows or hides the invalid state styles of the component. When you set it to false, the component shows no invalid state styles.
value?
string | number | boolean | string[]
When the value is not a boolean and you set the checked property, the Checkbox passes the value to the underlying input element.
When the value is a boolean and you do not set the checked property, the value sets the checked state of the Checkbox.
Set it to null to show the indeterminate state of the Checkbox (see example).