Help Center
    Help Center
  1. Creating your site
  2. Advanced features
  3. CMS
  4. Connecting user input elements to the CMS
    5. CMS: Setting Up a Single Checkbox Input Element

CMS: Setting Up a Single Checkbox Input Element

14 min read

Give visitors a way to filter live site items by a boolean (true or false) collection field or submit binary responses with the single Checkbox input element. 

For example, you could set the checkbox to filter an "available" boolean field, so visitors can click to view only items that are available in a repeater or gallery. Or, you could set the checkbox to collect responses and use it to let visitors subscribe to your newsletter. 
Tip:
This article is about setting up the single Checkbox input element. Alternatively, you can use a Multi-Checkbox input element to let visitors filter or submit multiple choices. 
In this article, learn more about: 

Using the Checkbox input element to filter content on your live site

Connect your Checkbox input element to the same dataset as your repeater or gallery to filter content. Choose the boolean field (true or false) that the checkbox will filter and set the condition (checked or unchecked). When visitors click the checkbox, the repeater or gallery will show items based on the boolean field value as per the selected condition.
Wix Editor
Studio Editor
  1. Go to your editor.
  2. Add the Checkbox input element: 
    1. Go to the page or section where you want visitors to filter content by a boolean value. 
    2. Click Add Elements  on the left side of the editor.
    3. Click Input.
    4. Click Checkboxes. 
    5. Scroll down to the single Checkbox input elements. 
    6. Click and drag the relevant single Checkbox input element onto the page. 
Screenshot of adding a single Checkbox input element in the Wix Editor.
  1. Connect the Checkbox element to the CMS:
    1. Click the Connect to CMS icon  on the Checkbox element. 
    2. Select Filter content in the Connect Checkbox panel on the right. 
      Tip: If you haven't added a dataset to the page yet, add a dataset first (see the next step) then select Filter content. 
    3. Click the Choose a dataset drop-down and select the same dataset that connects to the elements (e.g. repeater, gallery, table) that you want visitors to filter. 
    4. Click the Filter content by drop-down and choose the boolean field that visitors will use to filter the content.
      Tip: To add a new field to your collection and use it for filtering content, select Add new field, then enter the field name and click Add. You can add values to the field in your CMS collection later. 
    5. Click the Condition drop-down and choose an operator:
      • Selected: Show items that have their boolean field marked as checked (set to True). 
      • Is not selected: Show items that do not have their boolean field marked as checked (set to False). 
Screenshot of the CMS connection options for the Checkbox element.
  1. Customize the Checkbox input element: 
    • Click the Settings icon  to edit the following: 
      • Checkbox text: Edit the text that displays next to the checkbox and lets visitors know what the checkbox does. 
      • Value: (Velo only) Enter the component's value property used in JavaScript code.
      • Field type: Disregard the Required and Checked by default settings, which are only relevant if you set the Checkbox to collect content.
      • Link Settings: Enable the toggle to add linked text next to the Checkbox text. Enter the Link text and set the link destination. 
    • Click the Layout icon  to set the checkbox size, spacing and alignment. 
    • Click the Design icon  to choose a preset design and customize it further. 
    • Click the Animation icon  to choose and customize an animation effect. 
Screenshot of the Checkbox input element settings.
  1. Click Preview to test your Checkbox element.
  2. Click Publish if you are ready to make the changes go live. 

Using the Checkbox input element to collect responses from site visitors

Set the Checkbox input element to collect content and connect it to a dataset that binds to a collection where you will store the responses. When visitors click your submit button, their response is saved to a boolean (true or false) field in your collection. 
Wix Editor
Studio Editor
  1. Go to your editor.
  2. Add the single Checkbox input element: 
    1. Go to the page or section where you want visitors to use the Checkbox element. 
    2. Click Add Elements  on the left side of the editor.
    3. Click Input.
    4. Click Checkboxes. 
    5. Scroll down to the single Checkbox input elements. 
    6. Click and drag the relevant single Checkbox input element onto the page. 
Screenshot of adding a single Checkbox input element in the Wix Editor.
  1. Connect the Checkbox element to the CMS collection where you will store the submissions:
    1. Click the Connect to CMS icon  on the Checkbox element. 
    2. Select Collect content in the Connect Checkbox panel on the right. 
      Tip: If you haven't added a dataset to the page yet, add a dataset first (see the next step) then select Collect content. 
    3. Click the Choose a dataset drop-down and select a dataset that connects to the collection where you will store the submissions.
    4. Click the Checked state connects to drop-down and choose the boolean field in which you will store the submissions.
      Tip: To add a new field for storing submissions, select Add new field, then enter the field name and click Add. 
    5. Set the dataset mode and collection permissions:
      1. Click Dataset Settings. 
      2. Click the Dataset mode drop-down and select Write.
      3. (If necessary) Click the permissions type next to Collection Permissions and select Form submissions in the 1st drop-down. You can click the additional drop-downs to refine the permissions. Click Save once you're done setting the permissions. 
      4. Click Back to Checkbox element at the top of the Dataset Settings panel. 
Screenshot of setting the collection permissions and dataset mode in the Wix Editor.
  1. Customize the Checkbox input element: 
    • Click the Settings icon  to edit the following: 
      • Checkbox text: Edit the text that displays next to the checkbox and lets visitors know what the checkbox does. 
      • Value: (Velo only) Enter the component's value property used in JavaScript code.
      • Field type: Select the relevant options:
        • Required: Make it mandatory that visitors check the box before they can send their submissions. 
        • Checked by default: Automatically have the checkbox selected when the page loads. 
      • Link Settings: Enable the toggle to add linked text next to the Checkbox text. Enter the Link text  (e.g. "Terms and conditions") and set the link destination. 
    • Click the Layout icon  to set the checkbox size, spacing and alignment. 
    • Click the Design icon  to choose a preset design and customize it further. 
    • Click the Animation icon  to choose and customize an animation effect. 
Screenshot of the settings used for a Checkbox input element.
  1. Add a 'Submit' button for visitors to click to send their submissions. 
Screenshot of adding a Submit button.
  1. Click Preview to test your connections. 
  2. Click Publish if you are ready to make the changes go live. 

FAQs

Click a question below to learn more about the Checkbox input element.

Did this help?

|
In this article
  • Using the Checkbox input element to filter content on your live site
  • Using the Checkbox input element to collect responses from site visitors
  • FAQs

Related content

CMS: About User Input Elements
CMS: About Datasets
CMS: Adding and Setting Up a Text Input
CMS: Troubleshooting User Input Element Issues
CMS: Creating a Custom Form with Input Elements that Submit to Your Collection

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched