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", {