@hypothesis/frontend-shared/lib/components/input/ToggleInput.d.ts

Shared components, styles and utilities for Hypothesis projects

import type { JSX, Ref } from 'preact';
import type { CompositeProps, IconComponent } from '../../types';
type ComponentProps = {
    checked?: boolean;
    /** Custom icon to show when input is unchecked */
    icon: IconComponent;
    /** Custom icon to show when input is checked */
    checkedIcon: IconComponent;
    type: 'checkbox' | 'radio';
    /** Optional extra CSS classes appended to the container's className */
    containerClasses?: string | string[];
    /** Ref associated with the component's container */
    containerRef?: Ref<HTMLLabelElement | undefined>;
};
export type ToggleInputProps = CompositeProps & ComponentProps & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'size' | 'icon'>;
/**
 * Render a labeled checkbox or radio input. The input is styled with two icons:
 * one for the unchecked state and one for the checked state. The input itself
 * is positioned exactly on top of the icon, but is non-visible.
 */
export default function ToggleInput({ children, elementRef, containerRef, checked, icon: UncheckedIcon, checkedIcon: CheckedIcon, disabled, onChange, id, type, containerClasses, ...htmlAttributes }: ToggleInputProps): JSX.Element;
export {};