import { default as React, ReactNode, PropsWithChildren } from 'react';
declare const ICON_LABEL_VERTICAL = "vertical";
declare const ICON_LABEL_HORIZONTAL = "horizontal";
export type CheckboxProps = {
    /**
     * Passed through as HTML attribute to the underlying input.
     * Set an `id` or a `name` otherwise.
     */
    id?: string;
    /**
     * Passed through as HTML attribute to the underlying input
     */
    name?: string;
    /**
     * Define some text or component as a label.
     */
    label?: string | ReactNode;
    /**
     * Define a custom icon for the checkbox by naming a rioglyph icon like `rioglyph-truck`.
     */
    icon?: string;
    /**
     * The icon size in pixel.
     */
    iconSize?: number;
    /**
     * The label position for a custom icon checkbox. Using this on a regular checkbox has no effect.
     *
     * Possible values are: `horizontal` or `vertical`.
     */
    iconLabelPosition?: typeof ICON_LABEL_VERTICAL | typeof ICON_LABEL_HORIZONTAL;
    /**
     * Callback function that is invoked when the checkbox is checked or unchecked.
     * @param event
     * @returns
     */
    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
    /**
     * Callback function that is invoked when the checkbox value changes.
     * This will also be invoked by a keyboard event.
     * @param event
     * @returns
     */
    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
    /**
     * Defines whether the checkbox is checked or not (state cannot be changed).
     */
    checked?: boolean;
    /**
     * Defines whether the checkbox is initially checked or not (state can be changed on click).
     */
    defaultChecked?: boolean;
    /**
     * Defines whether the checkbox is disabled or not.
     * @default false
     */
    disabled?: boolean;
    /**
     * Allows for rendering a completely different layout with or without a checkbox tick.
     * Note, when using the `custom` option, make sure to wrap the children with the class name
     * `checkbox-text-wrapper`. For using the checkbox tick, use an element with class name
     * `checkbox-text`.
     *
     * @example
     * <div className='checkbox-text-wrapper display-flex justify-content-between'>
     *     <div className='margin-right-15'>
     *         <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
     *         <div className='text-color-dark'>This option is a first option</div>
     *     </div>
     *     <div className='checkbox-text' />
     * </div>
     */
    custom?: boolean;
    /**
     * Defines whether the checkbox is required or not.
     *
     * @default false
     */
    required?: boolean;
    /**
     * Defines if the checkbox is in an indeterminate state in regard to other checkboxes that may be in different
     * selection state.
     *
     * @default false
     */
    indeterminate?: boolean;
    /**
     * Defines whether the checkbox is applying an inline style. Use this in combination
     * with other checkboxes.
     *
     * @default false
     */
    inline?: boolean;
    /**
     * Defines whether the checkbox is on the right side.
     *
     * @default false
     */
    right?: boolean;
    /**
     * Use "error" to change color of the checkbox.
     *
     * @default false
     */
    error?: boolean;
    /**
     * Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size.
     *
     * Possible values are:
     * `large`
     */
    size?: 'large';
    /**
     * A React ref assigned to the input itself.
     */
    inputRef?: React.RefObject<HTMLInputElement>;
    /**
     * Number of the index used for keyboard support.
     *
     * @default 0
     */
    tabIndex?: number;
    /**
     * Additional classes to be set on the input field.
     */
    className?: string;
};
declare const Checkbox: {
    (props: PropsWithChildren<CheckboxProps>): import("react/jsx-runtime").JSX.Element;
    ICON_LABEL_VERTICAL: "vertical";
    ICON_LABEL_HORIZONTAL: "horizontal";
};
export default Checkbox;
