12:[["$","main",null,{"children":[["$","$L5",null,{"maxW":"100%","children":[["$","$L20","div-0",{"code":"import * as React from 'react'\n\nimport { Checkbox } from 'welcome-ui/Checkbox'\n\nconst Example = () => {\n const [checkbox, setCheckbox] = React.useState(false)\n const [checkboxChecked, setCheckboxChecked] = React.useState(true)\n const [checkboxIndeterminate, setCheckboxIndeterminate] = React.useState(false)\n\n return (\n <>\n setCheckbox(!checkbox)} />\n setCheckboxChecked(!checkboxChecked)}\n />\n setCheckboxIndeterminate(!checkboxIndeterminate)}\n />\n \n \n \n )\n}\n\nexport default Example\n","isOverview":true,"mt":0,"name":"Checkbox","pathToFile":"/Checkbox/docs/examples/overview.tsx","withCodeEditor":true}]]}],["$","$L5",null,{"maxW":"100%","children":[["$","$Lf","h2-0",{"alignItems":"center","as":"h2","borderBottom":"1px solid","borderBottomColor":"neutral-30","display":"flex","id":"examples","mt":"3xl","pb":"sm","style":{"scrollMarginTop":170},"variant":"h3","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#examples","textDecoration":{"hover":"underline"},"children":"Examples"}]}]]}],["$","$L5",null,{"maxW":"100%","children":[["$","$Lf","h3-0",{"as":"h3","id":"with-label","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#with-label","textDecoration":{"hover":"underline"},"children":"With Label"}]}],"\n",["$","$L21","p-0",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Use Field component to add a ","position":{"start":{"line":4,"column":1,"offset":17},"end":{"line":4,"column":30,"offset":46}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"label","position":{"start":{"line":4,"column":30,"offset":46},"end":{"line":4,"column":37,"offset":53}}}],"position":{"start":{"line":4,"column":30,"offset":46},"end":{"line":4,"column":37,"offset":53}}}],"position":{"start":{"line":4,"column":1,"offset":17},"end":{"line":4,"column":37,"offset":53}}},"children":["Use Field component to add a ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"label"}]]}],"\n",["$","$L20","div-0",{"code":"import * as React from 'react'\n\nimport { Checkbox } from 'welcome-ui/Checkbox'\nimport { Field } from 'welcome-ui/Field'\nimport { Stack } from 'welcome-ui/Stack'\n\nconst Example = () => {\n const [checkbox, setCheckbox] = React.useState(false)\n const [checkboxChecked, setCheckboxChecked] = React.useState(true)\n\n return (\n \n \n setCheckbox(!checkbox)} />\n \n \n setCheckboxChecked(!checkboxChecked)}\n />\n \n \n \n \n \n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Checkbox","pathToFile":"/Checkbox/docs/examples/labels.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-1",{"as":"h3","id":"with-hint","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#with-hint","textDecoration":{"hover":"underline"},"children":"With hint"}]}],"\n",["$","$L21","p-1",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Use Field component to add a ","position":{"start":{"line":10,"column":1,"offset":138},"end":{"line":10,"column":30,"offset":167}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"hint","position":{"start":{"line":10,"column":30,"offset":167},"end":{"line":10,"column":36,"offset":173}}}],"position":{"start":{"line":10,"column":30,"offset":167},"end":{"line":10,"column":36,"offset":173}}}],"position":{"start":{"line":10,"column":1,"offset":138},"end":{"line":10,"column":36,"offset":173}}},"children":["Use Field component to add a ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"hint"}]]}],"\n",["$","$L20","div-1",{"code":"import * as React from 'react'\n\nimport { Checkbox } from 'welcome-ui/Checkbox'\nimport { Field } from 'welcome-ui/Field'\n\nconst Example = () => {\n const [checkbox, setCheckbox] = React.useState(false)\n\n return (\n \n setCheckbox(!checkbox)} />\n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Checkbox","pathToFile":"/Checkbox/docs/examples/hint.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-2",{"as":"h3","id":"variants","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#variants","textDecoration":{"hover":"underline"},"children":"Variants"}]}],"\n",["$","$L21","p-2",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Use ","position":{"start":{"line":16,"column":1,"offset":255},"end":{"line":16,"column":5,"offset":259}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"hint","position":{"start":{"line":16,"column":5,"offset":259},"end":{"line":16,"column":11,"offset":265}}}],"position":{"start":{"line":16,"column":5,"offset":259},"end":{"line":16,"column":11,"offset":265}}},{"type":"text","value":", ","position":{"start":{"line":16,"column":11,"offset":265},"end":{"line":16,"column":13,"offset":267}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"warning","position":{"start":{"line":16,"column":13,"offset":267},"end":{"line":16,"column":22,"offset":276}}}],"position":{"start":{"line":16,"column":13,"offset":267},"end":{"line":16,"column":22,"offset":276}}},{"type":"text","value":", ","position":{"start":{"line":16,"column":22,"offset":276},"end":{"line":16,"column":24,"offset":278}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"danger","position":{"start":{"line":16,"column":24,"offset":278},"end":{"line":16,"column":32,"offset":286}}}],"position":{"start":{"line":16,"column":24,"offset":278},"end":{"line":16,"column":32,"offset":286}}},{"type":"text","value":" or ","position":{"start":{"line":16,"column":32,"offset":286},"end":{"line":16,"column":36,"offset":290}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"success","position":{"start":{"line":16,"column":36,"offset":290},"end":{"line":16,"column":45,"offset":299}}}],"position":{"start":{"line":16,"column":36,"offset":290},"end":{"line":16,"column":45,"offset":299}}},{"type":"text","value":" properties on Field component to add a variant status on your checkbox. The label, hint or border color are set by magic 🪄","position":{"start":{"line":16,"column":45,"offset":299},"end":{"line":16,"column":169,"offset":423}}}],"position":{"start":{"line":16,"column":1,"offset":255},"end":{"line":16,"column":169,"offset":423}}},"children":["Use ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"hint"}],", ",["$","$L5","code-1",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"warning"}],", ",["$","$L5","code-2",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"danger"}]," or ",["$","$L5","code-3",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"success"}]," properties on Field component to add a variant status on your checkbox. The label, hint or border color are set by magic 🪄"]}],"\n",["$","$L20","div-2",{"code":"import * as React from 'react'\n\nimport { Checkbox } from 'welcome-ui/Checkbox'\nimport { Field } from 'welcome-ui/Field'\nimport { Stack } from 'welcome-ui/Stack'\n\nconst Example = () => {\n const [checkbox, setCheckbox] = React.useState(false)\n\n return (\n \n \n setCheckbox(!checkbox)}\n />\n \n \n setCheckbox(!checkbox)}\n />\n \n \n setCheckbox(!checkbox)}\n />\n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Checkbox","pathToFile":"/Checkbox/docs/examples/variants.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-3",{"as":"h3","id":"nested-checkboxes","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#nested-checkboxes","textDecoration":{"hover":"underline"},"children":"Nested checkboxes"}]}],"\n",["$","$L21","p-3",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Use 'indeterminate' prop to manage the behaviour of a parent checkbox in response to children checkboxes. This can help you create a nested selection menu.","position":{"start":{"line":22,"column":1,"offset":518},"end":{"line":22,"column":156,"offset":673}}}],"position":{"start":{"line":22,"column":1,"offset":518},"end":{"line":22,"column":156,"offset":673}}},"children":"Use 'indeterminate' prop to manage the behaviour of a parent checkbox in response to children checkboxes. This can help you create a nested selection menu."}],"\n",["$","$L20","div-3",{"code":"$22","isOverview":false,"mt":"$undefined","name":"Checkbox","pathToFile":"/Checkbox/docs/examples/nested.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-4",{"as":"h3","id":"react-hook-form","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#react-hook-form","textDecoration":{"hover":"underline"},"children":"React Hook Form"}]}],"\n",["$","$L21","p-4",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A FieldGroup form with React Hook Form","position":{"start":{"line":28,"column":1,"offset":764},"end":{"line":28,"column":39,"offset":802}}}],"position":{"start":{"line":28,"column":1,"offset":764},"end":{"line":28,"column":39,"offset":802}}},"children":"A FieldGroup form with React Hook Form"}],"\n",["$","div","pre-0",{"children":["$","$L23","code-0",{"language":"jsx","children":"$24"}]}]]}]]}],["$","$L25",null,{"isSubPage":true,"tree":[{"href":"#","id":"definition","title":"Definition"},{"href":"#installation","id":"installation","title":"Installation"},{"href":"#examples","id":"examples","title":"Examples","children":[{"href":"#with-label","id":"with-label","title":"With Label"},{"href":"#with-hint","id":"with-hint","title":"With hint"},{"href":"#variants","id":"variants","title":"Variants"},{"href":"#nested-checkboxes","id":"nested-checkboxes","title":"Nested checkboxes"},{"href":"#react-hook-form","id":"react-hook-form","title":"React Hook Form"}]}]}]]