[{"data":1,"prerenderedAt":391},["ShallowReactive",2],{"help-article-\u002Fhelp\u002Finput-fields\u002Fshow-or-hide-element":3},{"id":4,"title":5,"body":6,"category":373,"description":374,"extension":375,"keywords":376,"meta":381,"navigation":382,"order":383,"path":384,"published":385,"rawbody":386,"seo":387,"stem":388,"updated":389,"__hash__":390},"help\u002Fhelp\u002Finput-fields\u002Fshow-or-hide-element.md","Create a checkbox input field: let users show or hide an element",{"type":7,"value":8,"toc":366},"minimark",[9,22,25,38,43,181,190,194,200,277,293,297,302,336],[10,11,12,13,17,18,21],"p",{},"In the ",[14,15,16],"place",{},"template editor",", a checkbox input field lets users show or hide an element in the ",[14,19,20],{},"design generator",", for example a logo or a note. When they tick the box, the element shows, otherwise it doesn't.",[10,23,24],{},"This takes three steps:",[26,27,28,32,35],"ol",{},[29,30,31],"li",{},"Create the checkbox input field in the template editor.",[29,33,34],{},"Configure the input field in the Input Fields view.",[29,36,37],{},"Test the input field in the design generator.",[39,40,42],"h2",{"id":41},"create-the-checkbox-input-field","Create the checkbox input field",[26,44,45,70,83,119,166],{},[29,46,47,51,52,55,56,60,61,64],{},[48,49,50],"click",{},"Click"," the square with the plus in the ",[14,53,54],{},"toolbar"," at the top. This is the ",[57,58,59],"strong",{},"Create Input Field"," tool.",[62,63],"br",{},[65,66],"img",{"alt":67,"src":68,"width":69},"Toolbar with the Create Input Field tool highlighted.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-01\u002Fpublic",894,[29,71,72,74,75,78,79,82],{},[48,73,50],{}," the element users should be able to show or hide. You can click it on the ",[14,76,77],{},"canvas"," or in the ",[14,80,81],{},"layers panel",".",[29,84,85,86,113,115,116,118],{},"Depending on the element, go on like this:",[87,88,89,108],"ul",{},[29,90,91,94,95,97,98,101,102,104],{},[92,93],"right",{}," For a text, an image or a shape: a popup opens. ",[48,96,50],{}," ",[57,99,100],{},"Select Custom Property"," in it.",[62,103],{},[65,105],{"alt":106,"src":107,"width":69},"Popup for a text with the Select Custom Property button highlighted, and a preview of the input field on the right.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-select-custom-property-01\u002Fpublic?v=e3e9ae14",[29,109,110,112],{},[92,111],{}," For a group or mask: no popup opens. Go straight on with step 4.",[62,114],{},"The ",[14,117,77],{}," now shows the hint \"Select a property to connect a field.\"",[29,120,121,123,124,127,128,131,132,135,136,139,140,143,144,159,161],{},[48,122,50],{}," the ",[57,125,126],{},"Visibility"," property in the ",[57,129,130],{},"Appearance"," section of the ",[14,133,134],{},"properties panel",". It is at the bottom of the section, next to ",[57,137,138],{},"Opacity",", and shows \"true\". A ",[57,141,142],{},"Create Field"," popup opens.",[145,146,148],"trouble",{"symptom":147},"You can't see Visibility?",[10,149,150,151,153,154,97,156,158],{},"For groups and masks, the ",[57,152,130],{}," section is collapsed. ",[48,155,50],{},[57,157,130],{}," to open it.",[62,160],{},[65,162],{"alt":163,"src":164,"width":165},"Appearance section of a selected rectangle with the Visibility property highlighted, next to Opacity.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-show-or-hide-element-01\u002Fpublic",938,[29,167,168,97,170,173,174,176],{},[48,169,50],{},[57,171,172],{},"Checkbox",". The checkbox input field is now created and connected to the element's visibility.",[62,175],{},[65,177],{"alt":178,"src":179,"width":180},"Create Field popup for the Visibility property with the field types Select and Checkbox.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-checkbox-input-fields-01\u002Fpublic",504,[182,183,184],"tip",{},[10,185,186,187,189],{},"To show or hide several elements at once, group them and connect the group's ",[57,188,126],{}," to the checkbox input field.",[39,191,193],{"id":192},"configure-the-input-field","Configure the input field",[10,195,115,196,199],{},[14,197,198],{},"Input Fields view"," shows all input fields of your template, and you configure them there.",[26,201,202,222,233,242,247,258,266],{},[29,203,204,97,206,209,210,212,213,215,216,218],{},[48,205,50],{},[57,207,208],{},"Input Fields"," at the top right of the ",[14,211,54],{},". The ",[14,214,198],{}," opens.",[62,217],{},[65,219],{"alt":220,"src":221,"width":69},"Top right of the toolbar with the Input Fields button highlighted.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-02\u002Fpublic",[29,223,224,228,229,232],{},[225,226,227],"look",{},"Look"," at the bottom of the list for your new input field. It is called ",[57,230,231],{},"Toggle",". Its tick shows whether the element is visible right now. That is the default value users start with.",[29,234,235,97,237,239,240,82],{},[48,236,50],{},[57,238,231],{}," and type a heading that says what it is about, for example \"Show logo\". Users see it above the checkbox in the ",[14,241,20],{},[29,243,244,246],{},[48,245,50],{}," the gear on the right of the input field. The settings open.",[29,248,249,253,254,257],{},[250,251,252],"type",{},"Type"," the text that should stand next to the checkbox under ",[57,255,256],{},"Label",". The label is optional.",[29,259,260,97,262,265],{},[48,261,50],{},[57,263,264],{},"Done",". The settings close.",[29,267,268,97,270,274,275,82],{},[48,269,50],{},[271,272,273],"close",{},"×"," at the top right to close the ",[14,276,198],{},[278,279,280],"warning",{},[10,281,115,282,284,285,287,288,290,291,82],{},[14,283,198],{}," is not a preview. Ticking or unticking the box here changes the default value for good. The same goes for the eye in the ",[14,286,81],{},": if you hide the element there, the checkbox starts unticked in the ",[14,289,20],{},". Test input fields in the ",[14,292,20],{},[39,294,296],{"id":295},"test-the-input-field-in-the-design-generator","Test the input field in the design generator",[10,298,115,299,301],{},[14,300,20],{}," is the page where users fill in your template and export their design. You can test the input field there safely: whatever you select doesn't change your template for good.",[26,303,304,321,331],{},[29,305,306,307,97,309,312,313,316,317,320],{},"When you are done with your input fields, ",[48,308,48],{},[57,310,311],{},"Share"," at the top right and then ",[57,314,315],{},"Publish Template Link",". If you have published the template before, the menu item is called ",[57,318,319],{},"Open Template Campaign",". A popup with the share settings opens. Your template can now be reached through a link.",[29,322,323,97,325,328,329,215],{},[48,324,50],{},[57,326,327],{},"Copy URL"," and open the link in a new browser tab. The ",[14,330,20],{},[29,332,333,335],{},[48,334,50],{}," the checkbox. Check that the element disappears and comes back with the next click.",[337,338,339],"related",{},[87,340,341,348,354,360],{},[29,342,343],{},[344,345,347],"a",{"href":346},"\u002Fhelp\u002Finput-fields\u002Felements-properties-input-fields","How elements, properties and input fields fit together",[29,349,350],{},[344,351,353],{"href":352},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fgroup-elements","Group elements: move and arrange them together",[29,355,356],{},[344,357,359],{"href":358},"\u002Fhelp\u002Finput-fields\u002Fcheckbox-input-fields","Checkbox input fields",[29,361,362],{},[344,363,365],{"href":364},"\u002Fhelp\u002Fexpressions-and-logic\u002Fguide-if-else-logic","IF \u002F ELSE logic: switch between two outcomes",{"title":367,"searchDepth":368,"depth":368,"links":369},"",2,[370,371,372],{"id":41,"depth":368,"text":42},{"id":192,"depth":368,"text":193},{"id":295,"depth":368,"text":296},"input-fields","Let users of your design generator decide with a checkbox whether an element shows in the design.","md",[172,126,377,378,379,380,100,256],"show","hide","toggle","optional",{},true,14,"\u002Fhelp\u002Finput-fields\u002Fshow-or-hide-element","2026-10-13","---\ntitle: \"Create a checkbox input field: let users show or hide an element\"\ndescription: \"Let users of your design generator decide with a checkbox whether an element shows in the design.\"\ncategory: input-fields\norder: 14\nkeywords: [\"Checkbox\", \"Visibility\", \"show\", \"hide\", \"toggle\", \"optional\", \"Select Custom Property\", \"Label\"]\n---\n\nIn the :place[template editor], a checkbox input field lets users show or hide an element in the :place[design generator], for example a logo or a note. When they tick the box, the element shows, otherwise it doesn't.\n\nThis takes three steps:\n\n1. Create the checkbox input field in the template editor.\n2. Configure the input field in the Input Fields view.\n3. Test the input field in the design generator.\n\n\n## Create the checkbox input field\n\n1. :click[Click] the square with the plus in the :place[toolbar] at the top. This is the **Create Input Field** tool.\n\n   ![Toolbar with the Create Input Field tool highlighted.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-01\u002Fpublic){width=\"894\"}\n\n2. :click[Click] the element users should be able to show or hide. You can click it on the :place[canvas] or in the :place[layers panel].\n3. Depending on the element, go on like this:\n\n   - :right For a text, an image or a shape: a popup opens. :click[Click] **Select Custom Property** in it.\n\n     ![Popup for a text with the Select Custom Property button highlighted, and a preview of the input field on the right.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-select-custom-property-01\u002Fpublic?v=e3e9ae14){width=\"894\"}\n\n   - :right For a group or mask: no popup opens. Go straight on with step 4.\n\n   The :place[canvas] now shows the hint \"Select a property to connect a field.\"\n4. :click[Click] the **Visibility** property in the **Appearance** section of the :place[properties panel]. It is at the bottom of the section, next to **Opacity**, and shows \"true\". A **Create Field** popup opens.\n\n   ::trouble{symptom=\"You can't see Visibility?\"}\n   For groups and masks, the **Appearance** section is collapsed. :click[Click] **Appearance** to open it.\n   ::\n\n   ![Appearance section of a selected rectangle with the Visibility property highlighted, next to Opacity.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-show-or-hide-element-01\u002Fpublic){width=\"938\"}\n\n5. :click[Click] **Checkbox**. The checkbox input field is now created and connected to the element's visibility.\n\n   ![Create Field popup for the Visibility property with the field types Select and Checkbox.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-checkbox-input-fields-01\u002Fpublic){width=\"504\"}\n\n::tip\nTo show or hide several elements at once, group them and connect the group's **Visibility** to the checkbox input field.\n::\n\n## Configure the input field\n\nThe :place[Input Fields view] shows all input fields of your template, and you configure them there.\n\n1. :click[Click] **Input Fields** at the top right of the :place[toolbar]. The :place[Input Fields view] opens.\n\n   ![Top right of the toolbar with the Input Fields button highlighted.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-create-input-field-02\u002Fpublic){width=\"894\"}\n\n2. :look[Look] at the bottom of the list for your new input field. It is called **Toggle**. Its tick shows whether the element is visible right now. That is the default value users start with.\n3. :click[Click] **Toggle** and type a heading that says what it is about, for example \"Show logo\". Users see it above the checkbox in the :place[design generator].\n4. :click[Click] the gear on the right of the input field. The settings open.\n5. :type[Type] the text that should stand next to the checkbox under **Label**. The label is optional.\n6. :click[Click] **Done**. The settings close.\n7. :click[Click] :close[×] at the top right to close the :place[Input Fields view].\n\n::warning\nThe :place[Input Fields view] is not a preview. Ticking or unticking the box here changes the default value for good. The same goes for the eye in the :place[layers panel]: if you hide the element there, the checkbox starts unticked in the :place[design generator]. Test input fields in the :place[design generator].\n::\n\n## Test the input field in the design generator\n\nThe :place[design generator] is the page where users fill in your template and export their design. You can test the input field there safely: whatever you select doesn't change your template for good.\n\n1. When you are done with your input fields, :click[click] **Share** at the top right and then **Publish Template Link**. If you have published the template before, the menu item is called **Open Template Campaign**. A popup with the share settings opens. Your template can now be reached through a link.\n2. :click[Click] **Copy URL** and open the link in a new browser tab. The :place[design generator] opens.\n3. :click[Click] the checkbox. Check that the element disappears and comes back with the next click.\n\n::related\n- [How elements, properties and input fields fit together](\u002Fhelp\u002Finput-fields\u002Felements-properties-input-fields)\n- [Group elements: move and arrange them together](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fgroup-elements)\n- [Checkbox input fields](\u002Fhelp\u002Finput-fields\u002Fcheckbox-input-fields)\n- [IF \u002F ELSE logic: switch between two outcomes](\u002Fhelp\u002Fexpressions-and-logic\u002Fguide-if-else-logic)\n::\n",{"title":5,"description":374},"help\u002Finput-fields\u002Fshow-or-hide-element","2026-10-22","mtdylYh4ZHvE813eWM63i-6FvSqo5cY1kVVmyIyG8Zg",1792680560649]