Checkbox Groups

Article author
Duncan Hamra

This article will show you how to store the data of multiple checkboxes as a comma-separated list inside Memberstack. This other article can show you how to set up a single checkbox.

This feature is also super handy for creating custom select fields like these ๐Ÿ‘‡ (They are just fancy checkboxes under the hood).

Screen_Shot_2022-12-08_at_9.46.09_AM.jpg

Video Tutorial

Here's a link to clone the project seen in the video.

Create a Wrapper Element

Somewhere inside of a profile or signup form, you'll need to add a div. And then, you'll need to give that div an attribute of data-ms-member="Your_Field_Id" where "Your_Field_Id" points to a custom field inside your Memberstack account. 

Add your Checkboxes

Next, you'll want to add all of our checkboxes inside of the wrapper element. For this to work, each checkbox's input is going to need a data-ms-value="Your_Value" attribute where "Your_Value" is what you want to be saved in Memberstack. 

Screen_Shot_2022-09-23_at_9.22.47_AM.jpg

 

Was this article helpful?

Comments

7 comments

  • Comment author
    Bas Rijnen

    Can i change this up so that there is a space behind every comma? I need this because right now it looks funny in a profile input field, but like this it's also not compatible with comma seperated fields of for instance Typeform.

    Thanks in advance

    2
  • Comment author
    Duncan Hamra

    Hey Bas, thanks for posting your question!

    We donโ€™t have a way to format how the data is output at this time. :( One workaround I can think of would be to format the data in the front end before passing it along to Typeform. But that really depends on what you're trying to achieve. Iโ€™ll ask around to my colleagues to see if anyone has a workaround they can think of, but if you have any questions in the meantime, please let me know!

    0
  • Comment author
    William de Broucker

    Hello,ย 

    Can I make the checkbox group required ? (ie. at least one checkbox of the group needs to be checked)ย 

    Thanks,

    William

    1
  • Comment author
    Grant Faucher

    How do make a custom select and search using a collection list for the select options? Active selected items are not being organized at the top for results.

    2
  • Comment author
    Duncan Hamra

    Hi Grant Faucher ๐Ÿ‘‹ Can you share a read only link to your project?

    1
  • Comment author
    Yashwin Naidu

    but how to save that in memberjson?

    0
  • Comment author
    Duncan Hamra

    Hi Yashwin Naidu ๐Ÿ‘‹

    You'll need to use the DOM package and custom code to save custom fields to JSON.ย 

    I recommend looking at our MemberScripts page and searching for checkbox. https://www.memberstack.com/memberscripts

    0

Please sign in to leave a comment.