@react-md/form/types/toggle/Switch.d.ts

This package is for creating all the different form input types.

import type { CSSProperties, InputHTMLAttributes, ReactNode } from "react";
export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "readOnly"> {
    /**
     * The id for the radio or checkbox. This is required for a11y and will be
     * used as the `for` attribute if the `label` prop is provided.
     */
    id: string;
    /**
     * An optional style to apply to the switch's ball.
     */
    ballStyle?: CSSProperties;
    /**
     * An optional className to apply to the switch's ball.
     */
    ballClassName?: string;
    /**
     * An optional style to apply to the switch's track (this is the
     * `<input type="checkbox">` used behind the scenes).
     */
    trackStyle?: CSSProperties;
    /**
     * An optional className to apply to the switch's track (this is the
     * `<input type="checkbox">` used behind the scenes).
     */
    trackClassName?: string;
    /**
     * Boolean if the input toggle is currently errored. This will update the
     * label and the input to gain error colors.
     */
    error?: boolean;
    /**
     * Boolean if the container element should be rendered as `inline-flex`
     * instead of `flex`.
     */
    inline?: boolean;
    /**
     * Boolean if the label should be stacked above/below the input toggle instead
     * of inline.
     */
    stacked?: boolean;
    /**
     * An optional label to display with the input. If this prop is omitted and
     * you aren't adding a custom `<label>` anywhere else, you **should** apply an
     * `aria-label` or `aria-labelledby` for a11y.
     */
    label?: ReactNode;
    /**
     * An optional style to apply to the `<label>` when the `label` prop is used.
     */
    labelStyle?: CSSProperties;
    /**
     * An optional className to apply to the `<label>` when the `label` prop is
     * used.
     */
    labelClassName?: string;
    /**
     * An optional boolean if the label should gain the disabled style. When this
     * is `undefined`, the `disabled` prop will be used instead. This is really
     * just useful when you want to disable the switch from being toggled while
     * some async action is being called, but not changing styles during the wait.
     */
    labelDisabled?: boolean;
    /**
     * Boolean if the input toggle should appear after the label instead of
     * before.
     */
    iconAfter?: boolean;
    /**
     * Any optional children that should be displayed within the switch's ball.
     */
    children?: ReactNode;
}
export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;