diff --git a/.changeset/young-squids-end.md b/.changeset/young-squids-end.md
new file mode 100644
index 0000000000..d5b5b97c1a
--- /dev/null
+++ b/.changeset/young-squids-end.md
@@ -0,0 +1,7 @@
+---
+'@backstage/ui': minor
+---
+
+Removed redundant `selected` and `indeterminate` props from the `Checkbox` component. Use the `isSelected` and `isIndeterminate` props instead, which are the standard React Aria props and already handle both the checkbox behaviour and the corresponding CSS data attributes.
+
+**Affected components:** Checkbox
diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md
index 12159d7818..834251f088 100644
--- a/packages/ui/report.api.md
+++ b/packages/ui/report.api.md
@@ -830,12 +830,6 @@ export const CheckboxDefinition: {
readonly indicator: 'bui-CheckboxIndicator';
};
readonly propDefs: {
- readonly selected: {
- readonly dataAttribute: true;
- };
- readonly indeterminate: {
- readonly dataAttribute: true;
- };
readonly children: {};
readonly className: {};
};
@@ -843,8 +837,6 @@ export const CheckboxDefinition: {
// @public (undocumented)
export type CheckboxOwnProps = {
- selected?: boolean;
- indeterminate?: boolean;
children: React.ReactNode;
className?: string;
};
diff --git a/packages/ui/src/components/Checkbox/Checkbox.module.css b/packages/ui/src/components/Checkbox/Checkbox.module.css
index deadc96358..54705d95e9 100644
--- a/packages/ui/src/components/Checkbox/Checkbox.module.css
+++ b/packages/ui/src/components/Checkbox/Checkbox.module.css
@@ -20,7 +20,7 @@
.bui-Checkbox {
display: flex;
flex-direction: row;
- align-items: center;
+ align-items: flex-start;
gap: var(--bui-space-2);
font-size: var(--bui-font-size-3);
font-family: var(--bui-font-regular);
diff --git a/packages/ui/src/components/Checkbox/Checkbox.stories.tsx b/packages/ui/src/components/Checkbox/Checkbox.stories.tsx
index e8f7859785..94811d5cb6 100644
--- a/packages/ui/src/components/Checkbox/Checkbox.stories.tsx
+++ b/packages/ui/src/components/Checkbox/Checkbox.stories.tsx
@@ -16,6 +16,8 @@
import preview from '../../../../../.storybook/preview';
import { Checkbox } from './Checkbox';
import { Flex } from '../Flex';
+import { Link } from '../Link';
+import { MemoryRouter } from 'react-router-dom';
const meta = preview.meta({
title: 'Backstage UI/Checkbox',
@@ -28,6 +30,12 @@ export const Default = meta.story({
},
});
+export const Selected = Default.extend({
+ args: {
+ isSelected: true,
+ },
+});
+
export const Indeterminate = meta.story({
args: {
children: 'Select all',
@@ -35,6 +43,25 @@ export const Indeterminate = meta.story({
},
});
+export const WithLongText = Default.extend({
+ args: {
+ children: (
+ <>
+ I agree to receive future communication from Spotify. You may
+ unsubscribe from these communications at any time. Please review our{' '}
+ Privacy Policy
+ >
+ ),
+ },
+ decorators: [
+ Story => (
+
+
+
+ ),
+ ],
+});
+
export const AllVariants = meta.story({
...Default.input,
render: () => (
diff --git a/packages/ui/src/components/Checkbox/Checkbox.tsx b/packages/ui/src/components/Checkbox/Checkbox.tsx
index a825ccfb8a..62599d7ae9 100644
--- a/packages/ui/src/components/Checkbox/Checkbox.tsx
+++ b/packages/ui/src/components/Checkbox/Checkbox.tsx
@@ -46,7 +46,7 @@ export const Checkbox = forwardRef(
)}
- {children}
+ {children}
>
)}
diff --git a/packages/ui/src/components/Checkbox/definition.ts b/packages/ui/src/components/Checkbox/definition.ts
index 5aa2473eac..b6666924ee 100644
--- a/packages/ui/src/components/Checkbox/definition.ts
+++ b/packages/ui/src/components/Checkbox/definition.ts
@@ -29,8 +29,6 @@ export const CheckboxDefinition = defineComponent()({
indicator: 'bui-CheckboxIndicator',
},
propDefs: {
- selected: { dataAttribute: true },
- indeterminate: { dataAttribute: true },
children: {},
className: {},
},
diff --git a/packages/ui/src/components/Checkbox/types.ts b/packages/ui/src/components/Checkbox/types.ts
index 8507df1e5b..d9b220eb2a 100644
--- a/packages/ui/src/components/Checkbox/types.ts
+++ b/packages/ui/src/components/Checkbox/types.ts
@@ -17,8 +17,6 @@ import type { CheckboxProps as RACheckboxProps } from 'react-aria-components';
/** @public */
export type CheckboxOwnProps = {
- selected?: boolean;
- indeterminate?: boolean;
children: React.ReactNode;
className?: string;
};