@tiller-ds/form-elements/Toggle.d.ts

Form elements module of Tiller Design System

import * as React from "react";
import { ComponentTokens } from "@tiller-ds/theme";
import { FieldProps } from "./Field";
export declare type ToggleProps = {
    /**
     * If true, the Toggle is rendered in an active state.
     */
    checked?: boolean;
    /**
     * Icon specified in an active state of the toggle.
     */
    checkedIcon?: React.ReactElement;
    /**
     * Custom classes for the container.
     * Overrides conflicting default styles, if any.
     *
     * The provided `className` is processed using `tailwind-merge` to eliminate redundant or conflicting Tailwind classes.
     */
    className?: string;
    /**
     * Determines whether the component is disabled.
     */
    disabled?: boolean;
    /**
     * Function fired when the toggle is clicked.
     */
    onClick?: () => void;
    /**
     * Icon specified in an inactive state of the toggle.
     */
    uncheckedIcon?: React.ReactElement;
    /**
     * Changes the default layout of the component to show the label before the toggle component.
     * Defaults to false.
     */
    reverse?: boolean;
} & Omit<FieldProps, "children" | "hint" | "help"> & ToggleTokensProps;
declare type ToggleTokensProps = {
    tokens?: ComponentTokens<"Toggle">;
};
export default function Toggle({ className, checked, label, onClick, checkedIcon, uncheckedIcon, disabled, reverse, ...props }: ToggleProps): JSX.Element;
export {};