@metamask/design-system-react
Version:
Design system react ui components
1 lines • 2.41 kB
Source Map (JSON)
{"version":3,"file":"Checkbox.types.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type CheckboxProps = Omit<\n ComponentProps<'label'>,\n 'style' | 'className' | 'children' | 'htmlFor'\n> & {\n /**\n * Required unique identifier for the checkbox input element.\n * This is used for the input's ID and the label's htmlFor attributes.\n */\n id: string;\n\n /**\n * Required prop to determine whether the checkbox is currently selected.\n * This component is fully controlled, so you must manage this state\n * in your parent component.\n */\n isSelected: boolean;\n\n /**\n * Optional prop that when true, disables the checkbox.\n *\n * @default false\n */\n isDisabled?: boolean;\n\n /**\n * Optional prop that when true, displays the invalid/error state of the checkbox.\n *\n * @default false\n */\n isInvalid?: boolean;\n\n /**\n * Optional label prop that renders text or a React node as a label beside the checkbox.\n */\n label?: React.ReactNode | string;\n\n /**\n * Optional props to be passed to the label's Text component\n */\n labelProps?: Omit<Partial<TextProps>, 'children'>;\n\n /**\n * Required callback for when the checked state changes.\n * Use this to update your state.\n */\n onChange: (isSelected: boolean) => void;\n\n /**\n * Optional props passed to the input element.\n */\n inputProps?: Omit<\n ComponentProps<'input'>,\n 'type' | 'checked' | 'onChange' | 'disabled'\n > & {\n [key: `data-${string}`]: string;\n };\n\n /**\n * Optional props passed to the container div wrapping the checkbox icon.\n */\n checkboxContainerProps?: (Omit<ComponentProps<'div'>, 'children'> & {\n className?: string;\n }) &\n Record<string, unknown>;\n\n /**\n * Optional props to be passed to the check Icon component\n */\n checkedIconProps?: Partial<IconProps>;\n /**\n * Optional prop for additional CSS classes to be applied to the Checkbox component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles for the outer container.\n */\n style?: React.CSSProperties;\n};\n"]}