wix-style-react/src/Checkbox/index.d.ts

wix-style-react

import * as React from 'react';
import { TooltipCommonProps } from '../common';

export interface CheckboxProps {
  /** Applies a data-hook HTML attribute that can be used in tests */
  dataHook?: string;
  /** Specifies whether a checkbox is selected */
  checked?: boolean;
  /** Specifies whether a checkbox is disabled */
  disabled?: boolean;
  /** Specifies whether a checkbox has an error */
  hasError?: boolean;
  /** Assigns a unique identifier for the checkbox */
  id?: string;
  /** Specifies whether a checkbox is in an indeterminate state */
  indeterminate?: boolean;
  /**
   * The error message when there's an error
   * @deprecated use tooltipContent instead
   * */
  errorMessage?: string;
  /** Controls the selection area highlight visibility */
  selectionArea?: CheckboxSelectionArea;
  /** Controls checkbox alignment to the label on the Y axis */
  vAlign?: CheckboxVAlign;
  /** Controls the size of the checkbox label */
  size?: CheckboxLabelSize;
  /** Defines a callback function which is called every time the checkbox state is changed */
  onChange?: React.ChangeEventHandler<HTMLInputElement>;
   /** Specifies a CSS class name to be appended to the component’s root element */
  className?: string;
  /** Allows you to pass all common tooltip props. Check `<Tooltip/>` for the full API. */
  tooltipProps?: TooltipCommonProps;
  /** Defines a message to be displayed in a tooltip. Tooltip is displayed on a checkbox hover. */
  tooltipContent?: React.ReactNode;
  /** Sets the design of the selection area */
  selectionAreaSkin?: CheckboxSelectionAreaSkin;
   /** Sets the amount of white space around the checkbox label in pixels */
  selectionAreaPadding?: React.CSSProperties['padding'];
}

export default class Checkbox extends React.PureComponent<CheckboxProps> {
  focus: () => void;
}

export type CheckboxLabelSize = 'medium' | 'small';
export type CheckboxSelectionArea = 'none' | 'hover' | 'always';
export type CheckboxVAlign = 'center' | 'top';
export type CheckboxSelectionAreaSkin = 'filled' | 'outlined';