Strapi plugin multi-select

A strapi custom field for selecting multiple options from a provided list of items.

CHANGELOG

2.1.2

• Remove @strapi/sdk-plugin from peerDependencies. It is only needed to build the plugin, and requiring it conflicted with plugins built with sdk-plugin v6 #41
• Build with @strapi/sdk-plugin v6
• Give the remove button of each selected option an accessible label, and stop it from opening the dropdown
• Add unit and end-to-end tests, run in CI against the latest Strapi 5

2.1.0

• Add default value support #16
• Add Min and Max selection limits

2.0.1

• Preserve selection order when displaying previously selected options #21

2.0.0

• Migrated to Strapi v5, and the new plugin structure
• Now using @strapi/sdk-plugin
• Migrated to TypeScript

1.2.2 Support colons in option values, only first colon is used as separator

example usage: this_is_label:all:of:this:is:value

1.2.1 Localize option label

example usage: my.custom.translations.key:value

1.2.0 Replace strapi select with react-select

Installation

To install this plugin, you need to add an NPM dependency to your Strapi application:

# Using Yarn
yarn add strapi-plugin-multi-select

# Or using NPM
npm install strapi-plugin-multi-select

Then, you'll need to build your admin panel:

# Using Yarn
yarn build

# Or using NPM
npm run build

Usage

After installation you will find the multi-select at the custom fields section of the content-type builder.

You add options to the multi-select by adding a line separated list of options to the options field.

You can also add a value and a label separated by a colon (e.g. label:value). If no value is provided, the label will be used as the value.

then you can select one or more options from the list.

in this case the API will return

{
  "data": {
    "id": 1,
    "documentId": "ah6m3p7h3zniivl7usx3yzcn",
    "stuff": ["Banana", "citron"]
  },
  "meta": {}
}

Development

npm install
npm run build       # build the plugin into dist/
npm test            # unit tests (Vitest)
npm run test:e2e    # end-to-end tests in a real Strapi app (Playwright)

npm run test:e2e packs the plugin, installs the tarball into a copy of the Strapi app in tests/e2e/app, then drives the admin panel and the REST API. The app is created outside the repository (in the OS temp directory, or E2E_APP_DIR if set), so it only sees what the published package provides. Run npx playwright install chromium once before the first run.

You can also check the multi-country-select plugin