@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
38 lines (37 loc) • 2 kB
TypeScript
import { BoxProps, CompoundStylesApiProps, ElementProps, Factory, MantineColor } from '../../../core';
export type MenuCheckboxItemStylesNames = 'item' | 'itemLabel' | 'itemSection' | 'itemIndicator';
export interface MenuCheckboxItemProps extends BoxProps, CompoundStylesApiProps<MenuCheckboxItemFactory>, ElementProps<'button', 'color' | 'onChange' | 'value'> {
'data-disabled'?: boolean;
/** Item label */
children?: React.ReactNode;
/** Key of `theme.colors` or any valid CSS color */
color?: MantineColor;
/** If set, closes the menu when this item is clicked. By default, checkbox items do not close the menu. */
closeMenuOnClick?: boolean;
/** Section displayed at the end of the label */
rightSection?: React.ReactNode;
/** Sets disabled attribute, applies disabled styles */
disabled?: boolean;
/** Value of the checkbox item. When used inside `Menu.CheckboxGroup`, determines whether the item is checked and what value is added/removed on toggle. */
value?: string;
/** Controlled checked state. Overrides selection derived from the parent `Menu.CheckboxGroup`. */
checked?: boolean;
/** Uncontrolled default checked state. Ignored when the item is used inside `Menu.CheckboxGroup`. */
defaultChecked?: boolean;
/** Called when checked state changes. Overrides `onChange` of the parent `Menu.CheckboxGroup`. */
onChange?: (checked: boolean) => void;
/** Replaces the default check icon rendered in the indicator slot when the item is checked. Overrides `checkIcon` set on `Menu`. */
checkIcon?: React.ReactNode;
}
export type MenuCheckboxItemFactory = Factory<{
props: MenuCheckboxItemProps;
ref: HTMLButtonElement;
stylesNames: MenuCheckboxItemStylesNames;
compound: true;
}>;
export declare const MenuCheckboxItem: import("../../..").MantineComponent<{
props: MenuCheckboxItemProps;
ref: HTMLButtonElement;
stylesNames: MenuCheckboxItemStylesNames;
compound: true;
}>;