Combobox
A combobox component allowing users to filter a list of predefined options or add new ones by typing.
🌟 Strapi Plugin - Combobox
A custom field plugin for Strapi that provides a combobox component allowing users to type or select from a list of predefined options.
🎬 Preview
🚀 Features
- 🔍 Type to search through options
- ✨ Autocomplete functionality
- 🆕 Optional ability to create new options on the fly
- 🧩 Seamless integration with Strapi's design system
- ✅ Custom validation support
- 🌐 Internationalization ready
📦 Installation
# Using npm
npm install strapi-plugin-combobox
# Using yarn
yarn add strapi-plugin-combobox
⚙️ Configuration
🔧 Basic Settings
Option | Type | Default | Description |
---|---|---|---|
defaultOptions | string | - | List of options (format: "Label:Value" or "Value") |
enableCreateableOptions | boolean | false | Allow users to create new options |
📝 Example options format:
1Option A Label:option-a-value
2Option B Label:option-b-value
3Option C Label:option-c-value
4Simple Option
5Another Simple Option
🛠️ Advanced Settings
Option | Type | Default | Description |
---|---|---|---|
customValidation | string | - | Custom regex pattern for value validation |
🧪 Example validation patterns:
- 🔢 Numbers only:
/^\d*\.?\d+$/
- 📧 Email format:
/^[^\s@]+@[^\s@]+\.[^\s@]+$/
- 🔡 Alphanumeric:
/^[a-zA-Z0-9]+$/
📚 Usage
- 🧱 After installation, the plugin will be available as a custom field type in your Content-Types Builder.
- ➕ Add a new field and select "Combobox" as the field type.
- ⚙️ Configure the field options:
- 📋 Add your default options (required)
- 🆓 Enable createable options if you want users to add custom values
- 🧩 Add custom validation regex if needed
🧾 Option Format
Options can be specified in two formats:
📝 Label:Value format – Display a user-friendly label while storing a different value
1Display Name:internal-value 2Product A:product-a
🔁 Simple format – Use the same value for both display and storage
1Apple 2Banana 3Orange
✅ Validation
The plugin includes built-in validation to ensure:
- 📌 At least one option is provided
- 🧷 Each option follows the correct format
- 🧪 Custom regex validation can be applied to the selected/created values
🤝 Contributing
We welcome contributions! You can help by:
- 🐛 Creating issues for bugs or feature requests
- 📥 Submitting pull requests for improvements
- 💬 Providing feedback and suggestions
📄 License
MIT License – © Jorge Pizzati
Install now
npm install strapi-plugin-combobox
Create your own plugin
Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.