Combobox logo

Combobox

By Jorge Pizzati

A combobox component allowing users to filter a list of predefined options or add new ones by typing.

Latest version

v1.0.1

released June 24, 2025

npm install strapi-plugin-combobox

๐ŸŒŸ 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

Documentation Image

๐Ÿš€ 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

OptionTypeDefaultDescription
defaultOptionsstring-List of options (format: "Label:Value" or "Value")
enableCreateableOptionsbooleanfalseAllow users to create new options

๐Ÿ“ Example options format:

Option A Label:option-a-value
Option B Label:option-b-value
Option C Label:option-c-value
Simple Option
Another Simple Option

๐Ÿ› ๏ธ Advanced Settings

OptionTypeDefaultDescription
customValidationstring-Custom regex pattern for value validation

๐Ÿงช Example validation patterns:

  • ๐Ÿ”ข Numbers only: /^\d*\.?\d+$/
  • ๐Ÿ“ง Email format: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  • ๐Ÿ”ก Alphanumeric: /^[a-zA-Z0-9]+$/

๐Ÿ“š Usage

  1. ๐Ÿงฑ After installation, the plugin will be available as a custom field type in your Content-Types Builder.
  2. โž• Add a new field and select "Combobox" as the field type.
  3. โš™๏ธ 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:

  1. ๐Ÿ“ Label:Value format โ€“ Display a user-friendly label while storing a different value

    Display Name:internal-value
    Product A:product-a
  2. ๐Ÿ” Simple format โ€“ Use the same value for both display and storage

    Apple
    Banana
    Orange

โœ… 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:

  1. ๐Ÿ› Creating issues for bugs or feature requests
  2. ๐Ÿ“ฅ Submitting pull requests for improvements
  3. ๐Ÿ’ฌ Providing feedback and suggestions

๐Ÿ“„ License

MIT License โ€“ ยฉ Jorge Pizzati

Submit your content

Share your work with the community and get it listed in the Strapi ecosystem for everyone to discover and use.

Submit
Submit your content