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. chang/nova-element-ui ActiveLibrary 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 6d 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 54% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity3 Limited adoption so far Community12 Small or concentrated contributor base Maturity67 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 2727d 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 [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)[laravel/nova-log-viewer A Laravel Nova tool for viewing your application logs. 136301.3k1](/packages/laravel-nova-log-viewer)[stepanenko3/nova-command-runner Laravel Nova tool for running Artisan and bash(shell) commands. 36983.0k](/packages/stepanenko3-nova-command-runner)[sbine/route-viewer A Laravel Nova tool to view your registered routes. 57215.9k](/packages/sbine-route-viewer)[dniccum/nova-documentation A Laravel Nova tool that allows you to add markdown-based documentation to your administrator's dashboard. 37116.4k](/packages/dniccum-nova-documentation) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)