PHPackages                             farsi/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. [Utility & Helpers](/categories/utility)
4. /
5. farsi/nova-multiselect-field

ActiveLibrary[Utility & Helpers](/categories/utility)

farsi/nova-multiselect-field
============================

A multiple select field for Laravel Nova.

4.5.6(2y ago)06MITPHPPHP >=8.0

Since May 9Pushed 1y agoCompare

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

READMEChangelog (1)Dependencies (4)Versions (119)Used By (0)

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

[](#nova-multiselect)

[![Latest Version on Packagist](https://camo.githubusercontent.com/75d7048ae121eb6a21a0e3eb425ac5d0dedd5d6d9d76d306ac005254d415aa66/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6f75746c316e652f6e6f76612d6d756c746973656c6563742d6669656c642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/outl1ne/nova-multiselect-field)[![Total Downloads](https://camo.githubusercontent.com/5bb25ba9cab2b53f4ae202ea858b01489f5a7b3942e651a2b4c7ca57e33e61d6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6f75746c316e652f6e6f76612d6d756c746973656c6563742d6669656c642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/outl1ne/nova-multiselect-field)

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

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

[](#requirements)

- `php: >=8.0`
- `laravel/nova: ^4.1`

Features
--------

[](#features)

- Multi- and singleselect with search
- Asynchronous search
- Reordering functionality with drag & drop
- Dependency on other Multiselect instances
- Distinct values between multiple multiselects
- Fully compatible with light and dark modes

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

[](#screenshots)

[![Detail View](docs/detail-light.jpeg)](docs/detail-light.jpeg)

[![Form View](docs/form-dark.jpeg)](docs/form-dark.jpeg)

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

[](#installation)

Install the package in a Laravel Nova project via Composer:

```
composer require outl1ne/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 Outl1ne\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
        ->distinct('football') // Disables values used by other multiselects in same distinct group
        ->taggable() // Possible to add values ("tags") on the fly

        // 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 `optionsDependOn`. The value from the `optionsDependOn` 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')
    ->optionsDependOn('country', [
        'IT' => [
            'it' => 'Italian',
        ],
        'SG' => [
            'en' => 'English',
            'ms' => 'Malay',
            'zh' => 'Chinese',
        ]
    ]),

    // Optionally define max number of values
    ->optionsDependOnMax([
        '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 for asynchronous option querying:
Multiselect::make('Categories', 'categories')
  ->belongsToMany(\App\Nova\Resources\Category::class),

// Alternatively, you can set the second argument to 'false' to
// query the options on page load and prevent the user from having
// to first type in order to view the available options. Note: Not
// recommended for unbounded relationship row counts.
Multiselect::make('Categories', 'categories')
  ->belongsToMany(\App\Nova\Resources\Category::class, false),
```

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.`optionsDependOn`String, ArraynullDetermines which Multiselect this field depends on.`belongsToMany`String (Resource)nullAllows the Multiselect to function as a BelongsToMany field.`belongsTo`String (Resource)nullAllows the Multiselect to function as a BelongsTo field.`taggable`BooleanfalseMakes the Multiselet to support tags (dynamically entered values).`clearOnSelect`BooleanfalseClears input after an option has been selected.`distinct`StringField AttributeSyncs options between multiple multiselects in the same group and disables the options that have already been used.`indexDelimiter`String`', '`Sets delimiter used to join values on index view`indexValueDisplayLimit`Number9999Define how many values can be displayed at once on index view`indexCharDisplayLimit`Number40Set char limit for index display valueLocalization
------------

[](#localization)

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

```
php artisan vendor:publish --provider="Outl1ne\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);
});
```

Overwriting the form tag field
------------------------------

[](#overwriting-the-form-tag-field)

You can overwrite the tag template in the form-field component to customize it as you see fit.

Create a new component for `FormFieldTag` and register it in your `app.js`. The component receives two props: `option` and `remove`. The `option` prop is an object with, for example, the `label`.

```
// in FormFieldTag.vue

    {{ option.label.trim() }}

export default {
  props: ['option', 'remove'],
};

```

```
// in app.js

import FormFieldTag from './FormFieldTag';

Nova.booting((Vue, router, store) => {
  Vue.component('form-multiselect-field-tag', FormFieldTag);
});
```

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

35

—

LowBetter than 79% of packages

Maintenance27

Infrequent updates — may be unmaintained

Popularity4

Limited adoption so far

Community19

Small or concentrated contributor base

Maturity81

Battle-tested with a long release history

 Bus Factor1

Top contributor holds 88.1% 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 ~16 days

Recently: every ~52 days

Total

113

Last Release

723d ago

Major Versions

2.4.0 → 3.0.02022-04-08

3.0.1 → 4.0.02022-04-22

2.4.1 → 4.0.62022-07-19

2.4.2 → 4.0.92022-07-27

2.4.3 → 4.2.32022-11-23

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

2.0.0PHP >=7.2.0

3.0.0PHP >=8.0

4.0.0PHP >=8.1

### Community

Maintainers

![](https://www.gravatar.com/avatar/90d288522bd317ce5f88a1f746d39bfcfebae03de58b9e8c9881dc776cf8e9f2?d=identicon)[farsi](/maintainers/farsi)

---

Top Contributors

[![Tarpsvo](https://avatars.githubusercontent.com/u/2018660?v=4)](https://github.com/Tarpsvo "Tarpsvo (481 commits)")[![crynobone](https://avatars.githubusercontent.com/u/172966?v=4)](https://github.com/crynobone "crynobone (8 commits)")[![tim-frensch](https://avatars.githubusercontent.com/u/7996312?v=4)](https://github.com/tim-frensch "tim-frensch (7 commits)")[![LorenzoAlu](https://avatars.githubusercontent.com/u/83090982?v=4)](https://github.com/LorenzoAlu "LorenzoAlu (6 commits)")[![mrleblanc101](https://avatars.githubusercontent.com/u/17392251?v=4)](https://github.com/mrleblanc101 "mrleblanc101 (5 commits)")[![marttinnotta](https://avatars.githubusercontent.com/u/7058209?v=4)](https://github.com/marttinnotta "marttinnotta (4 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (4 commits)")[![shawnheide](https://avatars.githubusercontent.com/u/7305354?v=4)](https://github.com/shawnheide "shawnheide (3 commits)")[![CraigHarley](https://avatars.githubusercontent.com/u/8432365?v=4)](https://github.com/CraigHarley "CraigHarley (3 commits)")[![jplhomer](https://avatars.githubusercontent.com/u/848147?v=4)](https://github.com/jplhomer "jplhomer (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)")[![mstyles](https://avatars.githubusercontent.com/u/1187931?v=4)](https://github.com/mstyles "mstyles (1 commits)")[![muhammadsaeedparacha](https://avatars.githubusercontent.com/u/2680384?v=4)](https://github.com/muhammadsaeedparacha "muhammadsaeedparacha (1 commits)")[![potentweb](https://avatars.githubusercontent.com/u/4548490?v=4)](https://github.com/potentweb "potentweb (1 commits)")[![victorlap](https://avatars.githubusercontent.com/u/1645632?v=4)](https://github.com/victorlap "victorlap (1 commits)")[![wamesro](https://avatars.githubusercontent.com/u/5340873?v=4)](https://github.com/wamesro "wamesro (1 commits)")[![alancolant](https://avatars.githubusercontent.com/u/19172637?v=4)](https://github.com/alancolant "alancolant (1 commits)")[![wilfredchen](https://avatars.githubusercontent.com/u/46327334?v=4)](https://github.com/wilfredchen "wilfredchen (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/farsi-nova-multiselect-field/health.svg)

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

###  Alternatives

[optimistdigital/nova-multiselect-field

A multiple select field for Laravel Nova.

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

This Laravel Nova package allows you to reorder models in a Nova resource's index view using drag & drop.

2872.1M6](/packages/optimistdigital-nova-sortable)[outl1ne/nova-sortable

This Laravel Nova package allows you to reorder models in a Nova resource's index view using drag & drop.

2861.8M9](/packages/outl1ne-nova-sortable)[outl1ne/nova-multiselect-field

A multiple select field for Laravel Nova.

3402.9M2](/packages/outl1ne-nova-multiselect-field)[ziffmedia/nova-select-plus

A Nova select field for simple and complex select inputs

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

Multiselect filter for Laravel Nova.

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

PHPackages © 2026

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