PHPackages chang/nova-element-ui - 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. [Templating & Views](/categories/templating) 4. / 5. chang/nova-element-ui ActiveLibrary[Templating & Views](/categories/templating) chang/nova-element-ui ===================== Element UI components for Laravel Nova 1.0.1(7y ago)03CSS Since Aug 25Pushed 7y agoCompare [ Source](https://github.com/zhouchang2017/nova-element-ui)[ Packagist](https://packagist.org/packages/chang/nova-element-ui)[ RSS](/packages/chang-nova-element-ui/feed)WikiDiscussions master Synced 3w ago READMEChangelogDependencies (1)Versions (9)Used By (0) Nova + Element UI ================= [](#nova--element-ui) This is a set of component Element UI for Laravel Nova Installation ------------ [](#installation) 1. `composer require nightkit/nova-element-ui` 2. Add `NightKit\NovaElements\NovaElementsServiceProvider::class` to your `config/app.php` in providers section 3. `php artisan vendor:publish --provider="NightKit\NovaElements\NovaElementsServiceProvider" --tag="public"` ### Components [](#components) This is available component for this time. ``` use NightKit\NovaElements\Fields\ElementInput\ElementInput; use NightKit\NovaElements\Fields\ElementPassword\ElementPassword; use NightKit\NovaElements\Fields\ElementSelect\ElementSelect; use NightKit\NovaElements\Fields\ElementCheckbox\ElementCheckbox; use NightKit\NovaElements\Fields\ElementRadio\ElementRadio; use NightKit\NovaElements\Fields\ElementSwitch\ElementSwitch; use NightKit\NovaElements\Fields\ElementAutocomplete\ElementAutocomplete; use NightKit\NovaElements\Fields\ElementNumber\ElementNumber; use NightKit\NovaElements\Fields\ElementTimezoneAutocomplete\ElementTimezoneAutocomplete; use NightKit\NovaElements\Fields\ElementTimezoneSelect\ElementTimezoneSelect; use NightKit\NovaElements\Fields\ElementTabs\ElementTabsRelations; ``` #### ElementTabsRelations [](#elementtabsrelations) ElementTabsRelations it's tabs component to split relation lists view between tabs Supported relation fields: HasMany, BelongsTany, OneToMany, MorphToMany ``` public function fields(Request $request) { ElementTabsRelations::make('Tabs') ->addTab('Levels', HasMany::make('Level', 'levels')) ->addTab('Setting', HasMany::make('Setting', 'settings')) ->activeTab('levels') ->borderCard() // border card style for tabs } ``` [![](https://camo.githubusercontent.com/92016d503367501ac01cdfee8ea48b0035c37036b1a250a0456c4292b170708e/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f45674a75304653755545544572753635646a434838634a726b47545a6e792e706e67)](https://camo.githubusercontent.com/92016d503367501ac01cdfee8ea48b0035c37036b1a250a0456c4292b170708e/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f45674a75304653755545544572753635646a434838634a726b47545a6e792e706e67) #### ElementInput [](#elementinput) ElementInput is just simple input element with couple of cool features You can add it like that ``` public function fields(Request $request) { return [ ID::make()->sortable(), ElementInput::make('String') ]; } ``` [![](https://camo.githubusercontent.com/880dfbbf49849c43d2adcabbc461a849307c6eab693467590781c94e35772e6c/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f616c35785752536c4135633453724d6a775338366f46516872574b7235782e706e67)](https://camo.githubusercontent.com/880dfbbf49849c43d2adcabbc461a849307c6eab693467590781c94e35772e6c/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f616c35785752536c4135633453724d6a775338366f46516872574b7235782e706e67) To make this input with clear action just add `clearable()` ``` public function fields(Request $request) { return [ ID::make()->sortable(), ElementInput::make('String') ->clearable() ]; } ``` [![](https://camo.githubusercontent.com/f95bfd9de75d7be5931539529579d4e3bfd7236721a7ead34fc8e539bcf7e0be/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f4d6d7a486773336c7a394267415833366348386132626c616e6865696c762e706e67)](https://camo.githubusercontent.com/f95bfd9de75d7be5931539529579d4e3bfd7236721a7ead34fc8e539bcf7e0be/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f4d6d7a486773336c7a394267415833366348386132626c616e6865696c762e706e67) You can also add prefix or suffix icon with `prefixIcon()` and`suffixIcon()` ``` public function fields(Request $request) { return [ ID::make()->sortable(), ElementInput::make('String') ->clearable() ->prefixIcon('el-icon-date') //icon css class ]; } ``` [![](https://camo.githubusercontent.com/f6033c47f4d402834732530107306063bd53b6c21336cefc5672edac7f29b0d8/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f316e5a36677038304c33726263526d4c77427538655277507576445757612e706e67)](https://camo.githubusercontent.com/f6033c47f4d402834732530107306063bd53b6c21336cefc5672edac7f29b0d8/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f316e5a36677038304c33726263526d4c77427538655277507576445757612e706e67) If you need a textarea you can simple make it by `textarea()` ``` public function fields(Request $request) { return [ ID::make()->sortable(), ElementInput::make('String') ->textarea(4, true) ]; } ``` [![](https://camo.githubusercontent.com/9f6458ccbf1b8c10ed852891eb13e01ec94c4b55501c24a83af7bf16f04fc0dc/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f70525a4e574d54415a73644b44736962444c74476f5177427a767a3256572e706e67)](https://camo.githubusercontent.com/9f6458ccbf1b8c10ed852891eb13e01ec94c4b55501c24a83af7bf16f04fc0dc/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f70525a4e574d54415a73644b44736962444c74476f5177427a767a3256572e706e67) Textarea accepts several parameters, number of rows and autosize #### ElementAutocomplete [](#elementautocomplete) ElementAutocomplete looks like a input but is used if you need autocomplete ``` return [ ID::make()->sortable(), ElementAutocomplete::make('String') ->suggestions(['vue', 'laravel', 'nova']) ]; ``` [![](https://camo.githubusercontent.com/d65c21c821d332a14cc747d742bca7d77db7ac2fb9909f546b17e670922ee4f6/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f6f6d6531594573446b51434b6f4e32384a676438796d61767663634132752e706e67)](https://camo.githubusercontent.com/d65c21c821d332a14cc747d742bca7d77db7ac2fb9909f546b17e670922ee4f6/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f6f6d6531594573446b51434b6f4e32384a676438796d61767663634132752e706e67) This field has a few method `placement() @string`Placement of the popup menu (top / top-start / top-end / bottom / bottom-start / bottom-end) default bottom-start `triggerOnFocus @bool`Whether show suggestions when input focus (default true) `debounce() @int`Debounce delay when typing, in milliseconds (default 300) #### ElementSelect [](#elementselect) It's just simple select field with more beautiful design ``` public function fields(Request $request) { return [ ID::make()->sortable(), ElementSelect::make('String') ->options(['vue', 'laravel', 'nova']) ]; } ``` [![](https://camo.githubusercontent.com/ec46864a30c7101ea3a4c1d4afe9b4bfa3d146632a7d3d39fb8bc628780aa180/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f49794d54484c353976746d64484446386b386e31547a65584c37685266782e706e67)](https://camo.githubusercontent.com/ec46864a30c7101ea3a4c1d4afe9b4bfa3d146632a7d3d39fb8bc628780aa180/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f49794d54484c353976746d64484446386b386e31547a65584c37685266782e706e67) #### ElementTimezoneSelect and ElementTimezoneAutocomplete [](#elementtimezoneselect-and-elementtimezoneautocomplete) This two fields depend on ElementSelect and ElementAutocompele to coose timezones more simple ``` public function fields(Request $request) { return [ ID::make()->sortable(), ElementTimezoneAutocomplete::make('String'), ElementTimezoneSelect::make('String') ]; } ``` [![](https://camo.githubusercontent.com/5ade55c2bbdb6046103b899a531618b694321b3b1394b65b460a7a710e9021cf/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f4653454b307567396d6a36706a49774d4854507071634c7566344c714e632e706e67)](https://camo.githubusercontent.com/5ade55c2bbdb6046103b899a531618b694321b3b1394b65b460a7a710e9021cf/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f4653454b307567396d6a36706a49774d4854507071634c7566344c714e632e706e67) #### ElementNumber [](#elementnumber) The number input field on steroids:) It's depend on Nova native Number field and support all its functions ``` public function fields(Request $request) { return [ ID::make()->sortable(), ElementNumber::make('Number') ->min(2) ->max(6) ->step(2) ]; } ``` [![](https://camo.githubusercontent.com/fc3a9273ad7fdddd6a0d8fe8a09d4a0e0b7027ffd1326e28492786d24e190ba7/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f32516c57694731796d4d664a6b4c396d72327876423743596566766733332e706e67)](https://camo.githubusercontent.com/fc3a9273ad7fdddd6a0d8fe8a09d4a0e0b7027ffd1326e28492786d24e190ba7/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f32516c57694731796d4d664a6b4c396d72327876423743596566766733332e706e67) Also this field provide several methods `precision() @int`Precision of input value `showControls() @bool`whether to enable the control buttons `rightControls()`Move the control buttons to the right #### ElementRadio [](#elementradio) Radio element ``` public function fields(Request $request) { return [ ID::make()->sortable(), ElementRadio::make('String') ->options([ ['value' => '1', 'label' => 'vue'], ['value' => '2', 'label' => 'laravel'], ['value' => '3', 'label' => 'nova'], ]) ]; } ``` [![](https://camo.githubusercontent.com/b4ce72430b8bc8b6c92ab2a1c5f6d092be24f7d8397624f1848b86b5f6a6a62c/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f5348523941653253586d58513866657a42776878376d7732346d396b6f782e706e67)](https://camo.githubusercontent.com/b4ce72430b8bc8b6c92ab2a1c5f6d092be24f7d8397624f1848b86b5f6a6a62c/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f5348523941653253586d58513866657a42776878376d7732346d396b6f782e706e67) If you want button style radio just use `buttons()` method ``` public function fields(Request $request) { return [ ID::make()->sortable(), ElementRadio::make('String') ->options([ ['value' => '1', 'label' => 'vue'], ['value' => '2', 'label' => 'laravel'], ['value' => '3', 'label' => 'nova'], ])->buttons() ]; } ``` [![](https://camo.githubusercontent.com/fe03534438bfe92b97354f7be273aa231dda264a37d59209815e5f17012d1241/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f555866764130356d3257785a6137625576486e4569766f52435775754b712e706e67)](https://camo.githubusercontent.com/fe03534438bfe92b97354f7be273aa231dda264a37d59209815e5f17012d1241/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f555866764130356d3257785a6137625576486e4569766f52435775754b712e706e67) Or bordered style with `bordered()` ``` public function fields(Request $request) { return [ ID::make()->sortable(), ElementRadio::make('String') ->options([ ['value' => '1', 'label' => 'vue'], ['value' => '2', 'label' => 'laravel'], ['value' => '3', 'label' => 'nova'], ])->bordered() ]; } ``` [![](https://camo.githubusercontent.com/cf2cc65e20b0209952c8db907603e5009a5f76af86c4a7fc2021aa527d4f53d1/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f42334b44434e6c38734f5962303450364b46493278484f5541696668704f2e706e67)](https://camo.githubusercontent.com/cf2cc65e20b0209952c8db907603e5009a5f76af86c4a7fc2021aa527d4f53d1/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f42334b44434e6c38734f5962303450364b46493278484f5541696668704f2e706e67) #### ElementCheckbox [](#elementcheckbox) ElementCheckbox depends on native Nova Boolean field with couple cool features ``` public function fields(Request $request) { return [ ID::make()->sortable(), ElementCheckbox::make('Boolean') ]; } ``` [![](https://camo.githubusercontent.com/9ea1475200fdae4b1ff0f2152d952a54e42d2e7985450582700f776fd57514d0/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f7769786c4a694e484e474c4533666e62703670483768767a51634f4d62302e706e67)](https://camo.githubusercontent.com/9ea1475200fdae4b1ff0f2152d952a54e42d2e7985450582700f776fd57514d0/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f7769786c4a694e484e474c4533666e62703670483768767a51634f4d62302e706e67) On detail page and index it's cool looks with el-tag element [![](https://camo.githubusercontent.com/161c4092a2170ca250d66245551880ced646e3292a4bb7d22fd63fa7304c8924/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f62796d65355167765a356e4341497167366c736262423170626b586954792e706e67)](https://camo.githubusercontent.com/161c4092a2170ca250d66245551880ced646e3292a4bb7d22fd63fa7304c8924/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f62796d65355167765a356e4341497167366c736262423170626b586954792e706e67) Of course you can change standard 'True' 'False' labels on what want to ``` public function fields(Request $request) { return [ ID::make()->sortable(), ElementCheckbox::make('Boolean') ->falseLabel('Off') ->trueLabel('On') ]; } ``` [![](https://camo.githubusercontent.com/82b7433a4f70b9718c9fd61100a7de99230832d7d1c07d9184bca0207b538c50/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f4d7a4b414472524d523458425130346d5942774a3237354c4f69303267472e706e67)](https://camo.githubusercontent.com/82b7433a4f70b9718c9fd61100a7de99230832d7d1c07d9184bca0207b538c50/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f4d7a4b414472524d523458425130346d5942774a3237354c4f69303267472e706e67) If you d'not want to be displayed el-tag you can hide it with `showTagOnIndex()` `showTagOnDetail()` ``` public function fields(Request $request) { return [ ID::make()->sortable(), ElementCheckbox::make('Boolean') ->falseLabel('Off') ->trueLabel('On') ->showTagOnDetail(false) ->showTagOnIndex(false) ]; } ``` When you just see only label #### ElementSwitch [](#elementswitch) ElementSwitch is depends on ElementCheckbox ``` public function fields(Request $request) { return [ ID::make()->sortable(), ElementSwitch::make('Boolean') ->falseLabel('Off') ->trueLabel('On') ]; } ``` [![](https://camo.githubusercontent.com/8097bed23bbe309d8b8f1d6ccad03bdbdaf7cb1d9f67e5995cd09e8470f81be8/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f7563334731586457715631487239474c3256594577446e4c575648434a622e706e67)](https://camo.githubusercontent.com/8097bed23bbe309d8b8f1d6ccad03bdbdaf7cb1d9f67e5995cd09e8470f81be8/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f7563334731586457715631487239474c3256594577446e4c575648434a622e706e67) If you want to show your labels on switch use `showLabels()` method ``` public function fields(Request $request) { return [ ID::make()->sortable(), ElementSwitch::make('Boolean') ->falseLabel('Off') ->trueLabel('On') ->showLabels() ]; } ``` [![](https://camo.githubusercontent.com/5dc9f960e4341c7361474dba5aace312de5f6cc0bdd3bb0a8229b70ad97fa752/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f3651716e4b445264326a45476a74327a565a6d58444c7165447069584a782e706e67)](https://camo.githubusercontent.com/5dc9f960e4341c7361474dba5aace312de5f6cc0bdd3bb0a8229b70ad97fa752/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f3651716e4b445264326a45476a74327a565a6d58444c7165447069584a782e706e67) Also you can change active/inactive colors on switch ``` public function fields(Request $request) { return [ ID::make()->sortable(), ElementSwitch::make('Boolean') ->falseLabel('Off') ->trueLabel('On') ->showLabels() ->activeColor('#13ce66') ->inactiveColor('#ff4949') ]; } ``` [![](https://camo.githubusercontent.com/34d203687935c467680ad9bee0f29d494f8bd982f413f492cd01bb31c36a7304/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f564572763554716d4a4b436e714f4874446e584f4c4b596776777a4343532e706e67)](https://camo.githubusercontent.com/34d203687935c467680ad9bee0f29d494f8bd982f413f492cd01bb31c36a7304/68747470733a2f2f6d6f6e6f736e61702e636f6d2f696d6167652f564572763554716d4a4b436e714f4874446e584f4c4b596776777a4343532e706e67) Components in progress ---------------------- [](#components-in-progress) - Input - Number - Select - Autocomplete - Checkbox - Radio - Switch - Date - Time - DateTime - DataTimeRange - Tabs - Upload - Slider - Cascader - Upload - Transfer Built With ---------- [](#built-with) - [Laravel Nova](http://nova.laravel.com) - The best admin panel for Laravel - [Element UI](http://element.eleme.io/#/en-US/) - The best set of components for Vue.js License ------- [](#license) This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details ### Health Score 28 — LowBetter than 52% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity3 Limited adoption so far Community12 Small or concentrated contributor base Maturity68 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits 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 ~13 days Recently: every ~23 days Total 8 Last Release 2772d ago Major Versions 0.8.0 → 1.0.12018-11-28 ### Community Maintainers ![](https://www.gravatar.com/avatar/331c51f6b4584259ac5f0ac19779f2a878cc168d84739904026a7d4933987c6e?d=identicon)[zhouchang2017](/maintainers/zhouchang2017) --- Top Contributors [![zhouchang2017](https://avatars.githubusercontent.com/u/28501146?v=4)](https://github.com/zhouchang2017 "zhouchang2017 (9 commits)")[![fat4lix](https://avatars.githubusercontent.com/u/3585188?v=4)](https://github.com/fat4lix "fat4lix (5 commits)")[![erjanmx](https://avatars.githubusercontent.com/u/4899432?v=4)](https://github.com/erjanmx "erjanmx (1 commits)")[![necenzurat](https://avatars.githubusercontent.com/u/145449?v=4)](https://github.com/necenzurat "necenzurat (1 commits)")[![vmitchell85](https://avatars.githubusercontent.com/u/1248035?v=4)](https://github.com/vmitchell85 "vmitchell85 (1 commits)")[![johannesschobel](https://avatars.githubusercontent.com/u/9431350?v=4)](https://github.com/johannesschobel "johannesschobel (1 commits)")[![freekmurze](https://avatars.githubusercontent.com/u/483853?v=4)](https://github.com/freekmurze "freekmurze (1 commits)") ### Embed Badge ![Health badge](/badges/chang-nova-element-ui/health.svg) ``` [![Health](https://phpackages.com/badges/chang-nova-element-ui/health.svg)](https://phpackages.com/packages/chang-nova-element-ui) ``` ### Alternatives [whitecube/nova-flexible-content Flexible Content & Repeater Fields for Laravel Nova. 8113.3M27](/packages/whitecube-nova-flexible-content)[outl1ne/nova-multiselect-field A multiple select field for Laravel Nova. 3423.3M2](/packages/outl1ne-nova-multiselect-field)[coroowicaksono/chart-js-integration A Simple Dashboard Chart in Laravel Nova using Chart JS. Starting create your own dashboard with Chart JS Integration can save your time and help you maintain consistency across standard elements such as Bar, Stacked, Line, Area, Doughnut and Pie Chart. 2182.0M1](/packages/coroowicaksono-chart-js-integration)[waynestate/nova-ckeditor4-field This nova package allows you to use CKEditor 4 for text areas. 63769.8k9](/packages/waynestate-nova-ckeditor4-field)[markwalet/nova-modal-response A Laravel Nova asset for Modal responses on an action. 17878.9k](/packages/markwalet-nova-modal-response)[interaction-design-foundation/nova-unlayer-field A Laravel Nova field for Unlayer to compose emails and landing pages. 34293.4k](/packages/interaction-design-foundation-nova-unlayer-field) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)