@patreon/studio/module/components/Checkbox/shared.d.ts

Patreon Studio Design System

import type { BaseProps } from '../../types/component';
/** @deprecated custom sizes are no longer supported */
export declare type Size = 'sm' | 'md' | 'lg';
export declare type LabelPosition = 'right' | 'left';
export declare type InputType = 'checkbox';
declare type BaseWithAria = BaseProps & React.AriaAttributes;
export interface CheckboxProps extends BaseWithAria {
    /**
     * Indicates to the browser that the checkbox should receive focus as soon as
     * it mounts. See
     * [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus)
     */
    autoFocus?: boolean;
    /**
     * A boolean attribute indicate whether the checkbox is checked. See
     * [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefchecked)
     */
    checked?: boolean;
    /**
     *  String descriptor for testing.
     */
    'data-tag'?: string;
    /**
     * Indicates the user should not be able to interact with the checkbox. See
     * [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefdisabled)
     */
    disabled?: boolean;
    /**
     * Hides the label from view and sets `aria-label` on the checkbox for
     * accessibility. A label should always be provided.
     */
    hideLabel?: boolean;
    /**
     * HTML id property.
     */
    id?: string;
    /**
     * A boolean attribute in addition to checked/unchecked which indicates that it is impossible
     * to say whether the item is toggled on or off.
     * [docs(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes)]
     */
    indeterminate?: boolean;
    /**
     * Sets the label for the checkbox; required. To hide the label, see
     * `hideLabel` prop.
     */
    label: string | JSX.Element;
    /**
     * Specifies the position of the label relative to the checkbox.
     */
    labelPosition?: LabelPosition;
    /**
     * A string specifying a name for the checkbox control. This name is submitted
     * along with the control's value when the form data is submitted if the checkbox
     * is checked.
     */
    name?: string;
    /**
     * Called when the checkbox loses focus.
     */
    onBlur?: () => void;
    /**
     * Called when the checkbox is clicked
     */
    onChange: (e: Pick<React.ChangeEvent<HTMLInputElement>, 'target'>) => void;
    /**
     * Called when the checkbox receives focus.
     */
    onFocus?: () => void;
    /**
     * Specifies the role of the checkbox for screen readers. See
     * [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques)
     */
    role?: string;
    /**
     * Changes the text and padding sizes of the checkbox. `Sm`, `Md`, or `Lg`
     * @default 'md'
     * @deprecated custom sizes are no longer supported
     */
    size?: Size;
    /**
     * Specifies the type of data being used in the checkbox. See
     * [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox)
     */
    type?: InputType;
    /**
     * A string specifying the value  for the checkbox control. This is submitted
     * along with the control's name when the form data is submitted if the checkbox
     * is checked.
     */
    value?: string;
}
export {};