diff --git a/packages/components/src/checkbox-control/index.tsx b/packages/components/src/checkbox-control/index.tsx
index 54a9952d19949..e4a704c52925a 100644
--- a/packages/components/src/checkbox-control/index.tsx
+++ b/packages/components/src/checkbox-control/index.tsx
@@ -11,6 +11,7 @@ import { useState } from '@wordpress/element';
import { useInstanceId, useRefEffect } from '@wordpress/compose';
import deprecated from '@wordpress/deprecated';
import { Icon, check, reset } from '@wordpress/icons';
+import { __experimentalHStack as HStack } from '@wordpress/components';
/**
* Internal dependencies
@@ -98,41 +99,43 @@ export function CheckboxControl(
help={ help }
className={ classnames( 'components-checkbox-control', className ) }
>
-
-
- { showIndeterminateIcon ? (
-
+
+
- ) : null }
- { showCheckedIcon ? (
-
- ) : null }
-
- { label && (
-
- ) }
+ { showIndeterminateIcon ? (
+
+ ) : null }
+ { showCheckedIcon ? (
+
+ ) : null }
+
+ { label && (
+
+ ) }
+
);
}
diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index 1c471e8446d5c..df8ac48f68417 100644
--- a/packages/components/src/checkbox-control/style.scss
+++ b/packages/components/src/checkbox-control/style.scss
@@ -9,16 +9,11 @@
.components-base-control__help {
margin-left: calc(var(--checkbox-input-size) + #{$grid-unit-15});
}
+}
- .components-base-control__field {
- // Emsure label doesn't wrap beneath checkbox
- display: flex;
- }
-
- .components-checkbox-control__label {
- // Ensure label is aligned with checkbox along X axis
- line-height: var(--checkbox-input-size);
- }
+.components-checkbox-control__label {
+ // Ensure label is aligned with checkbox along X axis
+ line-height: var(--checkbox-input-size);
}
.components-checkbox-control__input[type="checkbox"] {
@@ -67,8 +62,8 @@
margin-right: $grid-unit-15;
vertical-align: middle;
width: var(--checkbox-input-size);
- height: var(--checkbox-input-size);
aspect-ratio: 1;
+ flex-shrink: 0;
}
svg.components-checkbox-control__checked,