@react-md/form/lib/toggle/InputToggle.d.ts

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

import type { CSSProperties, InputHTMLAttributes, ReactNode } from "react";
import type { InteractionStatesOptions } from "@react-md/states";
/**
 * The props for a checkbox or radio input element.
 *
 * Note: The `readOnly` attribute is not valid for these input types since they
 * update the `checked` property while `readOnly` is specific to `value` itself.
 */
export interface InputToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "readOnly">, Pick<InteractionStatesOptions, "rippleTimeout" | "disableRipple" | "disableProgrammaticRipple" | "disablePressedFallback" | "rippleClassNames"> {
    /**
     * 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;
    /**
     * The icon to use for either a radio or a checkbox.
     */
    icon?: ReactNode;
    /**
     * An optional style to apply to the `<span>` surrounding the toggle icon.
     */
    iconStyle?: CSSProperties;
    /**
     * An optional className to apply to the `<span>` surrounding the toggle icon.
     */
    iconClassName?: string;
    /**
     * An optional style to apply to the toggle `<span>` element. The `style` prop
     * will be applied to the container `<div>` element instead.
     */
    toggleStyle?: CSSProperties;
    /**
     * An optional className to apply to the toggle `<span>` element. The
     * `className` prop will be applied to the container `<div>` element instead.
     */
    toggleClassName?: string;
    /**
     * An optional `style` to provide to the invisible `<input>` element that is
     * used to toggle the checked state. This prop is only available since the
     * `style` prop is passed to the container element, but you probably shouldn't
     * really style this element anyways.
     *
     * @remarks \@since 2.2.0
     */
    inputStyle?: CSSProperties;
    /**
     * An optional `className` to provide to the invisible `<input>` element that
     * is used to toggle the checked state. This prop does not have many uses and
     * is really just provided since the `className` is passed to the container
     * element instead of the `<input>`. However, this can be used to update the
     * icon styles if needed using the `:checked` state:
     *
     * ```scss
     * .custom-toggle-icon {
     *   // styles
     * }
     *
     * .custom-input:checked + .custom-toggle-icon {
     *   // custom checked styles
     * }
     * ```
     *
     * @remarks \@since 2.2.0
     */
    inputClassName?: string;
    /**
     * Boolean if the icon's overlay should be disabled. The way the Checkbox and
     * Radio input elements work is by applying different opacity to the
     * `::before` and `::after` pseudo selectors and animating it. If you want to
     * use a custom icon that is not a material-icon checkbox outline or radio
     * button, you should probably enable this prop.
     */
    disableIconOverlay?: boolean;
    /**
     * 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, 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;
    /**
     * Optional content to render after the icon element.
     */
    children?: ReactNode;
}
declare type Props = InputToggleProps & ({
    type: "radio";
} | {
    type: "checkbox";
    indeterminate?: boolean;
});
export declare const InputToggle: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLInputElement>>;
export {};