Input form with multiple checkboxes?

[ecdeaver]

Hi,

I'm new to grapejs and I'm trying to make a component that will have 5 checkboxes inside it. The user should be able to click any number of them. Like this https://www.sitelint.com/blog/how-to-implement-multiple-selection-with-check-boxes-in-an-html-without-external-libraries

How can I do this in grapeJS?

[lexoyo]

Hey @ecdeaver
I believe you want to create a block that users can drop, right?

Maybe try something like this:

editor.Components.addType('checkbox-group', {
  model: {
    defaults: {
      tagName: 'div',
      name: 'Checkbox Group',
      components: `
        <label><input type="checkbox" name="option" value="1"> Option 1</label><br/>
        <label><input type="checkbox" name="option" value="2"> Option 2</label><br/>
        <label><input type="checkbox" name="option" value="3"> Option 3</label><br/>
        <label><input type="checkbox" name="option" value="4"> Option 4</label><br/>
        <label><input type="checkbox" name="option" value="5"> Option 5</label>
      `,
    }
  }
});

editor.Blocks.add('checkbox-group', {
  label: 'Checkboxes',
  category: 'Forms',
  content: { type: 'checkbox-group' }
});

This should creates a reusable block with 5 checkboxes