New to Kendo UI for Vue? Start a free 30-day trial

Forms Support

The Switch component can be easily integrated with HTML5 form as well as Kendo UI for Vue Native Form (or other third-party solutions).

The forms supports enables you to validate switch values and prevent the submission of forms which are in an invalid state.

In addition to the exposed form support settings, the Switch provides the same properties and behaves in the same way as a native HTML input[type=checkbox] element.

Functionality and Features

Support for Kendo UI for Vue Form and Setting Custom Behavior

The Kendo UI for Vue Native Form component integrates with all Kendo UI for Vue Native components.

You can display error messages and fully customize the behavior of the rendered component by using the additional properties of the Field component.

The following example demonstrates how to render a required custom switch.

Example
View Source
Change Theme:

Setting Validation Requirements

The Switch supports props for setting basic validation requirements. For example, the required property which enables the successful form submission.

Example
View Source
Change Theme:

Setting Custom Validation Messages

You can implement custom error messages which will be displayed if the Switch is not turned on and the user tries to submit the form. To render a custom validation message, set the validationMessage prop.

Example
View Source
Change Theme: