PHPackages kazak71/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. kazak71/nova-multiselect-field ActiveLibrary[Utility & Helpers](/categories/utility) kazak71/nova-multiselect-field ============================== A multiple select field for Laravel Nova. 01PHP Since Mar 13Pushed 2y agoCompare [ Source](https://github.com/kazak71/nova-multiselect-field)[ Packagist](https://packagist.org/packages/kazak71/nova-multiselect-field)[ RSS](/packages/kazak71-nova-multiselect-field/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependenciesVersions (1)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 14 — LowBetter than 2% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity1 Limited adoption so far Community19 Small or concentrated contributor base Maturity19 Early-stage or recently created project Bus Factor1 Top contributor holds 87.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. ### Community Maintainers ![](https://www.gravatar.com/avatar/020a81d47130d68099c5e7d8a0741d5f68b5597489b7cff1e5d28c6e840f8c0a?d=identicon)[kazak.71@gmail.com](/maintainers/kazak.71@gmail.com) --- 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)")[![kazak71](https://avatars.githubusercontent.com/u/4598172?v=4)](https://github.com/kazak71 "kazak71 (2 commits)")[![nonovd](https://avatars.githubusercontent.com/u/12936673?v=4)](https://github.com/nonovd "nonovd (2 commits)")[![kropcik](https://avatars.githubusercontent.com/u/4661137?v=4)](https://github.com/kropcik "kropcik (2 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)")[![Ali-Shaikh](https://avatars.githubusercontent.com/u/3758682?v=4)](https://github.com/Ali-Shaikh "Ali-Shaikh (1 commits)") ### Embed Badge ![Health badge](/badges/kazak71-nova-multiselect-field/health.svg) ``` [![Health](https://phpackages.com/badges/kazak71-nova-multiselect-field/health.svg)](https://phpackages.com/packages/kazak71-nova-multiselect-field) ``` ### Alternatives [components/jqueryui jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. 1795.8M57](/packages/components-jqueryui)[clue/graph-composer Dependency graph visualization for composer.json 93798.0k11](/packages/clue-graph-composer) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)