/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { FormComponentProps, FormComponentValidity } from '@progress/kendo-vue-common'; import { ToggleBaseProps } from '../interfaces/ToggleBaseProps'; import { SwitchFocusEvent } from './interfaces/SwitchFocusEvent'; import { SwitchBlurEvent } from './interfaces/SwitchBlurEvent'; /** * The arguments for the `onChange` Switch event. */ export interface SwitchChangeEvent { /** * The new value of the Switch. */ value: boolean; } /** * Represents the props of the [Kendo UI for Vue Switch component]({% slug overview_switch %}). */ export interface SwitchProps extends ToggleBaseProps, FormComponentProps { /** * Specifies the `name` of the Switch. */ name?: string; /** * Specifies the `accessKey` of the Switch. */ accessKey?: string; /** * Sets the current value of the Switch ([see example]({% slug controlled_switch %})). */ checked?: boolean; /** * Sets the `className` of the wrapping element of the Switch. */ className?: string; /** * Sets the value of the Switch when it is initially displayed ([see example]({% slug default_state %})). */ defaultChecked?: boolean; /** * Sets the default value of the Switch. */ defaultValue?: any; /** * Disables the Switch when set to `true` ([see example]({% slug disabled_switch %})). */ disabled?: boolean; /** * Sets the `dir` property of the wrapping element of the Switch. */ dir?: string; /** * Sets the `id` of the Switch. */ id?: string; /** * Configures the `size` of the Switch. * * The available options are: * - small * - medium * - large * * @default undefined */ size?: 'small' | 'medium' | 'large'; /** * Configures the `trackRounded` of the Switch. * * The available options are: * - none * - small * - medium * - large * - full * * @default undefined */ trackRounded?: 'none' | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `thumbRounded` of the Switch. * * The available options are: * - none * - small * - medium * - large * - full * * @default undefined */ thumbRounded?: 'none' | 'small' | 'medium' | 'large' | 'full'; /** * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute). * For example these elements could contain error or hint message. */ ariaDescribedBy?: string; /** * Identifies the element(s) which will label the component. */ ariaLabelledBy?: string; /** * Changes the **Off** label([see example]({% slug labels_switch %})). */ offLabel?: string; /** * Fires each time the Switch gets blurred. */ onBlur?: (event: any) => void; /** * Fires each time the user selects a new value ([see example]({% slug controlled_switch %})). */ onChange?: (event: SwitchChangeEvent) => void; /** * Fires each time the Switch component gets focused. */ onFocus?: (event: any) => void; /** * Changes the **On** label ([see example]({% slug labels_switch %})). */ onLabel?: string; /** * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component. */ tabIndex?: number; /** * Sets the value of the Switch. It can either be of the primitive (string, number, boolean) or of the complex (array) type. */ value?: string | number | string[] | boolean | null; modelValue?: string | number | string[] | boolean | null; } /** * Represents the [Kendo UI for Vue Native Switch component]({% slug overview_switch %}). * Accepts properties of type [SwitchProps]({% slug api_inputs_switchprops %}). */ declare const Switch: import('vue').DefineComponent boolean; }; trackRounded: { type: StringConstructor; validator: (value: string) => boolean; }; thumbRounded: { type: StringConstructor; validator: (value: string) => boolean; }; dir: StringConstructor; id: StringConstructor; ariaLabelledBy: StringConstructor; ariaDescribedBy: StringConstructor; offLabel: { type: StringConstructor; default: string; }; onLabel: { type: StringConstructor; default: string; }; required: { type: BooleanConstructor; default: boolean; }; tabIndex: NumberConstructor; valid: BooleanConstructor; validityStyles: { type: BooleanConstructor; default: boolean; }; validationMessage: StringConstructor; value: { type: (BooleanConstructor | StringConstructor | NumberConstructor)[]; default: any; }; modelValue: { type: BooleanConstructor; default: any; }; }>, {}, { currentChecked: boolean; valueDuringOnChange: any; focused: boolean; currentDir: any; }, { computedValue(): any; switchClassName(): { [x: string]: any; 'k-switch': boolean; 'k-switch-on': any; 'k-switch-off': boolean; 'k-focus': any; 'k-disabled': any; 'k-invalid': boolean; }; switchTrackClass(): { [x: string]: any; 'k-switch-track': boolean; }; switchThumbClass(): { [x: string]: any; 'k-switch-thumb': boolean; }; }, { focus(): void; element(): HTMLSpanElement | null; validity(): FormComponentValidity; setValidity(): void; limit(offset: number, drag: HTMLSpanElement, wrapper: HTMLSpanElement): number; toggle(value: boolean, event: any): void; handleClick(event: any): void; handleKeyDown(event: any): void; handleWrapperFocus(event: any): void; handleWrapperBlur(event: any): void; }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, { change: (event: SwitchChangeEvent) => true; changemodel: (value: boolean) => true; 'update:modelValue': (value: boolean) => true; focus: (event: SwitchFocusEvent) => true; blur: (event: SwitchBlurEvent) => true; }, string, import('vue').PublicProps, Readonly boolean; }; trackRounded: { type: StringConstructor; validator: (value: string) => boolean; }; thumbRounded: { type: StringConstructor; validator: (value: string) => boolean; }; dir: StringConstructor; id: StringConstructor; ariaLabelledBy: StringConstructor; ariaDescribedBy: StringConstructor; offLabel: { type: StringConstructor; default: string; }; onLabel: { type: StringConstructor; default: string; }; required: { type: BooleanConstructor; default: boolean; }; tabIndex: NumberConstructor; valid: BooleanConstructor; validityStyles: { type: BooleanConstructor; default: boolean; }; validationMessage: StringConstructor; value: { type: (BooleanConstructor | StringConstructor | NumberConstructor)[]; default: any; }; modelValue: { type: BooleanConstructor; default: any; }; }>> & Readonly<{ onBlur?: (event: SwitchBlurEvent) => any; onChange?: (event: SwitchChangeEvent) => any; onFocus?: (event: SwitchFocusEvent) => any; onChangemodel?: (value: boolean) => any; "onUpdate:modelValue"?: (value: boolean) => any; }>, { required: boolean; value: string | number | boolean; disabled: boolean; checked: boolean; modelValue: boolean; valid: boolean; validityStyles: boolean; defaultChecked: boolean; offLabel: string; onLabel: string; }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>; export { Switch };