@progress/kendo-themes-html/dist/types/switch/switch.spec.d.ts

A collection of HTML helpers used for developing Kendo UI themes

import { KendoComponent } from '../_types/component';
export declare const SWITCH_CLASSNAME = "k-switch";
declare const states: ("focus" | "disabled" | "readonly" | "checked" | "hover")[];
declare const options: {
    size: ("small" | "medium" | "large" | undefined)[];
    trackRounded: ("small" | "none" | "medium" | "full" | "large" | undefined)[];
    thumbRounded: ("small" | "none" | "medium" | "full" | "large" | undefined)[];
};
export type KendoSwitchOptions = {
    size?: (typeof options.size)[number] | null;
    trackRounded?: (typeof options.trackRounded)[number] | null;
    thumbRounded?: (typeof options.thumbRounded)[number] | null;
};
export type KendoSwitchProps = KendoSwitchOptions & {
    onLabel?: string;
    offLabel?: string;
};
export type KendoSwitchState = {
    [K in (typeof states)[number]]?: boolean;
};
/**
 * Switch component - toggle switch for binary choices.
 *
 * @accessibility
 * - Uses `role="switch"` to announce the switch role
 * - Uses `aria-checked` to announce the checked state
 * - Uses `tabindex="0"` to make the element focusable (removed when disabled)
 * - Must have accessible name via `aria-label` or label association
 * - Uses `aria-disabled="true"` when disabled (removed from tab order)
 * - Uses `aria-readonly="true"` when readonly (remains focusable but value cannot change)
 *
 * @example
 * ```tsx
 * // With aria-label
 * <Switch aria-label="Enable notifications" />
 *
 * // Readonly switch
 * <Switch aria-label="Feature enabled" readonly checked />
 *
 * // With external label
 * <label id="switch-label">Dark mode</label>
 * <Switch aria-labelledby="switch-label" />
 * ```
 *
 * @wcag 4.1.2 Name, Role, Value - switch must have accessible name and proper role
 */
export declare const Switch: KendoComponent<KendoSwitchProps & KendoSwitchState & React.HTMLAttributes<HTMLSpanElement>>;
export default Switch;