PHPackages                             kayacekovic/nova-multiselect-field - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. kayacekovic/nova-multiselect-field

ActiveLibrary

kayacekovic/nova-multiselect-field
==================================

A multiple select field for Laravel Nova.

3.0.0(5y ago)012MITVuePHP >=7.2.0

Since May 9Pushed 5y agoCompare

[ Source](https://github.com/kayacekovic/nova-multiselect-field)[ Packagist](https://packagist.org/packages/kayacekovic/nova-multiselect-field)[ GitHub Sponsors](https://github.com/optimistdigital)[ RSS](/packages/kayacekovic-nova-multiselect-field/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (1)Dependencies (2)Versions (57)Used By (0)

Nova Multiselect
================

[](#nova-multiselect)

[![Latest Version on Packagist](https://camo.githubusercontent.com/3cac037a164872b723c88377cccab53b049fd15f562c8f0a812c57af7c0cc92e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6f7074696d6973746469676974616c2f6e6f76612d6d756c746973656c6563742d6669656c642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/optimistdigital/nova-multiselect-field)[![Total Downloads](https://camo.githubusercontent.com/80acb438afbd21f4549bdc5a19d70c477e5efc6df13b870a028e40d3a896520d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6f7074696d6973746469676974616c2f6e6f76612d6d756c746973656c6563742d6669656c642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/optimistdigital/nova-multiselect-field)

This [Laravel Nova](https://nova.laravel.com) package adds a multiselect to Nova's arsenal of fields.'

Requirements
------------

[](#requirements)

- `php: >=7.2`
- `laravel/nova: ^3.0`

Features
--------

[](#features)

- Multi- and singleselect with search
- Asynchronous search
- Reordering functionality with drag & drop
- Dependency on other Multiselect instances

Screenshots
-----------

[](#screenshots)

[![Detail View](docs/detail.png)](docs/detail.png)

[![Form View](docs/form.png)](docs/form.png)

[![Index View](docs/index.png)](docs/index.png)

[![Reorder GIF](docs/reorder.gif)](docs/reorder.gif)

Installation
------------

[](#installation)

Install the package in a Laravel Nova project via Composer:

```
composer require optimistdigital/nova-multiselect-field
```

Usage
-----

[](#usage)

The field is used similarly to Nova's native Select field. The field type in the database should be text-based (ie `string`, `text` or `varchar`), selected values are stored as a stringified JSON array.

```
use OptimistDigital\MultiselectField\Multiselect;

public function fields(Request $request)
{
    return [
      Multiselect::make('Football teams')
        ->options([
          'liverpool' => 'Liverpool FC',
          'tottenham' => 'Tottenham Hotspur',
        ])

        // Optional:
        ->placeholder('Choose football teams') // Placeholder text
        ->max(4) // Maximum number of items the user can choose
        ->saveAsJSON() // Saves value as JSON if the database column is of JSON type
        ->optionsLimit(5) // How many items to display at once
        ->reorderable() // Allows reordering functionality
        ->singleSelect() // If you want a searchable single select field

        // Async model querying
        Multiselect::make('Artists')
          ->asyncResource(Artist::class),

          // If you want a custom search, create your own endpoint:
          ->api('/api/multiselect/artists?something=false', Artist::class),
    ];
}
```

### Option groups

[](#option-groups)

Option groups are supported. Their syntax is the same as [Laravel's option group syntax](https://nova.laravel.com/docs/2.0/resources/fields.html#select-field).

In this example (from Nova docs), all values are grouped by the `group` key:

```
->options([
    'MS' => ['label' => 'Small', 'group' => 'Men Sizes'],
    'MM' => ['label' => 'Medium', 'group' => 'Men Sizes'],
    'WS' => ['label' => 'Small', 'group' => 'Women Sizes'],
    'WM' => ['label' => 'Medium', 'group' => 'Women Sizes'],
])
```

### Dependencies

[](#dependencies)

You can make a Multiselect depend on another by using `dependsOn`. This also requires specifying `->dependsOnOptions()`. The value from the `dependsOn` Multiselect has to be the key to the options and the value must be a key-value dictionary of options as usual.

Usage:

```
Multiselect::make('Country', 'country')
    ->options([
        'IT' => 'Italy',
        'SG' => 'Singapore',
    ]),

Multiselect::make('Language', 'language')
    ->dependsOn('country')
    ->dependsOnOptions([
        'IT' => [
            'it' => 'Italian',
        ],
        'SG' => [
            'en' => 'English',
            'ms' => 'Malay',
            'zh' => 'Chinese',
        ]
    ]),

    // Optionally define max number of values
    ->dependsOnMax([
        'IT' => 1,
        'SG' => 3,
    ])
```

Belongs-To-Many
---------------

[](#belongs-to-many)

You can use this field for `BelongsToMany` relationship selection.

```
// Add your BelongsToMany relationship to your model:
public function categories()
{
    return $this->belongsToMany(\App\Models\Category::class);
}

// Add the field to your Resource:
Multiselect::make('Categories', 'categories')
  ->belongsToMany(\App\Nova\Resources\Category::class),
```

Options
-------

[](#options)

Possible options you can pass to the field using the option name as a function, ie `->placeholder('Choose peanuts')`.

Optiontypedefaultdescription`options`Array|callable\[\]Options in an array as key-value pairs (`['id' => 'value']`).`api($path, $resource)`String, String (Resource)nullURL that can be used to fetch options asynchronously. The search string is provided in the `search` query parameter. The API must return object containing key-value pairs (`['id' => 'value']`).`asyncResource($resource)`String (Resource)nullProvide a Resource class to fetch the options asynchronously.`placeholder`StringField nameThe placeholder string for the input.`max`NumberInfiniteThe maximum number of options a user can select.`groupSelect`BooleanfalseFor use with option groups - allows the user to select whole groups at once`singleSelect`BooleanfalseMakes the field act as a single select which also means the saved value will not be an array.`saveAsJSON`BooleanfalseWhen you have a SQL JSON column, you can force the field to save the values as JSON. By default, values are saved as a stringified array.`optionsLimit`Number1000The maximum number of options displayed at once. Other options are still accessible through searching.`nullable`BooleanfalseIf the field is nullable an empty select will result in `null` else an empty array (`[]`) is stored.`reorderable`BooleanfalseEnables (or disables) the reordering functionality of the multiselect field.`dependsOn`StringnullDetermines which Multiselect this field depends on.`dependsOnOptions`ArraynullDetermines the options for `dependsOn`. See example above on how to format it correctly.`belongsToMany`String (Resource)nullAllows the Multiselect to function as a BelongsToMany field.`belongsTo`String (Resource)nullAllows the Multiselect to function as a BelongsTo field.`resolveForPageResponseUsing`CallablenullOnly for use in conjunction with [Page Manager](https://github.com/optimistdigital/nova-page-manager). Allows you to format the value before it is returned through the API.`clearOnSelect`BooleanfalseClears input after an option has been selected.Localization
------------

[](#localization)

The translations file can be published by using the following publish command:

```
php artisan vendor:publish --provider="OptimistDigital\MultiselectField\FieldServiceProvider" --tag="translations"
```

You can then edit the strings to your liking.

Overwriting the detail field
----------------------------

[](#overwriting-the-detail-field)

You can overwrite the detail view value component to customize it as you see fit.

Create a new component for `NovaMultiselectDetailFieldValue` and register it in your `app.js`. The component receives two props: `field` and `values`. The `values` prop is an array of selected labels.

```
// in NovaMultiselectDetailFieldValue.vue

        {{ value }}

  —

export default {
  props: ['field', 'values'],
};

```

```
// in app.js

import NovaMultiselectDetailFieldValue from './NovaMultiselectDetailFieldValue';

Nova.booting((Vue, router, store) => {
  Vue.component('nova-multiselect-detail-field-value', NovaMultiselectDetailFieldValue);
});
```

Credits
-------

[](#credits)

- [Tarvo Reinpalu](https://github.com/Tarpsvo)
- [shentao/vue-multiselect](https://vue-multiselect.js.org)

License
-------

[](#license)

This project is open-sourced software licensed under the [MIT license](LICENSE.md).

###  Health Score

29

—

LowBetter than 60% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity5

Limited adoption so far

Community16

Small or concentrated contributor base

Maturity68

Established project with proven stability

 Bus Factor1

Top contributor holds 90.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~11 days

Total

56

Last Release

1919d ago

Major Versions

1.11.5 → 2.0.02020-12-02

2.0.6 → 3.0.02021-02-05

PHP version history (2 changes)1.0.0PHP >=7.1.0

2.0.0PHP >=7.2.0

### Community

Maintainers

![](https://www.gravatar.com/avatar/8a728b47a1ee9fd11f949888a6de60971bbeaf3057d022eab6a6e50491089b4b?d=identicon)[kayacekovic](/maintainers/kayacekovic)

---

Top Contributors

[![Tarpsvo](https://avatars.githubusercontent.com/u/2018660?v=4)](https://github.com/Tarpsvo "Tarpsvo (250 commits)")[![marttinnotta](https://avatars.githubusercontent.com/u/7058209?v=4)](https://github.com/marttinnotta "marttinnotta (4 commits)")[![jplhomer](https://avatars.githubusercontent.com/u/848147?v=4)](https://github.com/jplhomer "jplhomer (3 commits)")[![CraigHarley](https://avatars.githubusercontent.com/u/8432365?v=4)](https://github.com/CraigHarley "CraigHarley (3 commits)")[![kropcik](https://avatars.githubusercontent.com/u/4661137?v=4)](https://github.com/kropcik "kropcik (2 commits)")[![nonovd](https://avatars.githubusercontent.com/u/12936673?v=4)](https://github.com/nonovd "nonovd (2 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)")[![kayacekovic](https://avatars.githubusercontent.com/u/32109756?v=4)](https://github.com/kayacekovic "kayacekovic (2 commits)")[![victorlap](https://avatars.githubusercontent.com/u/1645632?v=4)](https://github.com/victorlap "victorlap (1 commits)")[![gmedeiros](https://avatars.githubusercontent.com/u/3370868?v=4)](https://github.com/gmedeiros "gmedeiros (1 commits)")[![kaareloun](https://avatars.githubusercontent.com/u/19284921?v=4)](https://github.com/kaareloun "kaareloun (1 commits)")[![MarikaMustV](https://avatars.githubusercontent.com/u/31190256?v=4)](https://github.com/MarikaMustV "MarikaMustV (1 commits)")[![mstyles](https://avatars.githubusercontent.com/u/1187931?v=4)](https://github.com/mstyles "mstyles (1 commits)")[![potentweb](https://avatars.githubusercontent.com/u/4548490?v=4)](https://github.com/potentweb "potentweb (1 commits)")[![alberto-bottarini](https://avatars.githubusercontent.com/u/1442934?v=4)](https://github.com/alberto-bottarini "alberto-bottarini (1 commits)")

---

Tags

laravelselectmultiselectnova

### Embed Badge

![Health badge](/badges/kayacekovic-nova-multiselect-field/health.svg)

```
[![Health](https://phpackages.com/badges/kayacekovic-nova-multiselect-field/health.svg)](https://phpackages.com/packages/kayacekovic-nova-multiselect-field)
```

###  Alternatives

[optimistdigital/nova-multiselect-field

A multiple select field for Laravel Nova.

3403.5M7](/packages/optimistdigital-nova-multiselect-field)[outl1ne/nova-multiselect-field

A multiple select field for Laravel Nova.

3402.9M2](/packages/outl1ne-nova-multiselect-field)[outl1ne/nova-multiselect-filter

Multiselect filter for Laravel Nova.

45802.7k3](/packages/outl1ne-nova-multiselect-filter)[optimistdigital/nova-multiselect-filter

Multiselect filter for Laravel Nova.

45305.4k](/packages/optimistdigital-nova-multiselect-filter)[ziffmedia/nova-select-plus

A Nova select field for simple and complex select inputs

96578.4k1](/packages/ziffmedia-nova-select-plus)[klepak/nova-multiselect-filter

Multiselect filter for Laravel Nova

14179.4k2](/packages/klepak-nova-multiselect-filter)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)