/** * * Checkbox is an extension to standard checkbox element with skinning capabilities. * * [Live Demo](https://www.primereact.org/checkbox/) * * @module checkbox * */ import * as React from 'react'; import { TooltipOptions } from '../tooltip/tooltipoptions'; import { FormEvent } from '../ts-helpers'; import { IconType, PassThroughType } from '../utils'; import { TooltipPassThroughOptions } from '../tooltip/tooltip'; export declare type CheckboxPassThroughType = PassThroughType; /** * Custom passthrough(pt) option method. */ export interface CheckboxPassThroughMethodOptions { props: CheckboxProps; state: CheckboxState; } /** * Custom passthrough(pt) options. * @see {@link CheckboxProps.pt} */ export interface CheckboxPassThroughOptions { /** * Uses to pass attributes to the root's DOM element. */ root?: CheckboxPassThroughType>; /** * Uses to pass attributes to the input's DOM element. */ input?: CheckboxPassThroughType>; /** * Uses to pass attributes to the icon's DOM element. */ icon?: CheckboxPassThroughType | React.HTMLAttributes>; /** * Uses to pass attributes tooltip's DOM element. * @type {TooltipPassThroughOptions} */ tooltip?: TooltipPassThroughOptions; /** * Uses to pass attributes to the hidden input wrapper's DOM element. */ hiddenInputWrapper?: CheckboxPassThroughType>; /** * Uses to pass attributes to the hidden input's DOM element. */ hiddenInput?: CheckboxPassThroughType>; } /** * Defines current inline state in Checkbox component. */ export interface CheckboxState { /** * Current focus state as a boolean. * @defaultValue false */ focused: boolean; } /** * Custom change event. * @see {@link CheckboxProps.onChange} * @extends {FormEvent} * @event */ interface CheckboxChangeEvent extends FormEvent {} /** * Custom click event. * @see {@link CheckboxProps.onClick} * @extends {FormEvent} * @event */ interface CheckboxClickEvent extends FormEvent {} /** * Defines valid properties in Checkbox component. In addition to these, all properties of HTMLDivElement can be used in this component. * @group Properties */ export interface CheckboxProps extends Omit, HTMLDivElement>, 'onChange' | 'onClick' | 'ref'> { /** * Unique identifier of the element. */ id?: string | undefined; /** * When present, it specifies that the component should automatically get focus on load. * @defaultValue false */ autoFocus?: boolean | undefined; /** * Reference of the input element. */ inputRef?: React.Ref | undefined; /** * Identifier of the input element. */ inputId?: string | undefined; /** * Value of the component. */ value?: any; /** * Name of the checkbox element . */ name?: string | undefined; /** * Specifies whether a checkbox should be checked or not. * @defaultValue false */ checked: boolean; /** * Value in checked state. * @defaultValue true */ trueValue?: any; /** * Value in unchecked state. * @defaultValue false */ falseValue?: any; /** * Inline style of the element. */ style?: React.CSSProperties | undefined; /** * Style class of the element. */ className?: string | undefined; /** * When present, it specifies that the element value cannot be altered. * @defaultValue false */ disabled?: boolean | undefined; /** * When present, it specifies that an input field must be filled out before submitting the form. * @defaultValue false */ required?: boolean | undefined; /** * When present, it specifies that the value cannot be changed. * @defaultValue false */ readOnly?: boolean | undefined; /** * Index of the element in tabbing order. * @defaultValue false */ tabIndex?: number | undefined; /** * Icon to display in checkbox. */ icon?: IconType | undefined; /** * Content of the tooltip. */ tooltip?: string | undefined; /** * Configuration of the tooltip, refer to the tooltip documentation for more information. * @type {TooltipOptions} */ tooltipOptions?: TooltipOptions | undefined; /** * Callback to invoke on value change * @param {CheckboxChangeEvent} event - Custom change event */ onChange?(event: CheckboxChangeEvent): void; /** * Callback to invoke on value change. Mark the event with preventDefault to prevent the option from changing. * @param {CheckboxClickEvent} event - Custom click event */ onClick?(event: CheckboxClickEvent): void; /** * Callback to invoke to when a mouse button is pressed. * @param {React.MouseEvent} event - Browser event */ onMouseDown?(event: React.MouseEvent): void; /** * Callback to invoke on right-click. * @param {React.MouseEvent} event - Browser event */ onContextMenu?(event: React.MouseEvent): void; /** * Used to get the child elements of the component. * @readonly */ children?: React.ReactNode | undefined; /** * Uses to pass attributes to DOM elements inside the component. * @type {CheckboxPassThroughOptions} */ pt?: CheckboxPassThroughOptions; } /** * **PrimeReact - Checkbox** * * _Checkbox is an extension to standard checkbox element with skinning capabilities._ * * [Live Demo](https://www.primereact.org/checkbox/) * --- --- * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png) * * @group Component */ export declare class Checkbox extends React.Component { /** * Used to focus the component. */ public focus(): void; /** * Used to get container element. * @return {HTMLDivElement} Container element */ public getElement(): HTMLDivElement; /** * Used to get input element. * @return {HTMLInputElement} Input element */ public getInput(): HTMLInputElement; }