@syncfusion/react-buttons/src/check-box/check-box.d.ts

Syncfusion React Buttons package is a feature-rich collection of UI components including Button, CheckBox, RadioButton, Switch, Chip, and more for building modern, interactive React applications.

import { InputHTMLAttributes, ReactNode, ForwardRefExoticComponent, RefAttributes, type ChangeEvent } from 'react';
import { Color, Size, Position } from '@syncfusion/react-base';
/**
 * Interface for Checkbox change event arguments
 */
export interface CheckboxChangeEvent {
    /**
     * The initial event object received from the input element.
     */
    event: ChangeEvent<HTMLInputElement>;
    /**
     * The current checked state of the Checkbox.
     */
    value: boolean;
}
/**
 * Validation-related properties for components.
 */
interface validationProps {
    /**
     * Specifies whether the component is a required field in a form. When set to true,
     * the component will be marked as required.
     *
     * @default -
     */
    required?: boolean;
    /**
     * Specifies whether to override the validity state of the component. If valid is set, the required property will be ignored.
     *
     * @default -
     */
    valid?: boolean;
    /**
     * Specifies the form error message of the component.
     *
     * @default ''
     */
    validationMessage?: string;
    /**
     * Specifies whether to apply visual representation of the invalid state of the component.
     * If set to false, no visual representation of the invalid state of the component will be applied.
     *
     * @default true
     */
    validityStyles?: boolean;
}
/**
 * Properties interface for the Checkbox component
 *
 */
export interface CheckboxProps extends validationProps {
    /**
     * Specifies if the Checkbox is in an `indeterminate` state, which visually presents it as neither checked nor unchecked; setting this to `true` will make the Checkbox appear in an indeterminate state.
     *
     * @default false
     */
    indeterminate?: boolean;
    /**
     * Defines the text label for the Checkbox component, helping users understand its purpose.
     *
     * @default -
     */
    label?: string;
    /**
     * Specifies the size style of the Checkbox. Options include 'Small', 'Medium' and 'Large'.
     *
     * @default Size.Medium
     */
    size?: Size;
    /**
     * Specifies a custom icon to be displayed in unchecked state. This replaces the default Checkbox appearance.
     *
     * @default -
     */
    icon?: ReactNode;
    /**
     * Specifies a custom icon to be displayed in checked state. This replaces the default Checkbox check mark.
     *
     * @default -
     */
    checkedIcon?: ReactNode;
    /**
     * Specifies a custom icon to be displayed in the indeterminate state. This replaces the default indeterminate icon.
     *
     * @default -
     */
    indeterminateIcon?: ReactNode;
    /**
     * Specifies the position of the label relative to the Checkbox. It determines whether the label appears before or after the Checkbox element in the UI.
     *
     * @default Position.Right
     */
    labelPlacement?: Position;
    /**
     * Specifies a value that indicates whether the Checkbox is `checked` or not. When set to `true`, the Checkbox will be in `checked` state.
     *
     * @default false
     */
    checked?: boolean;
    /**
     * Specifies the initial checked state of the Checkbox. Use for uncontrolled components.
     *
     * @default false
     */
    defaultChecked?: boolean;
    /**
     * Specifies the Color style of the button. Options include 'Primary', 'Secondary', 'Warning', 'Success', 'Error', and 'Info'.
     *
     * @default Color.Primary
     */
    color?: Color;
    /**
     * Defines `value` attribute for the Checkbox. It is a form data passed to the server when submitting the form.
     *
     *
     * @default -
     */
    value?: string;
    /**
     * Triggers when the Checkbox state has been changed by user interaction, allowing custom logic to be executed in response to the state change.
     *
     * @event onChange
     */
    onChange?: (event: CheckboxChangeEvent) => void;
}
/**
 * Interface to define the structure of the Checkbox component reference instance
 *
 */
export interface ICheckbox extends CheckboxProps {
    /**
     * This is Checkbox component element.
     *
     * @private
     * @default null
     */
    element?: HTMLElement | null;
}
type ICheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> & ICheckbox;
/**
 * The Checkbox component allows users to select one or multiple options from a list, providing a visual representation of a binary choice with states like checked, unchecked, or indeterminate.
 *
 * ```typescript
 * import { Checkbox } from "@syncfusion/react-buttons";
 *
 * <Checkbox checked={true} label="Accept Terms and Conditions" />
 * ```
 */
export declare const Checkbox: ForwardRefExoticComponent<ICheckboxProps & RefAttributes<ICheckbox>>;
export default Checkbox;