diff --git a/src/components/Checkbox/README.md b/src/components/Checkbox/README.md
index 4464c4a..9770aad 100644
--- a/src/components/Checkbox/README.md
+++ b/src/components/Checkbox/README.md
@@ -29,4 +29,4 @@ import { BBBCheckbox } from 'bbb-ui-components';
| `round` | `boolean` | `false` | If `true`, the checkbox will be rendered as a round radio-style button. |
| `ariaLabel`| `string` | | The accessible name for the checkbox. |
| `dataTest` | `string` | | The `data-test` attribute on the underlying `` element. |
-| `...props` | `any` | | Any other props will be passed down to the underlying Material-UI Checkbox component. |
+| `...props` | `Omit` | | Any other props will be passed down to the underlying Material-UI Checkbox component. Use `slotProps.input` to set attributes on the ``. |
diff --git a/src/components/Checkbox/component.tsx b/src/components/Checkbox/component.tsx
index 4e52e96..87e74d3 100644
--- a/src/components/Checkbox/component.tsx
+++ b/src/components/Checkbox/component.tsx
@@ -1,4 +1,5 @@
import React, { JSX, useId } from 'react';
+import { CheckboxOwnerState } from '@mui/material';
import { CheckboxProps } from './types';
import * as Styled from './styles';
import { DEFAULT_LAYOUT, LAYOUTS } from './constants';
@@ -19,20 +20,23 @@ function Checkbox({
ariaLabel,
id,
dataTest,
- inputProps,
+ slotProps,
...props
}: CheckboxProps): JSX.Element {
const generatedId = useId();
const checkboxId = id ?? generatedId;
- const mergedInputProps = { 'data-test': dataTest, ...inputProps };
+ const ownInputProps = { 'aria-label': ariaLabel, 'data-test': dataTest };
+ const { input: consumerInputSlotProps, ...otherSlotProps } = slotProps ?? {};
+ const inputSlotProps = typeof consumerInputSlotProps === 'function'
+ ? (ownerState: CheckboxOwnerState) => ({ ...ownInputProps, ...consumerInputSlotProps(ownerState) })
+ : { ...ownInputProps, ...consumerInputSlotProps };
const checkbox = (
: undefined}
checkedIcon={round ? : undefined}
- inputProps={mergedInputProps}
+ slotProps={{ ...otherSlotProps, input: inputSlotProps }}
/>
);
diff --git a/src/components/Checkbox/types.ts b/src/components/Checkbox/types.ts
index c61e065..b8f7df1 100644
--- a/src/components/Checkbox/types.ts
+++ b/src/components/Checkbox/types.ts
@@ -3,7 +3,7 @@ import { LAYOUTS } from './constants';
type Layout = typeof LAYOUTS[keyof typeof LAYOUTS];
-export interface CheckboxProps extends MuiCheckboxProps {
+export interface CheckboxProps extends Omit {
/** Text label displayed next to the checkbox. */
label?: string;