import { StyleProps } from '@codecademy/variance';
import { InputHTMLAttributes } from 'react';
import { InfoTipSubComponentProps } from '../../Tip/InfoTip/type-utils';
import { checkboxPadding, checkboxTextStates } from '../styles';
import { BaseInputProps } from '../types';
import { CheckboxCheckedUnion, CheckboxLabelUnion } from './types';
export type CheckboxTextProps = StyleProps<typeof checkboxTextStates>;
export type CheckboxPaddingProps = StyleProps<typeof checkboxPadding>;
export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'value' | 'label' | 'aria-label'> & CheckboxLabelUnion & CheckboxCheckedUnion & CheckboxPaddingProps & Pick<BaseInputProps, 'name' | 'required'> & {
    multiline?: boolean;
    className?: string;
    /**
     * [The for/id string of a label or labelable form-related element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor). The outer FormGroup or FormLabel should have an identical string as the inner FormElement for accessibility purposes.
     */
    htmlFor: string;
    /**
     * Infotip props to render to the right of your checkbox label.
     * The InfoTip button is automatically labelled by the checkbox label.
     * To override this behavior, provide `ariaLabel` or `ariaLabelledby`.
     */
    infotip?: InfoTipSubComponentProps;
    /**
     * @remarks
     * The `value` prop here gets passed to the underlying `input` component
     * and functions exactly like the HTML spec for checkboxes defines
     * (which may not be as you expect):
     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value=
     *
     * Of note is that `value` ends up being the string that your field name key
     * is set to when the checkbox is checked. So a `value` of the boolean `true` and
     * a `name` of "isPro" will result in `{
     *  isPro: "true"
     * }` being submitted to your (non-`Connected`) form when the checkbox is checked.
     * However, if due to how your HOC is organized, the Checkbox recieves a value
     * of the boolean `false` when it is unchecked, NOTHING will be submitted. You
     * _will not_ get `{ isPro: "false" }` on submit. However, the `value` of your input
     * will be "false"
     *
     * As the MDN documentation above states:
     * "If a checkbox is unchecked when its form is submitted, there is no value submitted to the server to represent its unchecked state (e.g. value=unchecked); the value is not submitted to the server at all"
     *
     * This behavior may not matter to you if you're handling your own form values
     * externally (i.e. not relying on default lower-case-`form`/`input` submit behavior)
     * or you're using `register` from Gamut's `useField` hook,
     * which uses `react-hook-form`'s logic to sidestep this behavior by not passing
     * a value to the underlying checkbox at all.
     */
    value?: string | boolean;
    id?: string;
    /**
     * Use if you want both the aria-label and text label to be read by voiceover - this component assumes that the aria-label and visual text label are identical.
     * If you have a link in the Checkbox options, you should set this as true.
     */
    dontAriaHideLabel?: boolean;
};
export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;