diff --git a/src/components/Checkbox/README.md b/src/components/Checkbox/README.md
index 5f219a0..4464c4a 100644
--- a/src/components/Checkbox/README.md
+++ b/src/components/Checkbox/README.md
@@ -28,4 +28,5 @@ import { BBBCheckbox } from 'bbb-ui-components';
| `layout` | `keyof typeof LAYOUTS` | `'right'` | The position of the label relative to the checkbox. |
| `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. |
diff --git a/src/components/Checkbox/component.stories.tsx b/src/components/Checkbox/component.stories.tsx
index d5d14ac..c6f7d22 100644
--- a/src/components/Checkbox/component.stories.tsx
+++ b/src/components/Checkbox/component.stories.tsx
@@ -25,6 +25,10 @@ const meta = {
control: 'text',
description: 'Accessible name for the checkbox.',
},
+ dataTest: {
+ control: 'text',
+ description: '`data-test` attribute on the underlying `` element.',
+ },
},
} satisfies Meta;
diff --git a/src/components/Checkbox/component.tsx b/src/components/Checkbox/component.tsx
index 808740e..4e52e96 100644
--- a/src/components/Checkbox/component.tsx
+++ b/src/components/Checkbox/component.tsx
@@ -17,16 +17,22 @@ function Checkbox({
layout = DEFAULT_LAYOUT,
round = false,
ariaLabel,
+ id,
+ dataTest,
+ inputProps,
...props
}: CheckboxProps): JSX.Element {
- const id = useId();
+ const generatedId = useId();
+ const checkboxId = id ?? generatedId;
+ const mergedInputProps = { 'data-test': dataTest, ...inputProps };
const checkbox = (
: undefined}
checkedIcon={round ? : undefined}
+ inputProps={mergedInputProps}
/>
);
@@ -36,9 +42,9 @@ function Checkbox({
return (
- {layout === LAYOUTS.LEFT && {label}}
+ {layout === LAYOUTS.LEFT && {label}}
{checkbox}
- {layout === LAYOUTS.RIGHT && {label}}
+ {layout === LAYOUTS.RIGHT && {label}}
);
}
diff --git a/src/components/Checkbox/types.ts b/src/components/Checkbox/types.ts
index bd7298c..c61e065 100644
--- a/src/components/Checkbox/types.ts
+++ b/src/components/Checkbox/types.ts
@@ -15,4 +15,7 @@ export interface CheckboxProps extends MuiCheckboxProps {
/** Accessible name for the checkbox. */
ariaLabel?: string;
+
+ /** `data-test` attribute on the underlying `` element. */
+ dataTest?: string;
}