https://reactnativeelements.com/assets/js/6347d67d.6686e5c9.js

1(self.webpackChunkrne_website=self.webpackChunkrne_website||[]).push([[17798],{11470(e,t,n){"use strict";n.d(t,{A:()=>A});var r=n(58168),a=n(96540),o=n(20053),l=n(23104),i=n(56347),c=n(57485),u=n(31682),s=n(89466);function p(e){return function(e){var t,n;return null!=(t=null==(n=a.Children.map(e,function(e){if(!e||(0,a.isValidElement)(e)&&(t=e.props)&&"object"==typeof t&&"value"in t)return e;var t;throw new Error("Docusaurus error: Bad <Tabs> child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.')}))?void 0:n.filter(Boolean))?t:[]}(e).map(function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes,default:t.default}})}function d(e){var t=e.values,n=e.children;return(0,a.useMemo)(function(){var e=null!=t?t:p(n);return function(e){var t=(0,u.X)(e,function(e,t){return e.value===t.value});if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map(function(e){return e.value}).join(", ")+'" found in <Tabs>. Every value needs to be unique.')}(e),e},[t,n])}function g(e){var t=e.value;return e.tabValues.some(function(e){return e.value===t})}function m(e){var t=e.queryString,n=void 0!==t&&t,r=e.groupId,o=(0,i.W6)(),l=function(e){var t=e.queryString,n=void 0!==t&&t,r=e.groupId;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!r)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=r?r:null}({queryString:n,groupId:r});return[(0,c.aZ)(l),(0,a.useCallback)(function(e){if(l){var t=new URLSearchParams(o.location.search);t.set(l,e),o.replace(Object.assign({},o.location,{search:t.toString()}))}},[l,o])]}function y(e){var t,n,r,o,l=e.defaultValue,i=e.queryString,c=void 0!==i&&i,u=e.groupId,p=d(e),y=(0,a.useState)(function(){return function(e){var t,n=e.defaultValue,r=e.tabValues;if(0===r.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(n){if(!g({value:n,tabValues:r}))throw new Error('Docusaurus error: The <Tabs> has a defaultValue "'+n+'" but none of its children has the corresponding value. Available values are: '+r.map(function(e){return e.value}).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return n}var a=null!=(t=r.find(function(e){return e.default}))?t:r[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:l,tabValues:p})}),h=y[0],f=y[1],v=m({queryString:c,groupId:u}),b=v[0],k=v[1],N=(t=function(e){return e?"docusaurus.tab."+e:null}({groupId:u}.groupId),n=(0,s.Dv)(t),r=n[0],o=n[1],[r,(0,a.useCallback)(function(e){t&&o.set(e)},[t,o])]),A=N[0],C=N[1],D=function(){var e=null!=b?b:A;return g({value:e,tabValues:p})?e:null}();return(0,a.useLayoutEffect)(function(){D&&f(D)},[D]),{selectedValue:h,selectValue:(0,a.useCallback)(function(e){if(!g({value:e,tabValues:p}))throw new Error("Can't select invalid tab value="+e);f(e),k(e),C(e)},[k,C,p]),tabValues:p}}var h=n(92303);const f="tabList__CuJ",v="tabItem_LNqP";function b(e){var t=e.className,n=e.block,i=e.selectedValue,c=e.selectValue,u=e.tabValues,s=[],p=(0,l.a_)().blockElementScrollPositionUntilNextRender,d=function(e){var t=e.currentTarget,n=s.indexOf(t),r=u[n].value;r!==i&&(p(t),c(r))},g=function(e){var t,n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":var r,a=s.indexOf(e.currentTarget)+1;n=null!=(r=s[a])?r:s[0];break;case"ArrowLeft":var o,l=s.indexOf(e.currentTarget)-1;n=null!=(o=s[l])?o:s[s.length-1]}null==(t=n)||t.focus()};return a.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.A)("tabs",{"tabs--block":n},t)},u.map(function(e){var t=e.value,n=e.label,l=e.attributes;return a.createElement("li",(0,r.A)({role:"tab",tabIndex:i===t?0:-1,"aria-selected":i===t,key:t,ref:function(e){return s.push(e)},onKeyDown:g,onClick:d},l,{className:(0,o.A)("tabs__item",v,null==l?void 0:l.className,{"tabs__item--active":i===t})}),null!=n?n:t)}))}function k(e){var t=e.lazy,n=e.children,r=e.selectedValue,o=(Array.isArray(n)?n:[n]).filter(

1Boolean);if(t){var l=o.find(function(e){return e.props.value===r});return l?(0,a.cloneElement)(l,{className:"margin-top--md"}):null}return a.createElement("div",{className:"margin-top--md"},o.map(function(e,t){return(0,a.cloneElement)(e,{key:t,hidden:e.props.value!==r})}))}function N(e){var t=y(e);return a.createElement("div",{className:(0,o.A)("tabs-container",f)},a.createElement(b,(0,r.A)({},e,t)),a.createElement(k,(0,r.A)({},e,t)))}function A(e){var t=(0,h.A)();return a.createElement(N,(0,r.A)({key:String(t)},e))}},14340(e,t,n){"use strict";n.d(t,{A:()=>c});var r=n(96540),a=n(76214),o=n(64775),l=n(10171),i=n(11451);const c=function(){var e=(0,l.A)({componentName:"CheckBox",props:{center:{type:i.B.Boolean,value:!1,description:"Aligns checkbox to center (optional)"},right:{type:i.B.Boolean,value:!1,description:"Aligns checkbox to right (optional)"},checked:{type:i.B.Boolean,value:!1,stateful:!0,description:"Flag for checking the icon (required)"},checkedColor:{type:i.B.String,value:"#0F0",description:"Default checked color (optional)"},checkedIcon:{type:i.B.Object,value:"",description:"string OR React Native Component\t"},checkedTitle:{type:i.B.String,value:"Great!",description:"Specify a custom checked message (optional)"},Component:{type:i.B.ReactNode,value:null,description:"React Native Component"},containerStyle:{type:i.B.Object,value:'{width: "75%"}',description:"Style of main container (optional)"},fontFamily:{type:i.B.String,value:null,description:"Specify different font family"},iconRight:{type:i.B.Boolean,value:!1,description:"Moves icon to right of text (optional)"},iconType:{type:i.B.String,value:null,description:"type of icon set"},onIconPress:{type:i.B.Function,value:"() => setChecked(!checked)",propHook:{what:"!checked",into:"checked"},description:"onPress function for checkbox (required)"},onLongIconPress:{type:i.B.Function,value:'() => console.log("onLongIconPress()")',description:"onLongPress function for checkbox (optional)"},onLongPress:{type:i.B.Function,value:'() => console.log("onLongPress()")',description:"onLongPress function for checkbox (optional)"},onPress:{type:i.B.Function,value:'() => console.log("onPress()")',description:"onPress function for container (optional)"},size:{type:i.B.Number,value:30,description:"Size of the checkbox"},textStyle:{type:i.B.Object,value:"{}",description:"Style of text (optional)"},title:{type:i.B.Object,value:'"Check for Awesomeness"',description:"Title of checkbox"},titleProps:{type:i.B.Object,value:"{}",description:"Additional props for the title Text component (optional)"},uncheckedColor:{type:i.B.String,value:"#F00",description:"Default unchecked color (optional)"},uncheckedIcon:{type:i.B.Object,value:null,description:"string OR React Native Component"}},scope:{CheckBox:a.CheckBox},imports:{"@rneui/base":{named:["CheckBox"]}}});return r.createElement(r.Fragment,null,r.createElement(o.A,{params:e}))}},15680(e,t,n){"use strict";n.d(t,{xA:()=>s,yg:()=>g});var r=n(96540);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach(function(t){a(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function i(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=r.createContext({}),u=function(e){var t=r.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=u(e.components);return r.createElement(c.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef(function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,s=i(e,["components","mdxType","originalType","parentName"]),d=u(n),g=a,m=d["".concat(c,".").concat(g)]||d[g]||p[g]||o;return n?r.createElement(m,l(l({ref:t},s),{},{components:n}

1)):r.createElement(m,l({ref:t},s))});function g(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,l=new Array(o);l[0]=d;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:a,l[1]=i;for(var u=2;u<o;u++)l[u]=n[u];return r.createElement.apply(null,l)}return r.createElement.apply(null,n)}d.displayName="MDXCreateElement"},18411(){},19365(e,t,n){"use strict";n.d(t,{A:()=>l});var r=n(96540),a=n(20053);const o="tabItem_Ymn6";function l(e){var t=e.children,n=e.hidden,l=e.className;return r.createElement("div",{role:"tabpanel",className:(0,a.A)(o,l),hidden:n},t)}},52172(e,t,n){"use strict";n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>d,default:()=>f,frontMatter:()=>p,metadata:()=>g,toc:()=>y});var r=n(58168),a=n(98587),o=(n(96540),n(15680)),l=(n(11470),n(19365),["components"]),i={toc:[]};function c(e){var t=e.components,n=(0,a.A)(e,l);return(0,o.yg)("wrapper",(0,r.A)({},i,n,{components:t,mdxType:"MDXLayout"}),(0,o.yg)("div",{className:"snack-player","data-snack-name":"RNE CheckBox","data-snack-description":"Example usage","data-snack-code":"import%20React%2C%20%7B%20useState%20%7D%20from%20'react'%3B%0Aimport%20%7B%20CheckBox%2C%20Icon%20%7D%20from%20'%40rneui%2Fthemed'%3B%0A%0Atype%20CheckboxComponentProps%20%3D%20%7B%7D%3B%0A%0Aconst%20CheckboxComponent%3A%20React.FunctionComponent%3CCheckboxComponentProps%3E%20%3D%20()%20%3D%3E%20%7B%0Aconst%20%5Bcheck1%2C%20setCheck1%5D%20%3D%20useState(false)%3B%0Aconst%20%5Bcheck2%2C%20setCheck2%5D%20%3D%20useState(false)%3B%0Aconst%20%5Bcheck3%2C%20setCheck3%5D%20%3D%20useState(false)%3B%0Aconst%20%5Bcheck4%2C%20setCheck4%5D%20%3D%20useState(false)%3B%0A%0Areturn%20(%0A%20%20%3C%3E%0A%20%20%20%20%3CCheckBox%0A%20%20%20%20%20%20center%0A%20%20%20%20%20%20title%3D%22Click%20Here%22%0A%20%20%20%20%20%20checked%3D%7Bcheck1%7D%0A%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20setCheck1(!check1)%7D%0A%20%20%20%20%2F%3E%0A%0A%20%20%20%20%3CCheckBox%0A%20%20%20%20%20%20center%0A%20%20%20%20%20%20title%3D%22Click%20Here%22%0A%20%20%20%20%20%20checkedIcon%3D%22dot-circle-o%22%0A%20%20%20%20%20%20uncheckedIcon%3D%22circle-o%22%0A%20%20%20%20%20%20checked%3D%7Bcheck2%7D%0A%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20setCheck2(!check2)%7D%0A%20%20%20%20%2F%3E%0A%0A%20%20%20%20%3CCheckBox%0A%20%20%20%20%20%20center%0A%20%20%20%20%20%20title%3D%7B%60Click%20Here%20to%20%24%7Bcheck3%20%3F%20'Remove'%20%3A%20'Add'%7D%20This%20Item%60%7D%0A%20%20%20%20%20%20iconRight%0A%20%20%20%20%20%20iconType%3D%22material%22%0A%20%20%20%20%20%20checkedIcon%3D%22clear%22%0A%20%20%20%20%20%20uncheckedIcon%3D%22add%22%0A%20%20%20%20%20%20checkedColor%3D%22red%22%0A%20%20%20%20%20%20checked%3D%7Bcheck3%7D%0A%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20setCheck3(!check3)%7D%0A%20%20%20%20%2F%3E%0A%0A%20%20%20%20%3CCheckBox%0A%20%20%20%20%20%20center%0A%20%20%20%20%20%20checkedIcon%3D%7B%0A%20%20%20%20%20%20%20%20%3CIcon%0A%20%20%20%20%20%20%20%20%20%20name%3D%22radio-button-checked%22%0A%20%20%20%20%20%20%20%20%20%20type%3D%22material%22%0A%20%20%20%20%20%20%20%20%20%20color%3D%22green%22%0A%20%20%20%20%20%20%20%20%20%20size%3D%7B25%7D%0A%20%20%20%20%20%20%20%20%20%20iconStyle%3D%7B%7B%20marginRight%3A%2010%20%7D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20uncheckedIcon%3D%7B%0A%20%20%20%20%20%20%20%20%3CIcon%0A%20%20%20%20%20%20%20%20%20%20name%3D%22radio-button-unchecked%22%0A%20%20%20%20%20%20%20%20%20%20type%3D%22material%22%0A%20%20%20%20%20%20%20%20%20%20color%3D%22grey%22%0A%20%20%20%20%20%20%20%20%20%20size%3D%7B25%7D%0A%20%20%20%20%20%20%20%20%20%20iconStyle%3D%7B%7B%20marginRight%3A%2010%20%7D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20checked%3D%7Bcheck4%7D%0A%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20setCheck4(!check4)%7D%0A%20%20%20%20%2F%3E%0A%20%20%3C%2F%3E%0A)%3B%0A%7D%3B%0A%0Aexport%20default%20CheckboxComponent%3B","data-snack-dependencies":"@rneui/themed,@rneui/base","data-snack-platform":"web","data-snack-supported-platforms":"ios,android,web","data-snack-theme":"light","data-snack-

1preview":"true","data-snack-loading":"lazy"}))}c.isMDXComponent=!0;var u=n(14340),s=["components"],p={id:"checkbox",title:"CheckBox"},d=void 0,g={unversionedId:"components/checkbox",id:"version-4.0.0-rc.3/components/checkbox",title:"CheckBox",description:"CheckBoxes allow users to complete tasks that involve making choices such as selecting options, or switching settings - On or Off.",source:"@site/versioned_docs/version-4.0.0-rc.3/components/CheckBox.mdx",sourceDirName:"components",slug:"/components/checkbox",permalink:"/docs/4.0.0-rc.3/components/checkbox",draft:!1,editUrl:"https://github.com/react-native-elements/react-native-elements/edit/next/website/versioned_docs/version-4.0.0-rc.3/components/CheckBox.mdx",tags:[],version:"4.0.0-rc.3",frontMatter:{id:"checkbox",title:"CheckBox"},sidebar:"docs",previous:{title:"Card.Title",permalink:"/docs/4.0.0-rc.3/components/card_title"},next:{title:"Chip",permalink:"/docs/4.0.0-rc.3/components/chip"}},m={},y=[{value:"Import",id:"import",level:2},{value:"Usage",id:"usage",level:2},{value:"Props",id:"props",level:2},{value:"Playground",id:"playground",level:2}],h={toc:y};function f(e){var t=e.components,n=(0,a.A)(e,s);return(0,o.yg)("wrapper",(0,r.A)({},h,n,{components:t,mdxType:"MDXLayout"}),(0,o.yg)("p",null,"CheckBoxes allow users to complete tasks that involve making choices such as selecting options, or switching settings - On or Off.\nIt provides a clear visual of either a true or false choice."),(0,o.yg)("h2",{id:"import"},"Import"),(0,o.yg)("pre",null,(0,o.yg)("code",{parentName:"pre",className:"language-tsx"},'import { CheckBox } from "@rneui/themed";\n')),(0,o.yg)("h2",{id:"usage"},"Usage"),(0,o.yg)(c,{mdxType:"Usage"}),(0,o.yg)("h2",{id:"props"},"Props"),(0,o.yg)("admonition",{type:"note"},(0,o.yg)("p",{parentName:"admonition"},"Includes all ",(0,o.yg)("a",{parentName:"p",href:"checkboxicon#props"},"CheckBoxIcon"),", ",(0,o.yg)("a",{parentName:"p",href:"https://reactnative.dev/docs/view#props"},"View")," props.")),(0,o.yg)("div",{class:"table-responsive"},(0,o.yg)("table",null,(0,o.yg)("thead",{parentName:"table"},(0,o.yg)("tr",{parentName:"thead"},(0,o.yg)("th",{parentName:"tr",align:null},"Name"),(0,o.yg)("th",{parentName:"tr",align:null},"Type"),(0,o.yg)("th",{parentName:"tr",align:null},"Default"),(0,o.yg)("th",{parentName:"tr",align:null},"Description"))),(0,o.yg)("tbody",{parentName:"table"},(0,o.yg)("tr",{parentName:"tbody"},(0,o.yg)("td",{parentName:"tr",align:null},(0,o.yg)("inlineCode",{parentName:"td"},"Component")),(0,o.yg)("td",{parentName:"tr",align:null},"React Component"),(0,o.yg)("td",{parentName:"tr",align:null}),(0,o.yg)("td",{parentName:"tr",align:null},"Specify React Native component for main button.")),(0,o.yg)("tr",{parentName:"tbody"},(0,o.yg)("td",{parentName:"tr",align:null},(0,o.yg)("inlineCode",{parentName:"td"},"center")),(0,o.yg)("td",{parentName:"tr",align:null},"boolean"),(0,o.yg)("td",{parentName:"tr",align:null},(0,o.yg)("inlineCode",{parentName:"td"},"false")),(0,o.yg)("td",{parentName:"tr",align:null},"Aligns checkbox to center.")),(0,o.yg)("tr",{parentName:"tbody"},(0,o.yg)("td",{parentName:"tr",align:null},(0,o.yg)("inlineCode",{parentName:"td"},"checkedTitle")),(0,o.yg)("td",{parentName:"tr",align:null},"string"),(0,o.yg)("td",{parentName:"tr",align:null}),(0,o.yg)("td",{parentName:"tr",align:null},"Specify a custom checked message.")),(0,o.yg)("tr",{parentName:"tbody"},(0,o.yg)("td",{parentName:"tr",align:null},(0,o.yg)("inlineCode",{parentName:"td"},"containerStyle")),(0,o.yg)("td",{parentName:"tr",align:null},"View Style"),(0,o.yg)("td",{parentName:"tr",align:null}),(0,o.yg)("td",{parentName:"tr",align:null},"Style of main container.")),(0,o.yg)("tr",{parentName:"tbody"},(0,o.yg)("td",{parentName:"tr",align:null},(0,o.yg)("inlineCode",{parentName:"td"},"disabled")),(0,o.yg)("td",{parentName:"tr",align:null},"boolean"),(0,o.yg)("td",{parentName:"tr",align:null},(0,o.yg)("inlineCode",{parentName:"td"},"false")),(0,o.yg)("td",{parentName:"tr",align:null},"Disables user interaction.")),(0,o.yg)("tr",{parentName:"tbody"},(0,o.yg)("td",{parentName:"tr",align:null},(0,o.yg)("inlineCode",{parentName:"td"},"disabledStyle")),(0,o.yg)("td",{parentName:"tr",align:null},"View Style"),(0,o.yg)("td",{parentName:"tr",align:null}),(0,o.yg)("td",{parentName:"tr",align:null},"Style of the checkbox container when disabled.")),(0,o.yg)("tr",{parentName:"tbody"},(0,o.yg)("td",{parentName:"tr",align:null},(0,o.yg)("inlineCode",{parentName:"td"},"disabledTitleStyle")),(0,o.yg)("td",{parentName:"tr",align:null},"Text Style"),(0,o.yg)("td",{parentName:"tr",align:null}),(0,o.yg)("td",{parentName:"tr",align:null},"Style of the title when disabled.")),(0,o.yg)("tr",{parentName:"tbody"},(0,o.yg)("td",{parentName:"tr",align:null},(0,o.yg)("inlineCode",{parentName:"td"},"fontFamily")),(0,o.yg)("td",{parentName:"tr",align:null},"string"),(0,o.yg)("td",{parentName:"tr",align:null}),(0,o.yg)("td",{parentName:"tr",align:null},"Specify different font family.")),(0,o.yg)("tr",{parentName:"tbody"},(0,o.yg)("td",{parentName:"tr",align:null},(0,o.yg)("inlineCode",{parentName:"td"},"iconRight")),(0,o.yg)("td",{parentName:"tr",align:null},"boolean"),(0,o.yg)("td",{parentName:"tr",align:null},(0,o.yg)("inlineCode",{parentName:"td"},"false")),(0,o.yg)("td",{parentName:"tr",align:null},"Moves icon to right of text.")),(0,o.yg)("tr",{parentName:"tbody"},(0,o.yg)("td",{parentName:"tr",align:null},(0,o.yg)("inlineCode",{parentName:"td"},"right")),(0,o.yg)("td",{parentName:"tr",align:null},"boolean"),(0,o.yg)("td",{parentName:"tr",align:null},(0,o.yg)("inlineCode",{parentName:"td"},"false")),(0,o.yg)("td",{parentName:"tr",align:null},"Aligns checkbox to right.")),(0,o.yg)("tr",{parentName:"tbody"},(0,o.yg)("td",{parentName:"tr",align:null},(0,o.yg)("inlineCode",{parentName:"td"},"textStyle")),(0,o.yg)("td",{parentName:"tr",align:null},"Text Style"),(0,o.yg)("td",{parentName:"tr",align:null}),(0,o.yg)("td",{parentName:"tr",align:null},"Style of text.")),(0,o.yg)("tr",{parentName:"tbody"},(0,o.yg)("td",{parentName:"tr",align:null},(0,o.yg)("inlineCode",{parentName:"td"},"title")),(0,o.yg)("td",{parentName:"tr",align:null},(0,o.yg)("inlineCode",{parentName:"td"},"string")," or ",(0,o.yg)("inlineCode",{parentName:"td"},"ReactElement<{}, string")," or ",(0,o.yg)("inlineCode",{parentName:"td"},"JSXElementConstructor<any>>")),(0,o.yg)("td",{parentName:"tr",align:null}),(0,o.yg)("td",{parentName:"tr",align:null},"Title of checkbox.")),(0,o.yg)("tr",{parentName:"tbody"},(0,o.yg)("td",{parentName:"tr",align:null},(0,o.yg)("inlineCode",{parentName:"td"},"titleProps")),(0,o.yg)("td",{parentName:"tr",align:null},"TextProps"),(0,o.yg)("td",{parentName:"tr",align:null},(0,o.yg)("inlineCode",{parentName:"td"},"{}")),(0,o.yg)("td",{parentName:"tr",align:null},"Additional props for the title Text component.")),(0,o.yg)("tr",{parentName:"tbody"},(0,o.yg)("td",{parentName:"tr",align:null},(0,o.yg)("inlineCode",{parentName:"td"},"wrapperStyle")),(0,o.yg)("td",{parentName:"tr",align:null},"View Style"),(0,o.yg)("td",{parentName:"tr",align:null}),(0,o.yg)("td",{parentName:"tr",align:null},"Style for the wrapper of checkbox."))))),(0,o.yg)("h2",{id:"playground"},"Playground"),(0,o.yg)(u.A,{mdxType:"Play"}))}f.isMDXComponent=!0},52352(){}

1,64775(e,t,n){"use strict";n.d(t,{A:()=>g});var r=n(58168),a=n(96540),o=n(78478),l=n(32594),i=n(11245),c=n(96109),u=n(34397),s=n(20018),p=n(50546),d=n(25407);const g=function(e){var t=e.params,n=e.containerStyle,g=void 0===n?{}:n;return a.createElement(o.A,{fallback:a.createElement(a.Fragment,null,"Loading...")},function(){return a.createElement(p.q9.Provider,null,a.createElement(p.Oy,{initialMetrics:d.Y},a.createElement("div",{style:Object.assign({border:"1px solid var(--ifm-color-emphasis-200)",borderRadius:"var(--ifm-global-radius)",position:"relative"},g)},a.createElement(l.A,(0,r.A)({},t.compilerProps,{minHeight:62,placeholder:s.A}))),a.createElement(c.A,{msg:t.errorProps.msg,isPopup:!0}),a.createElement(i.A,t.knobProps),a.createElement(c.A,t.errorProps),a.createElement(u.w,t.actions)))})}}}]);