PHPackages shaneoliver/laravel-form-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. shaneoliver/laravel-form-components ActiveLibrary[Utility & Helpers](/categories/utility) shaneoliver/laravel-form-components =================================== Beautiful Laravel Form Components 015HTMLCI failing Since Apr 7Pushed 6y ago1 watchersCompare [ Source](https://github.com/shaneoliver/laravel-form-components)[ Packagist](https://packagist.org/packages/shaneoliver/laravel-form-components)[ RSS](/packages/shaneoliver-laravel-form-components/feed)WikiDiscussions master Synced yesterday READMEChangelogDependenciesVersions (1)Used By (0) Beautiful Laravel Form Components ================================= [](#beautiful-laravel-form-components) [![Latest Version on Packagist](https://camo.githubusercontent.com/569362401070e3fc539f3763cb71fd6a331e0af3892f06b8660105296370e7b8/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7368616e656f6c697665722f6c61726176656c2d666f726d2d636f6d706f6e656e74732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/shaneoliver/laravel-form-components)[![Build Status](https://camo.githubusercontent.com/6278dc5e497f0ac96a429f5b80907d702785c7045701c2d457238649b756d2a5/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f7368616e656f6c697665722f6c61726176656c2d666f726d2d636f6d706f6e656e74732f6d61737465722e7376673f7374796c653d666c61742d737175617265)](https://travis-ci.org/shaneoliver/laravel-form-components)[![Quality Score](https://camo.githubusercontent.com/38f91ec58ec9a26a9de4f07162fb131503472edd4d00d00891fe9e7842dea685/68747470733a2f2f696d672e736869656c64732e696f2f7363727574696e697a65722f672f7368616e656f6c697665722f6c61726176656c2d666f726d2d636f6d706f6e656e74732e7376673f7374796c653d666c61742d737175617265)](https://scrutinizer-ci.com/g/shaneoliver/laravel-form-components)[![Total Downloads](https://camo.githubusercontent.com/b6871f97f8fb4cc8c9159d53826937b0461d4f6b2f6c49b572db9510fd21b866/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f7368616e656f6c697665722f6c61726176656c2d666f726d2d636f6d706f6e656e74732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/shaneoliver/laravel-form-components) Easily create beautiful modern forms with floating labels and validation using simple Laravel form component definitions. [![alt text](https://github.com/shaneoliver/laravel-form-components/raw/master/assets/img/form-validated.png "Validated form")](https://github.com/shaneoliver/laravel-form-components/blob/master/assets/img/form-validated.png) Installation ------------ [](#installation) You can install the package via composer: ``` composer require shaneoliver/laravel-form-components ``` Because the form styling extends Bootstrap 4, you will need that install as well. Please refer to the Bootstrap docs or install it along with laravel UI. ``` composer require laravel/ui php artisan ui bootstrap ``` There is a small amount of additional Sass you will need to style the form. Publish the Sass and import it into your app.scss file ``` php artisan vendor:publish --tag="form-components" ``` ``` @import 'vendor/so/form'; ``` Usage ----- [](#usage) Create a form component using ``. This component provides basic Bootstrap form styling around the default slot and includes the submit button. Alternatively, you can create your own form element and place the input components inside. Use Laravels request validation to validation the request and pass back the error bag. A valid input will show the `.is-valid` Bootstrap class while an invalid input will show `.is-invalid`. An input that is invalid in the error bag but doesn't return an old value like a password will not show any validation. Components ---------- [](#components) ### Form [](#form) ``` // Default slot ``` Props - `action` the endpoint to submit your form to. For a string use `action` for a php command `:action` as in the example above - `method` the method of the form. This defaults to POST - `button` the label of the submit button. Default 'Submit' ### Input [](#input) ``` ``` Props - `label` acts as the placeholder for the inputs floating label - `type` the type on input this is. Defaults to 'text' - `class` the wrapper element classes. Should be used for adding columns and margin where required. Default `col-12 mb-3` - `valid-text` the text to show when the input was successfully validated. Defaults to 'Looks good' Any additional HTML input attributes will automatically be applied to the input eg `autofocus`, `required`, `min`, `max` All input components use this set of basic props and rules regarding html attributes ### Textarea [](#textarea) ``` ``` The textarea has the same props as the input above. It will also add any html attributes to the textarea eg `cols`, `rows` ### Select [](#select) ``` ``` Use the `options` prop to pass a collection containing a `value` and `label` key used to fill the options. If an options prop isn't given you can use the default slot to add your own options. The select option has a default slot where you can add your own option elements, alternatively you can use the `options` prop which expects a collection of ``` Select One Two Three ``` ### Radio [](#radio) ``` ``` Use the `options` prop to pass a collection containing a `value` and `label` key used to create the list of radio inputs. ### Checkbox [](#checkbox) ``` ``` ### File [](#file) ``` ``` If you are using a file input in your form, be sure to add the `enctype="multipart/form-data"` attribute to your form component or element. Use the html attributes on the file input component for mutliple file handling and mimetype validation. For more information on how the custom file input works, please visit the [Bootstrap documentation](https://getbootstrap.com/docs/4.4/components/forms/#file-browser) ### Full Example [](#full-example) A full example of all elements below ``` ``` ### Testing [](#testing) ``` composer test ``` ### Changelog [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. ### Security [](#security) If you discover any security related issues, please email instead of using the issue tracker. Credits ------- [](#credits) - [Shane Oliver](https://github.com/shaneoliver) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 18 — LowBetter than 8% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity6 Limited adoption so far Community7 Small or concentrated contributor base Maturity34 Early-stage or recently created project 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. ### Community Maintainers ![](https://www.gravatar.com/avatar/a0f5cb91e45677f6d45180dcb3ba9a730621d23da28be878839e6c686d61b94e?d=identicon)[shaneoliver](/maintainers/shaneoliver) --- Top Contributors [![shaneoliver](https://avatars.githubusercontent.com/u/18100929?v=4)](https://github.com/shaneoliver "shaneoliver (9 commits)") ### Embed Badge ![Health badge](/badges/shaneoliver-laravel-form-components/health.svg) ``` [![Health](https://phpackages.com/badges/shaneoliver-laravel-form-components/health.svg)](https://phpackages.com/packages/shaneoliver-laravel-form-components) ``` ### Alternatives [uma/composer-psysh No-frills PsySH-Composer plugin 183.2k](/packages/uma-composer-psysh)[antares/accessible PHP library that allows you to define your class' getters, setters and constructor with docblock annotations. 123.9k1](/packages/antares-accessible) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)