diff --git a/build.washingtonpost.com/docs/components/checkbox.mdx b/build.washingtonpost.com/docs/components/checkbox.mdx
index 686f39a75..930e1eae5 100644
--- a/build.washingtonpost.com/docs/components/checkbox.mdx
+++ b/build.washingtonpost.com/docs/components/checkbox.mdx
@@ -198,12 +198,9 @@ export default function Example() {
gap: "$100",
}}
>
-
+
+ Click checkbox to see focus
+
);
}
@@ -222,13 +219,9 @@ export default function Example() {
gap: "$100",
}}
>
-
+
+ This is a required checkbox
+
);
}
@@ -290,9 +283,10 @@ export default function Example() {
variant="primary"
isOutline
size="125"
- label="Category"
id="cb1"
- />
+ >
+ Category
+
+ >
+ Option 1
+
setCheck3(!Check3)}
@@ -322,9 +317,10 @@ export default function Example() {
variant="primary"
isOutline
size="125"
- label="Option 2"
id="cb3"
- />
+ >
+ Option 2
+
@@ -363,9 +359,76 @@ export default function Example() {
variant="primary"
isOutline
size="125"
- label="Checkbox"
id="cb4"
- />
+ >
+ Checkbox
+
+
+
+ );
+}
+```
+
+### Custom labels
+
+You may want different styles applied to your labels.
+
+```jsx withPreview isGuide="success"
+export default function Example() {
+ const [Check1, setCheck1] = useState(false);
+ const [Check2, setCheck2] = useState(false);
+
+ const StyledLabel = styled("div", {
+ textDecoration: "line-through",
+ });
+
+ return (
+
+ setCheck1(!Check1)}
+ css={{
+ cursor: "pointer",
+ display: "flex",
+ marginTop: "$100",
+ gap: "$025",
+ }}
+ >
+
+ This label is struck through
+
+
+ setCheck2(!Check2)}
+ css={{
+ cursor: "pointer",
+ display: "flex",
+ marginTop: "$100",
+ gap: "$025",
+ }}
+ >
+
+ This label has{" "}
+ a link to the homepage
+
);
diff --git a/ui/checkbox/README.md b/ui/checkbox/README.md
index 9341f54a7..17f8add78 100644
--- a/ui/checkbox/README.md
+++ b/ui/checkbox/README.md
@@ -4,6 +4,42 @@
import { Checkbox } from "@washingtonpost/wpds-ui-kit";
function Component() {
- return ;
+ return Checkbox label;
+}
+```
+
+### Checkbox Label
+
+There are two ways you can pass in a label to the checkbox component:
+
+- The label prop. This option only takes in a string.
+- As a child. This allows you to style your label to your preference. You can include links, custom stylings, etc.
+
+```jsx
+import { Checkbox } from "@washingtonpost/wpds-ui-kit";
+
+function Component() {
+ const StyledLabel = styled("div", {
+ textDecoration: "line-through",
+ });
+
+ return (
+
+ This is the label
+
+ );
+}
+```
+
+```jsx
+import { Checkbox } from "@washingtonpost/wpds-ui-kit";
+
+function Component() {
+ return (
+
+ You can pass in links.{" "}
+ Like this link to our docs site
+
+ );
}
```
diff --git a/ui/checkbox/src/Checkbox.tsx b/ui/checkbox/src/Checkbox.tsx
index 7126270b4..d80c88422 100644
--- a/ui/checkbox/src/Checkbox.tsx
+++ b/ui/checkbox/src/Checkbox.tsx
@@ -233,6 +233,8 @@ interface CheckboxInterface extends CheckboxVariants {
value?: string;
id?: string;
label?: string;
+ /** The correspoding label to the checkbox. Allows you to pass in more than just text */
+ children?: React.ReactNode;
}
const StyledCheck = styled("span", {