From 8c80c0e2be01b4868aa55727b6cfcfca0ef438ba Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 31 Jan 2024 02:31:22 +0900
Subject: [PATCH] CheckboxControl: Add custom label example to Storybook
 (#58438)

---
 .../checkbox-control/stories/index.story.tsx  | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/packages/components/src/checkbox-control/stories/index.story.tsx b/packages/components/src/checkbox-control/stories/index.story.tsx
index ce55cfb655a17..6752ce07667cb 100644
--- a/packages/components/src/checkbox-control/stories/index.story.tsx
+++ b/packages/components/src/checkbox-control/stories/index.story.tsx
@@ -13,6 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import CheckboxControl from '..';
 import { VStack } from '../../v-stack';
+import { HStack } from '../../h-stack';
 
 const meta: Meta< typeof CheckboxControl > = {
 	component: CheckboxControl,
@@ -115,3 +116,46 @@ Indeterminate.args = {
 	label: 'Select all',
 	__nextHasNoMarginBottom: true,
 };
+
+/**
+ * For more complex designs, a custom `<label>` element can be associated with the checkbox
+ * by leaving the `label` prop undefined and using the `id` and `htmlFor` props instead.
+ * Because the label element also functions as a click target for the checkbox, [do not
+ * place interactive elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#interactive_content)
+ * such as links or buttons inside the `<label>` node.
+ *
+ * Similarly, a custom description can be added by omitting the `help` prop
+ * and using the `aria-describedby` prop instead.
+ */
+export const WithCustomLabel: StoryFn< typeof CheckboxControl > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ isChecked, setChecked ] = useState( true );
+
+	return (
+		<HStack justify="flex-start" alignment="top" spacing={ 0 }>
+			<CheckboxControl
+				{ ...args }
+				checked={ isChecked }
+				onChange={ ( v ) => {
+					setChecked( v );
+					onChange( v );
+				} }
+				id="my-checkbox-with-custom-label"
+				aria-describedby="my-custom-description"
+			/>
+			<VStack>
+				<label htmlFor="my-checkbox-with-custom-label">
+					My custom label
+				</label>
+				<div id="my-custom-description" style={ { fontSize: 13 } }>
+					A custom description.
+				</div>
+			</VStack>
+		</HStack>
+	);
+};
+WithCustomLabel.args = {
+	__nextHasNoMarginBottom: true,
+};