) } `,__src__:"src/demo/checkbox-group-state-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" { CheckboxGroup } "}),(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"@/components/ui/checkbox"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" { Switch } "}),(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"@/components/ui/switch"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" { TextInput } "}),(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"@/components/ui/text-input"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EBC88D"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"react"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EEEEEE",fontWeight:"bold"},children:"CheckboxGroupDemo"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" [value, setValue] = React."}),(0,e.jsx)(l.span,{style:{color:"#EBC88D"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"(["}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"1"'}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"])"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" [disabled, setDisabled] = React."}),(0,e.jsx)(l.span,{style:{color:"#EBC88D"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#EBC88D"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" [readonly, setReadonly] = React."}),(0,e.jsx)(l.span,{style:{color:"#EBC88D"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#EBC88D"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" [error, setError] = React."}),(0,e.jsx)(l.span,{style:{color:"#EBC88D"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" [help, setHelp] = React."}),(0,e.jsx)(l.span,{style:{color:"#EBC88D"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#84BFF9"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"w-full"'}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#84BFF9"},children:"CheckboxGroup"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"Country"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"{value}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" onValueChange"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"{setValue}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" options"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"{["})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" { value: "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"us"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"United States"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" { value: "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"ci"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:`"C\xF4te d'Ivoire"`}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" { value: "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"ca"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"Canada"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" { value: "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"jp"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"Japan"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" { value: "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"br"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"Brazil"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:", disabled: "}),(0,e.jsx)(l.span,{style:{color:"#EBC88D"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" },"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" ]}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" fieldClass"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"w-fit"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" disabled"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"{disabled}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" readonly"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"{readonly}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" error"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"{error}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" help"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"{help}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#84BFF9"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"p-4 border rounded-[--radius] mt-4 space-y-2"'}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#84BFF9"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"flex gap-2"'}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#84BFF9"},children:"Switch"}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"{disabled} onValueChange"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"{setDisabled} label"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"Disabled"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#84BFF9"},children:"Switch"}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"{readonly} onValueChange"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"{setReadonly} label"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"Readonly"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#84BFF9"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"flex gap-2"'}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#84BFF9"},children:"TextInput"}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"{error} onValueChange"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"{setError} label"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"Error"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"sm"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#84BFF9"},children:"TextInput"}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"{help} onValueChange"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"{setHelp} label"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"Help/Description"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"sm"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"}"})})]})})})}),` `,(0,e.jsxs)(l.h3,{id:"uncontrolled",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#uncontrolled",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Uncontrolled"]}),` `,(0,e.jsxs)(l.ul,{children:[` `,(0,e.jsxs)(l.li,{children:["Input type: ",(0,e.jsx)(l.code,{children:'"text"'}),", Ref prop: ",(0,e.jsx)(l.code,{children:"ref"})]}),` `,(0,e.jsx)(l.li,{children:"A stringified array of selected values will be submitted."}),` `,(0,e.jsx)(l.li,{children:"If not required, a stringified empty array will be submitted if no option is selected."}),` `]}),` `,(0,e.jsx)(s,{name:"checkbox-group-uncontrolled-demo",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Button } from "@/components/ui/button" import { CheckboxGroup } from "@/components/ui/checkbox" import * as React from "react" export function CheckboxGroupUncontrolledDemo() { return (

{ e.preventDefault() alert(JSON.stringify(e.currentTarget.elements["group"].value, null, 2)) }} className="space-y-2 w-full" > ) } `,__src__:"src/demo/checkbox-group-uncontrolled-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" { Button } "}),(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"@/components/ui/button"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" { CheckboxGroup } "}),(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"@/components/ui/checkbox"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EBC88D"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"react"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EEEEEE",fontWeight:"bold"},children:"CheckboxGroupUncontrolledDemo"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"() {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#84BFF9"},children:"form"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" action"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"#"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" method"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"get"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"{e "}),(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" e."}),(0,e.jsx)(l.span,{style:{color:"#EBC88D"},children:"preventDefault"}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"()"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EBC88D"},children:"alert"}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"(JSON."}),(0,e.jsx)(l.span,{style:{color:"#EBC88D"},children:"stringify"}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"(e.currentTarget.elements["}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"group"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"].value, "}),(0,e.jsx)(l.span,{style:{color:"#EBC88D"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#EBC88D"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"))"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" }}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"space-y-2 w-full"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#84BFF9"},children:"CheckboxGroup"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"group"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"Country"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" required"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" options"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:"{["})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" { value: "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"us"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"United States"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" { value: "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"ci"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:`"C\xF4te d'Ivoire"`}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" { value: "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"ca"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"Canada"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" { value: "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"jp"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"Japan"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" },"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" { value: "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"br"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:", label: "}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"Brazil"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:", disabled: "}),(0,e.jsx)(l.span,{style:{color:"#EBC88D"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" },"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" ]}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#84BFF9"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"submit"'}),(0,e.jsx)(l.span,{style:{color:"#AF9CFF"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"sm"'}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:">Submit"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"}"})})]})})})}),` `,(0,e.jsxs)(l.h2,{id:"api-reference",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#api-reference",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"API Reference"]}),` `,(0,e.jsxs)(c,{name:"checkbox-group",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:"No styles",__src__:"src/workshop/checkbox/checkbox-group.tsx",children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"default",children:(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"No styles"})})})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`type CheckboxGroupOption = { value: string, label?: React.ReactNode, disabled?: boolean, readonly?: boolean } type CheckboxGroupProps = BasicFieldOptions & { /** * The value of the checkbox group. */ value?: string[] /** * The default value of the checkbox group when uncontrolled. */ defaultValue?: string[] /** * Callback invoked when the value of the checkbox group changes. */ onValueChange?: (value: string[]) => void /** * The size of the checkboxes. */ size?: CheckboxProps["size"] /** * The options of the checkbox group. */ options: CheckboxGroupOption[] /** * Class names applied to the container. */ stackClass?: string /** * Class names applied to each checkbox container. */ itemContainerClass?: string /** * Class names applied to each checkbox label. */ itemLabelClass?: string /** * Class names applied to each checkbox button. */ itemClass?: string /** * Class names applied to each checkbox check icon. */ itemCheckIconClass?: string }`,__src__:"src/workshop/checkbox/checkbox-group.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#84BFF9"},children:"CheckboxGroupOption"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" = { value: string, label?: "}),(0,e.jsx)(l.span,{style:{color:"#84BFF9"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#84BFF9"},children:"ReactNode"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:", disabled?: boolean, readonly?: boolean }"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#84BFF9"},children:"CheckboxGroupProps"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" = "}),(0,e.jsx)(l.span,{style:{color:"#84BFF9"},children:"BasicFieldOptions"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" & {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#898989"},children:" * The value of the checkbox group."})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" value?: string[]"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#898989"},children:" * The default value of the checkbox group when uncontrolled."})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" defaultValue?: string[]"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#898989"},children:" * Callback invoked when the value of the checkbox group changes."})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EEEEEE",fontWeight:"bold"},children:"onValueChange"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"?: (value: string[]) "}),(0,e.jsx)(l.span,{style:{color:"#7ECBC7"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" void"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#898989"},children:" * The size of the checkboxes."})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" size?: "}),(0,e.jsx)(l.span,{style:{color:"#84BFF9"},children:"CheckboxProps"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#DEA060"},children:'"size"'}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"]"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#898989"},children:" * The options of the checkbox group."})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" options: "}),(0,e.jsx)(l.span,{style:{color:"#84BFF9"},children:"CheckboxGroupOption"}),(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"[]"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#898989"},children:" * Class names applied to the container."})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" stackClass?: string"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#898989"},children:" * Class names applied to each checkbox container."})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" itemContainerClass?: string"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#898989"},children:" * Class names applied to each checkbox label."})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" itemLabelClass?: string"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#898989"},children:" * Class names applied to each checkbox button."})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" itemClass?: string"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#898989"},children:" * Class names applied to each checkbox check icon."})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#898989"},children:" */"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:" itemCheckIconClass?: string"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#CACACA"},children:"}"})})]})})})]})]})}function g(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(d,n)})):d(n)}var f=g;function h(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return N(x);})(); ;return Component;

Checkbox Group

Installation

Usage

State

Uncontrolled

API Reference

Types

Anatomy