text: "use strict";(globalThis["webpackChunkquasar_dev"]=globalThis["webpackChunkquasar_dev"]||[]).push([[78549],{78549:(e,o,t)=>{t.r(o),t.d(o,{default:()=>H});var i=t(83673);const a=(0,i._)("p",null,"The QCheckbox component is another basic element for user input. You can use this to supply a way for the user to toggle an option.",-1),n={class:"doc-note doc-note--tip"},l=(0,i._)("p",{class:"doc-note__title"},"TIP",-1),d=(0,i.Uk)("Please also refer to the "),s=(0,i.Uk)("QOptionGroup"),c=(0,i.Uk)(" on other possibilities for creating groups of Checkboxes."),r=(0,i._)("p",null,[(0,i.Uk)("In the second row in the example below, the property "),(0,i._)("code",{class:"doc-token"},"keep-color"),(0,i.Uk)(" is being used to retain the passed in color when the checkbox is not in a toggled state.")],-1),h=(0,i._)("p",null,[(0,i.Uk)("Apart from the standard sizes below, you can define your own through the "),(0,i._)("code",{class:"doc-token"},"size"),(0,i.Uk)(" property (last one is a custom size).")],-1),u=(0,i._)("p",null,[(0,i.Uk)("In the example below, as soon as you click on the first checkbox it starts toggling between true/false. The second checkbox, on the other hand toggles between the three states (indeterminate/true/false) with help from "),(0,i._)("code",{class:"doc-token"},"toggle-indeterminate"),(0,i.Uk)(". You can optionally set the property "),(0,i._)("code",{class:"doc-token"},"indeterminate-value"),(0,i.Uk)(", otherwise the indeterminate value will be considered "),(0,i._)("code",{class:"doc-token"},"null"),(0,i.Uk)(".")],-1),g=(0,i._)("p",null,[(0,i.Uk)("By default, QCheckbox follows this chain when toggling: indeterminate -> checked -> unchecked. However, you can change this behavior through the "),(0,i._)("code",{class:"doc-token"},"toggle-order"),(0,i.Uk)(" prop. This property determines the order of the states and can be "),(0,i._)("code",{class:"doc-token"},"tf"),(0,i.Uk)(" (default) or "),(0,i._)("code",{class:"doc-token"},"ft"),(0,i.Uk)(" ("),(0,i._)("code",{class:"doc-token"},"t"),(0,i.Uk)(" stands for state of true/checked while "),(0,i._)("code",{class:"doc-token"},"f"),(0,i.Uk)(" for state of false/unchecked).")],-1),k=(0,i._)("p",null,"Toggling order is:",-1),p=(0,i._)("ul",null,[(0,i._)("li",null,[(0,i.Uk)("if "),(0,i._)("code",{class:"doc-token"},"toggle-indeterminate"),(0,i.Uk)(" is true, then: indet -> first state -> second state -> indet (and repeat)")]),(0,i._)("li",null,"otherwise (no toggle-indeterminate): indet -> first state -> second state -> first state -> second state -> …")],-1),m={class:"doc-note doc-note--tip"},b=(0,i._)("p",{class:"doc-note__title"},"TIP",-1),f=(0,i.Uk)("You can also use "),_=(0,i.Uk)("QOptionGroup"),C=(0,i.Uk)(", which simplifies the usage when you have groups of checkboxes, like in example below."),w=(0,i._)("p",null,[(0,i.Uk)("In the example below, we are rendering a "),(0,i._)("code",{class:"doc-token"},"<label>"),(0,i.Uk)(" tag (notice "),(0,i._)("code",{class:"doc-token"},'tag="label"'),(0,i.Uk)(") so the QCheckbox will respond to clicks on QItems to change toggle state.")],-1),y=(0,i._)("p",null,[(0,i.Uk)("When dealing with a native form which has an "),(0,i._)("code",{class:"doc-token"},"action"),(0,i.Uk)(" and a "),(0,i._)("code",{class:"doc-token"},"method"),(0,i.Uk)(" (eg. when using Quasar with ASP.NET controllers), you need to specify the "),(0,i._)("code",{class:"doc-token"},"name"),(0,i.Uk)(" property on QCheckbox, otherwise formData will not contain it (if it should) - all value are converted to string (native behaviour, so do not use Object values):")],-1);function x(e,o,t,x,v,Q){const U=(0,i.up)("doc-link"),W=(0,i.up)("doc-api"),H=(0,i.up)("doc-example"),I=(0,i.up)("doc-page");return(0,i.wg)(),(0,i.j4)(I,{"meta-title":x.metaTitle,title:"Checkbox",related:x.related,toc:x.toc,"meta-desc":x.metaDesc},{default:(0,i.w5)((()=>[a,(0,i._)("div",n,[l,(0,i._)("p",null,[d,(0,i.Wm)(U,{to:"/vue-components/option-group"},{default:(0,i.w5)((()=>[s])),_:1}),c])]),(0,i._)("h2",{id:"qcheckbox-api",class:"doc-heading doc-h2",onClick:o[0]||(o[0]=e=>x.copyHeading("qcheckbox-api"))},"QCheckbox API"),(0,i.Wm)(W,{file:"QCheckbox"}),(0,i._)("h2",{id:"usage",class:"doc-heading doc-h2",onClick:o[1]||(o[1]=e=>x.copyHeading("usage"))},"Usage"),(0,i._)("h3",{id:"standard",class:"doc-heading doc-h3",onClick:o[2]||(o[2]=e=>x.copyHeading("standard"))},"Standard"),(0,i.Wm)(H,{title:"Standard",file:"QCheckbox/Standard"}),(0,i._)("h3",{id:"label",class:"doc-heading doc-h3",onClick:o[3]||(o[3]=e=>x.copyHeading("label"))},"Label"),(0,i.Wm)(H,{title:"Label",file:"QCheckbox/Label"}),(0,i._)("h3",{id:"coloring",class:"doc-heading doc-h3",onClick:o[4]||(o[4]=e=>x.copyHeading("coloring"))},"Coloring"),r,(0,i.Wm)(H,{title:"Coloring",file:"QCheckbox/Coloring"}),(0,i._)("h3",{id:"dense-and-dark",class:"doc-heading doc-h3",onClick:o[5]||(o[5]=e=>x.copyHeading("dense-and-dark"))},"Dense and dark"),(0,i.Wm)(H,{title:"Dense",file:"QCheckbox/Dense"}),(0,i.Wm)(H,{title:"On a dark background",file:"QCheckbox/OnDarkBackground",dark:""}),(0,i._)("h3",{id:"sizes",class:"doc-heading doc-h3",onClick:o[6]||(o[6]=e=>x.copyHeading("sizes"))},"Sizes"),h,(0,i.Wm)(H,{title:"Standard sizes",file:"QCheckbox/StandardSizes"}),(0,i._)("h3",{id:"indeterminate-state",class:"doc-heading doc-h3",onClick:o[7]||(o[7]=e=>x.copyHeading("indeterminate-state"))},"Indeterminate state"),u,(0,i.Wm)(H,{title:"Indeterminate state",file:"QCheckbox/IndeterminateState"}),(0,i._)("h3",{id:"toggle-order",class:"doc-heading doc-h3",onClick:o[8]||(o[8]=e=>x.copyHeading("toggle-order"))},"Toggle order"),g,k,p,(0,i.Wm)(H,{title:"Toggle order",file:"QCheckbox/ToggleOrder"}),(0,i._)("h3",{id:"array-model",class:"doc-heading doc-h3",onClick:o[9]||(o[9]=e=>x.copyHeading("array-model"))},"Array model"),(0,i.Wm)(H,{title:"Array as model",file:"QCheckbox/ArrayAsModel"}),(0,i._)("h3",{id:"custom-model-values",class:"doc-heading doc-h3",onClick:o[10]||(o[10]=e=>x.copyHeading("custom-model-values"))},"Custom model values"),(0,i.Wm)(H,{title:"Custom model values",file:"QCheckbox/CustomModel"}),(0,i._)("h3",{id:"with-qoptiongroup",class:"doc-heading doc-h3",onClick:o[11]||(o[11]=e=>x.copyHeading("with-qoptiongroup"))},"With QOptionGroup"),(0,i._)("div",m,[b,(0,i._)("p",null,[f,(0,i.Wm)(U,{to:"/vue-components/option-group"},{default:(0,i.w5)((()=>[_])),_:1}),C])]),(0,i.Wm)(H,{title:"Usage with QOptionGroup",file:"QCheckbox/OptionGroup"}),(0,i._)("h3",{id:"with-qitem",class:"doc-heading doc-h3",onClick:o[12]||(o[12]=e=>x.copyHeading("with-qitem"))},"With QItem"),w,(0,i.Wm)(H,{title:"With QItem",file:"QCheckbox/InaList"}),(0,i._)("h3",{id:"disable",class:"doc-heading doc-h3",onClick:o[13]||(o[13]=e=>x.copyHeading("disable"))},"Disable"),(0,i.Wm)(H,{title:"Disable",file:"QCheckbox/Disable"}),(0,i._)("h3",{id:"native-form-submit",class:"doc-heading doc-h3",onClick:o[14]||(o[14]=e=>x.copyHeading("native-form-submit"))},"Native form submit"),y,(0,i.Wm)(H,{title:"Native form",file:"QCheckbox/NativeForm"})])),_:1},8,["meta-title","related","toc","meta-desc"])}var v=t(17536);const Q={name:"DocMarkdownPage",setup(){return{metaTitle:"Checkbox",metaDesc:"The QCheckbox Vue component is a checkbox with features like coloring, ripple and indeterminate state.",related:[{name:"切换开关",category:"表单组件",path:"/vue-components/toggle"},{name:"选项组",category:"表单组件",path:"/vue-components/option-group"},{name:"单选框",category:"表单组件",path:"/vue-components/radio"},{name:"按钮切换",category:"表单组件",path:"/vue-components/button-toggle"}],toc:[{id:"qcheckbox-api",title:"QCheckbox API"},{id:"usage",title:"Usage"},{id:"standard",title:"Standard",sub:!0},{id:"label",title:"Label",sub:!0},{id:"coloring",title:"Coloring",sub:!0},{id:"dense-and-dark",title:"Dense and dark",sub:!0},{id:"sizes",title:"Sizes",sub:!0},{id:"indeterminate-state",title:"Indeterminate state",sub:!0},{id:"toggle-order",title:"Toggle order",sub:!0},{id:"array-model",title:"Array model",sub:!0},{id:"custom-model-values",title:"Custom model values",sub:!0},{id:"with-qoptiongroup",title:"With QOptionGroup",sub:!0},{id:"with-qitem",title:"With QItem",sub:!0},{id:"disable",title:"Disable",sub:!0},{id:"native-form-submit",title:"Native form submit",sub:!0}],copyHeading:v.Et}}};var U=t(74260);const W=(0,U.Z)(Q,[["render",x]]),H=W}}]);