@itwin/itwinui-react/esm/core/ToggleSwitch/ToggleSwitch.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
type ToggleSwitchProps = {
    /**
     * Label for the toggle switch.
     */
    label?: React.ReactNode;
    /**
     * Passes properties for ToggleSwitch label.
     */
    labelProps?: React.ComponentProps<'span'>;
    /**
     * Position of the label.
     * @default 'right'
     */
    labelPosition?: 'left' | 'right';
    /**
     * Passes props to wrapper.
     *
     * By default, `className` and `style` are applied on the wrapper element, and all other DOM props are passed to
     * `<input>` element.
     *
     * When `wrapperProps` is passed or when the `ToggleSwitch.consistentPropsSpread` future flag is enabled, `className`
     * and `style` are applied on the `<input>` element, similar to other DOM props.
     */
    wrapperProps?: React.HTMLAttributes<HTMLElement>;
} & ({
    /**
     * Size of the toggle switch.
     *  @default 'default'
     */
    size?: 'default';
    /**
     * Custom icon inside the toggle switch. Shown only when toggle is checked and size is not small.
     *
     * Will override the default checkmark icon.
     */
    icon?: React.JSX.Element | null;
} | {
    size: 'small';
    icon?: never;
});
/**
 * A switch for turning on and off.
 *
 * ---
 *
 * By default, `className` and `style` are applied on the wrapper element, and all other DOM props are passed to `<input>`
 * element.
 *
 * When `wrapperProps` is passed or when the `ToggleSwitch.consistentPropsSpread` future flag is enabled, `className`
 * and `style` are applied on the `<input>` element, similar to other DOM props.
 *
 * ---
 *
 * @example
 * <caption>Basic toggle</caption>
 * <ToggleSwitch onChange={(e) => console.log(e.target.checked)} defaultChecked />
 * @example
 * <caption>Disabled toggle</caption>
 * <ToggleSwitch disabled />
 * @example
 * <caption>Right labeled toggle</caption>
 * <ToggleSwitch defaultChecked label='Right labeled' />
 * @example
 * <caption>Left labeled toggle</caption>
 * <ToggleSwitch defaultChecked label='Left labeled' labelPosition='left' />
 * @example
 * <caption>Toggle with icon</caption>
 * <ToggleSwitch label='With icon toggle' icon={<svg viewBox='0 0 16 16'><path d='M1 1v14h14V1H1zm13 1.7v10.6L8.7 8 14 2.7zM8 7.3L2.7 2h10.6L8 7.3zm-.7.7L2 13.3V2.7L7.3 8zm.7.7l5.3 5.3H2.7L8 8.7z' /></svg>} />
 */
export declare const ToggleSwitch: PolymorphicForwardRefComponent<"input", ToggleSwitchProps>;
export {};