@stihl-design-system/components/components/Switch/Switch.d.ts

Welcome to the STIHL Design System react component library.

import { ButtonHTMLAttributes } from 'react';
import { SelectedAriaAttributes } from '../../types';
import { SwitchAriaAttribute, SwitchLabelPosition } from './Switch.utils';
export interface SwitchProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    /** Content within the label. */
    children: React.ReactNode;
    /** ARIA attributes to enhance accessibility.
     * `{'aria-label'? string;}`
     */
    aria?: SelectedAriaAttributes<SwitchAriaAttribute>;
    /** Alignment of the label.
     * @default 'left'
     */
    alignLabel?: SwitchLabelPosition;
    /** Controls whether the switch is checked.
     * @default false
     */
    checked?: boolean;
    /** Custom data attributes. */
    [key: `data-${string}`]: string | undefined;
    /** Disables the switch, preventing user interaction.
     * @default false
     */
    disabled?: boolean;
    /** Shows loading indicator.
     * @default false
     */
    loading?: boolean;
    /** Stretches the Switch over the parent's width.
     * @default false
     */
    stretched?: boolean;
    /** Callback function called when the switch is clicked. */
    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
}
/**
 * Often used in settings, in which users can communicate their choice through binary selection.
 *
 * Design in Figma: [Switch](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=513-2)
 * */
export declare const DSSwitch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLButtonElement>>;