@mantine/core/lib/components/Checkbox/CheckboxGroup/CheckboxGroup.d.ts

React components library focused on usability, accessibility and developer experience

import { DataAttributes, Factory, MantineSize } from '../../../core';
import { InputWrapperProps, InputWrapperStylesNames } from '../../Input';
export interface CheckboxGroupContextValue<Value extends string = string> {
    value: Value[];
    onChange: (event: React.ChangeEvent<HTMLInputElement> | string) => void;
    size: MantineSize | (string & {}) | undefined;
    isDisabled?: (value: Value) => boolean;
}
export declare const CheckboxGroupContext: import("react").Context<CheckboxGroupContextValue<string> | null>;
export type CheckboxGroupStylesNames = InputWrapperStylesNames;
export interface CheckboxGroupProps<Value extends string = string> extends Omit<InputWrapperProps, 'onChange'> {
    /** `Checkbox` components and any other elements */
    children: React.ReactNode;
    /** Controlled component value */
    value?: Value[];
    /** Default value for uncontrolled component */
    defaultValue?: Value[];
    /** Called with an array of selected checkboxes values when value changes */
    onChange?: (value: Value[]) => void;
    /** Props passed down to the root element (`Input.Wrapper` component) */
    wrapperProps?: React.ComponentProps<'div'> & DataAttributes;
    /** Controls size of the `Input.Wrapper` @default 'sm' */
    size?: MantineSize | (string & {});
    /** If set, value cannot be changed */
    readOnly?: boolean;
    /** `name` attribute of the hidden input for uncontrolled forms */
    name?: string;
    /** Props passed down to the hidden input for uncontrolled forms */
    hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;
    /** Separator for values in the hidden input for uncontrolled forms @default ',' */
    hiddenInputValuesSeparator?: string;
    /** Maximum number of checkboxes that can be selected. When the limit is reached, unselected checkboxes will be disabled */
    maxSelectedValues?: number;
    /** Sets `disabled` attribute, prevents interactions */
    disabled?: boolean;
}
export type CheckboxGroupFactory = Factory<{
    props: CheckboxGroupProps;
    ref: HTMLDivElement;
    stylesNames: CheckboxGroupStylesNames;
    signature: <Value extends string = string>(props: CheckboxGroupProps<Value>) => React.JSX.Element;
}>;
export declare const CheckboxGroup: (<Value extends string = string>(props: CheckboxGroupProps<Value>) => React.JSX.Element) & import("../../..").ThemeExtend<{
    props: CheckboxGroupProps;
    ref: HTMLDivElement;
    stylesNames: CheckboxGroupStylesNames;
    signature: <Value extends string = string>(props: CheckboxGroupProps<Value>) => React.JSX.Element;
}> & import("../../..").ComponentClasses<{
    props: CheckboxGroupProps;
    ref: HTMLDivElement;
    stylesNames: CheckboxGroupStylesNames;
    signature: <Value extends string = string>(props: CheckboxGroupProps<Value>) => React.JSX.Element;
}> & Record<string, never> & import("../../..").FactoryComponentWithProps<{
    props: CheckboxGroupProps;
    ref: HTMLDivElement;
    stylesNames: CheckboxGroupStylesNames;
    signature: <Value extends string = string>(props: CheckboxGroupProps<Value>) => React.JSX.Element;
}> & {
    displayName?: string;
};