PHPackages jensramakers/laravel-input-components - 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. jensramakers/laravel-input-components ActiveLibrary[Utility & Helpers](/categories/utility) jensramakers/laravel-input-components ===================================== laravel input components v1.0.6(3y ago)048Blade Since Nov 3Pushed 3y ago1 watchersCompare [ Source](https://github.com/PS222407/laravel-input-components)[ Packagist](https://packagist.org/packages/jensramakers/laravel-input-components)[ RSS](/packages/jensramakers-laravel-input-components/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (7)DependenciesVersions (8)Used By (0) Installation ============ [](#installation) package ------- [](#package) install package via composer ``` composer require jensramakers/laravel-input-components ``` publish country translations ``` php artisan vendor:publish --provider="Jensramakers\LaravelInputComponents\LaravelInputComponentsServiceProvider" ``` PLACE ALL IMPORTS EN REQUIRES IN APP.JS AND OTHER CODE IN A DIFFERENT FILE to change colors if the input fields use the input\_color variable in tailwind.config.js ``` module.exports = { content: [ './vendor/jensramakers/**/*.blade.php', ], theme: { extend: { colors: { "input_color": "yellow", }, }, }, }; ``` Darkmode support ---------------- [](#darkmode-support) Add this code in your javascript after loading components like select2 for example ``` if (document.documentElement.classList.contains('dark')) { try {setSelectDarkMode()} catch ($e) {} try {setSelectDarkModeCountry()} catch ($e) {} try {setSelectDarkModePhone()} catch ($e) {} try {setSelectDarkModeSelectArray()} catch ($e) {} try {setSelectDarkModeSelectModel()} catch ($e) {} try {setSelectDarkModeSelectMultiple()} catch ($e) {} } ``` install jQuery -------------- [](#install-jquery) ``` npm i jquery ``` WEBPACK ``` window.$ = window.jQuery = require('jquery'); ``` VITE ``` import $ from 'jquery'; window.$ = $; ``` flowbite | help popover ----------------------- [](#flowbite--help-popover) to use the help info popover install flowbite select2 | dropdowns ------------------- [](#select2--dropdowns) to use the selects and tag input optimally install select2 ``` npm i select2 ``` import in javascript ``` require('select2'); ``` and import in css ``` @import '~select2/dist/css/select2'; ``` And add this javascript to make tag and select2 possible ``` $(".tag-multiple-creation-delimeter-comma-space").select2({ tags: true, tokenSeparators: [',', ' '] }) $(".option-multiple").select2() matchStart = function(params, data) { if ($.trim(params.term) === '') { return data; } if (typeof data.text === 'undefined') { return null; } if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) > -1) { return $.extend({}, data, true); } return null; } $(".option-search").select2({ matcher: matchStart }); ``` Spatie-tags | tag input ----------------------- [](#spatie-tags--tag-input) the tag input only accepts tags from this package: Country selector ---------------- [](#country-selector) for country input install: ``` npm i country-select-js ``` import javascript ``` require('country-select-js'); $(".country-input").countrySelect({ defaultCountry: 'nl', preferredCountries: ['nl', 'be', 'de', 'lu'], responsiveDropdown: false, }); ``` and import css ``` @import "~country-select-js/build/css/countrySelect.min.css"; ``` Phone input ----------- [](#phone-input) for phone input install npm package: ``` npm i intl-tel-input ``` and use this piece of javascript code PLACE THIS IN A STANDALONE SCRIPT FILE! ``` import intlTelInput from 'intl-tel-input'; require('intl-tel-input/build/js/utils') let iti = null; const initializePhoneNumberInput = function () { const input = document.querySelector("#phone"), errorMsg = document.querySelector("#error-msg"), validMsg = document.querySelector("#valid-msg"); if (input) { // here, the index maps to the error code returned from getValidationError - see readme const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"]; // initialise plugin iti = intlTelInput(input, { preferredCountries: ['nl', 'be', 'de', 'lu'], hiddenInput: "full", formatOnDisplay: false, }); iti.setCountry($('#defaultPhoneCountryRegion').val().toLowerCase()) const reset = function() { let el = document.getElementById('phone_number_region'); el.value = iti.getSelectedCountryData().iso2; el.dispatchEvent(new Event('input')); input.classList.remove("error"); errorMsg.innerHTML = ""; errorMsg.classList.add("hidden"); validMsg.classList.add("hidden"); }; // on blur: validate input.addEventListener('blur', function() { reset(); if (input.value.trim()) { if (iti.isValidNumber()) { validMsg.classList.remove("hidden"); } else { input.classList.add("error"); let errorCode = iti.getValidationError(); errorMsg.innerHTML = errorMap[errorCode]; errorMsg.classList.remove("hidden"); } } }); // on keyup / change flag: reset input.addEventListener('change', reset); input.addEventListener('keyup', reset); input.addEventListener("countrychange", reset); } } initializePhoneNumberInput(); window.addEventListener('reinitialize', () => { initializePhoneNumberInput(); }); ``` import the css ``` @import "~intl-tel-input"; ``` IMPORTANT id "phone" is reserved IMPORTANT multiple phone inputs on 1 page will not work currently CKEditor -------- [](#ckeditor) Put these 2 files below directly in public folder, they are already minified for ckeditor add this JS file [https://drive.google.com/file/d/1ICjjAnDuqqJl7PwrdVAMcFuzH5TrhqJy/view?usp=share\_link](https://drive.google.com/file/d/1ICjjAnDuqqJl7PwrdVAMcFuzH5TrhqJy/view?usp=share_link) for ckeditor add this CSS file [https://drive.google.com/file/d/14zMeVnjHwLLGBPigJuOXtT1XN8RDMZNt/view?usp=share\_link](https://drive.google.com/file/d/14zMeVnjHwLLGBPigJuOXtT1XN8RDMZNt/view?usp=share_link) and this piece of code ``` document.querySelectorAll('.editor').forEach(function (item) { ClassicEditor.create(item, { licenseKey: '', }) .then(newEditor => { newEditor.editing.view.change( writer => { writer.setStyle('min-width', '1000px', newEditor.editing.view.document.getRoot()); } ); }) .catch(error => { console.error('Error CKEditor'); console.error(error); }); }) ``` Usage ===== [](#usage) Here some examples of usages for these inputs ``` ``` ### Health Score 24 — LowBetter than 32% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity8 Limited adoption so far Community7 Small or concentrated contributor base Maturity51 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% 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 ~6 days Total 7 Last Release 1247d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/a00f8f2c9d2164380cf71b675887807d39d3db7b1476ca3a99b978519022c2e5?d=identicon)[jensramakers](/maintainers/jensramakers) --- Top Contributors [![PS222407](https://avatars.githubusercontent.com/u/74543766?v=4)](https://github.com/PS222407 "PS222407 (12 commits)") ### Embed Badge ![Health badge](/badges/jensramakers-laravel-input-components/health.svg) ``` [![Health](https://phpackages.com/badges/jensramakers-laravel-input-components/health.svg)](https://phpackages.com/packages/jensramakers-laravel-input-components) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)