@tunghtml/strapi-plugin-multiselect-checkbox

A Strapi v5 custom field plugin with checkbox UI that stores selected values as an array of strings (JSON type) instead of comma-separated strings.

✨ Features

• ✅ Checkbox UI for intuitive multi-selection
• ✅ Array Storage - Stores data as ["Option 1", "Option 2"] instead of "Option 1,Option 2"
• ✅ JSON Type - Uses Strapi's JSON field type for proper array handling
• ✅ Strapi v5 compatible
• ✅ TypeScript support
• ✅ Easy Configuration - Define options directly in Content-Type Builder

📦 Installation

npm install @tunghtml/strapi-plugin-multiselect-checkbox

or with yarn:

yarn add @tunghtml/strapi-plugin-multiselect-checkbox

🔧 Configuration

Add the plugin to your config/plugins.js (or config/plugins.ts):

module.exports = {
  // ...
  'multiselect-checkbox': {
    enabled: true,
  },
};

Then restart your Strapi application.

🎯 Usage

1. Add Field in Content-Type Builder

1. Go to Content-Type Builder
2. Select a content type or create a new one
3. Click Add another field
4. Choose Custom tab
5. Select Multiselect Checkbox
6. Configure your field:
   • Name: Field name
   • Available Options: Enter options (one per line)
7. Click Finish and Save

2. Use in Content Manager

The field will appear as a list of checkboxes in the Content Manager. Select multiple options and save.

3. API Response

The API will return selected values as an array:

{
  "id": 1,
  "myField": ["Option 1", "Option 3", "Option 5"]
}

📊 Data Format Comparison

This Plugin (Array)

{
  "field": ["Option 1", "Option 2", "Option 3"]
}

Other Plugins (String)

{
  "field": "Option 1,Option 2,Option 3"
}

🎨 Example Schema

{
  "kind": "collectionType",
  "collectionName": "products",
  "info": {
    "singularName": "product",
    "pluralName": "products",
    "displayName": "Product"
  },
  "attributes": {
    "sizes": {
      "type": "customField",
      "customField": "plugin::multiselect-checkbox.multiselect-checkbox",
      "options": {
        "availableOptions": ["Small", "Medium", "Large", "XL"]
      }
    }
  }
}

🔍 Querying Data

Since data is stored as JSON array, you can query it using Strapi's filters:

// Find entries where field contains "Option 1"
const entries = await strapi.entityService.findMany('api::product.product', {
  filters: {
    sizes: {
      $contains: 'Small',
    },
  },
});

🛠️ Development

Build the Plugin

npm run build

Watch Mode

npm run watch

🙏 Credits

This plugin is based on strapi-plugin-multiselect-field by Felix M., modified to store data as arrays instead of comma-separated strings.

📝 License

MIT

🐛 Issues

Found a bug? Please report it on GitHub Issues.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📧 Author

Tung Le

• GitHub: @finnwasabi
• Email: [email protected]