@als-tp/als-react-ts-ui/dist/components/ALSSwitch/ALSSwitch.d.ts

A comprehensive React TypeScript UI component library built with Base UI by ALSInnovation

import React from "react";
/**
 * Size options for the switch
 */
export type ALSSwitchSize = "sm" | "md" | "lg";
/**
 * Color options for the switch when checked
 */
export type ALSSwitchColor = "primary" | "success" | "warning" | "error";
/**
 * Label position options
 */
export type ALSSwitchLabelPosition = "left" | "right";
/**
 * Props for the ALSSwitch component
 */
export interface ALSSwitchProps {
    /**
     * The size of the switch
     * @default 'md'
     */
    size?: ALSSwitchSize;
    /**
     * The color of the switch when checked
     * @default 'primary'
     */
    color?: ALSSwitchColor;
    /**
     * Whether the switch is initially checked (uncontrolled)
     * @default false
     */
    defaultChecked?: boolean;
    /**
     * Whether the switch is checked (controlled)
     */
    checked?: boolean;
    /**
     * Callback fired when the switch state changes
     */
    onCheckedChange?: (checked: boolean) => void;
    /**
     * Whether the switch is disabled
     * @default false
     */
    disabled?: boolean;
    /**
     * Whether the switch is read-only
     * @default false
     */
    readOnly?: boolean;
    /**
     * Whether the switch is required
     * @default false
     */
    required?: boolean;
    /**
     * The name attribute for form submission
     */
    name?: string;
    /**
     * The id attribute for the switch
     */
    id?: string;
    /**
     * Optional label text for the switch
     */
    label?: string;
    /**
     * Position of the label relative to the switch
     * @default 'right'
     */
    labelPosition?: ALSSwitchLabelPosition;
    /**
     * Optional description text displayed below the label
     */
    description?: string;
    /**
     * Accessible label for screen readers (use when no visible label)
     */
    "aria-label"?: string;
    /**
     * Additional CSS class names for the root container
     */
    className?: string;
    /**
     * Additional inline styles for the root container
     */
    style?: React.CSSProperties;
}
/**
 * ALSSwitch - A toggle switch component for binary on/off settings.
 *
 * This component wraps Base UI's Switch with ALS design system styling,
 * providing an accessible toggle control with optional labels and descriptions.
 *
 * @example
 * ```tsx
 * // Basic switch
 * <ALSSwitch />
 *
 * // Switch with label
 * <ALSSwitch label="Enable notifications" />
 *
 * // Controlled switch
 * <ALSSwitch
 *   checked={isEnabled}
 *   onCheckedChange={setIsEnabled}
 *   label="Dark mode"
 * />
 *
 * // Switch with description
 * <ALSSwitch
 *   label="Email notifications"
 *   description="Receive updates about your account"
 * />
 * ```
 */
export declare const ALSSwitch: React.ForwardRefExoticComponent<ALSSwitchProps & React.RefAttributes<HTMLButtonElement>>;
//# sourceMappingURL=ALSSwitch.d.ts.map