Switch
Represents the KendoVue Switch component. Accepts properties of type SwitchProps. Use the Switch to let the user turn a setting on or off.
Definition
Package:@progress/kendo-vue-inputs
Properties Interface:SwitchProps
Syntax:
<Switch :default-checked="true" :on-label="'Yes'" :off-label="'No'" />Properties
accessKey?
string
Sets the accessKey of the Switch.
ariaDescribedBy?
string
Sets the IDs of the elements that describe the Switch, 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 Switch.
checked?
boolean
Sets the current value of the Switch (see example).
className?
string
Sets the className of the wrapping element of the Switch.
defaultChecked?
boolean
Sets the initial value of the Switch (see example).
false
Sets the default value of the Switch.
dir?
string
Sets the dir attribute of the wrapping element of the Switch.
disabled?
boolean
Disables the Switch when you set it to true (see example).
false
id?
string
Sets the id of the Switch.
modelValue?
string | number | boolean | string[]
Sets the value of the Switch when you use v-model.
name?
string
Sets the name of the Switch.
offLabel?
string
Sets the text of the Off label (see example).
'OFF'
onBlur?
(event: any) => void
Fires each time the Switch loses the focus. The event name is blur.
onChange?
(event: SwitchChangeEvent) => void
Fires each time the user changes the value (see example). The event name is change.
onFocus?
(event: any) => void
Fires each time the Switch gets the focus. The event name is focus.
onLabel?
string
Sets the text of the On label (see example).
'ON'
required?
boolean
Sets whether null is a valid value for the component.
size?
"small" | "medium" | "large"
Sets the size of the Switch.
The available options are:
- small
- medium
- large
undefined
thumbRounded?
"small" | "medium" | "large" | "none" | "full"
Sets the border radius of the Switch thumb.
The available options are:
- none
- small
- medium
- large
- full
undefined
trackRounded?
"small" | "medium" | "large" | "none" | "full"
Sets the border radius of the Switch track.
The available options are:
- none
- small
- medium
- large
- full
undefined
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[]
Sets the value of the Switch. The value can be a primitive (string, number, boolean) or a complex (array) type.