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

React components library focused on usability, accessibility and developer experience

import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../../core';
import type { CheckboxIconComponent } from '../Checkbox';
export type CheckboxIndicatorStylesNames = 'indicator' | 'icon';
export type CheckboxIndicatorVariant = 'filled' | 'outline';
export type CheckboxIndicatorCssVariables = {
    indicator: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';
};
export interface CheckboxIndicatorProps extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {
    /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */
    color?: MantineColor;
    /** Controls size of the component @default 'sm' */
    size?: MantineSize | (string & {});
    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */
    radius?: MantineRadius;
    /** Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` */
    iconColor?: MantineColor;
    /** If set, adjusts icon color based on background color for `filled` variant */
    autoContrast?: boolean;
    /** Indeterminate state of the checkbox. If set, `checked` prop is ignored. */
    indeterminate?: boolean;
    /** Icon for checked or indeterminate state */
    icon?: CheckboxIconComponent;
    /** Determines whether the component should have checked styles */
    checked?: boolean;
    /** Indicates disabled state */
    disabled?: boolean;
}
export type CheckboxIndicatorFactory = Factory<{
    props: CheckboxIndicatorProps;
    ref: HTMLDivElement;
    stylesNames: CheckboxIndicatorStylesNames;
    vars: CheckboxIndicatorCssVariables;
    variant: CheckboxIndicatorVariant;
}>;
export declare const CheckboxIndicator: import("../../..").MantineComponent<{
    props: CheckboxIndicatorProps;
    ref: HTMLDivElement;
    stylesNames: CheckboxIndicatorStylesNames;
    vars: CheckboxIndicatorCssVariables;
    variant: CheckboxIndicatorVariant;
}>;