, (*1)
Built around Bootstrap 4,
these are blade components for form fields to speed up form creation., (*2)
...as long as you use horizontal forms, as I do. With my layout.
I might consider some more customization in a later version,
if it's not too difficult., (*3)
I'm using spatie/laravel-html
for generating each input; this has the advantage of handling old data
if a form submission fails, or using values from a model. See
the documentation., (*4)
Compatibility Chart
| Laravel Form Components |
Laravel |
PHP |
| 4.x |
8.x-9.x |
8.0+ |
| 3.x |
6.x-8.x |
7.3-8.0 |
| 2.x |
5.4-5.8 |
7.1+ |
| 1.x |
5.4-5.7 |
7.0+ |
Installing
Require the project using Composer:, (*5)
$ composer require rickselby/laravel-form-components
Laravel 5.5+ will auto-discover the package., (*6)
For Laravel 5.4, in config/app.php, add this line to the providers array:, (*7)
RickSelby\Laravel\FormComponents\FormComponentsProvider::class,
Styles
I wasn't happy with the layout of checkboxes, and need to add a class for some additional padding.
This can be published to public/vendor/rickselby/laravel-form-components/form_components.css:, (*8)
./artisan vendor:publish --provider="RickSelby\Laravel\FormComponents\FormComponentsProvider" --tag="public"
Alternatively, you can include the scss source if you're using Laravel Mix or similar. In your app.scss, add:, (*9)
@import "vendor/rickselby/laravel-form-components/src/resources/assets/sass/form_components";
(I'm not sure I'm a big fan of publishing a front-end requirement through composer, but it seems to fit in this case)., (*10)
Usage
Simple fields can be added using @include:, (*11)
@include('fc::checkbox', ['label' => 'Is active?', 'name' => 'active'])
@include('fc::date', ['label' => 'Date of birth', 'name' => 'birthday'])
@include('fc::file', ['label' => 'Your face', 'name' => 'profile'])
@include('fc::number', ['label' => 'Number of feet', 'name' => 'feet'])
@include('fc::select', ['label' => 'Country', 'name' => 'country', 'options' => $options])
@include('fc::static', ['label' => 'Something you cannot change', 'name' => 'static'])
@include('fc::text', ['label' => 'Name', 'name' => 'name'])
@include('fc::textarea', ['label' => 'Personal statement', 'name' => 'statement'])
By using @component instead, you can use @slot to define the values,
which can be preferable for more complicated values; for example, those with HTML:, (*12)
@component('fc::text', ['name' => 'name'])
@slot('label')
<em>Label with HTML</em>
@endslot
@endcomponent
You can mix-and-match passing data using an array and slots as best fits your need.
If you only use an array, you can use @include instead of @component and drop the @endcomponent., (*13)
Help text
is supported:, (*14)
@component('fc::text', ['label' => 'Name', 'name' => 'name'])
@slot('help')
This should be your name.
@endslot
@endcomponent
Default values can be passed, too:, (*15)
@include('fc::number', ['label' => 'Number of feet', 'name' => 'feet', 'value' => 2])
As can placeholders:, (*16)
@include('fc::text', ['label' => 'Name', 'name' => 'name', 'placeholder' => 'Your name'])
Classes can be added to the inputs; you must pass an array:, (*17)
@include('fc::text', ['label' => 'Name', 'name' => 'name', 'class' => ['a-name']])
So can data attributes, in a similar manner, (*18)
@include('fc::text', ['label' => 'Name', 'name' => 'name', 'data' => ['type', 'first']])
Validation errors are shown automatically based on the field name, thanks to the .invalid-feedback class., (*19)
Date Picker
@include('fc::datepicker', ['label' => 'Date of birth', 'name' => 'birthday'])
Date picker is just a text field with the class date-picker,
which can then have whatever (probably javascript) applied to it to convert it to something more functional., (*20)
The submit button is intended to be used with @component, as it only has one parameter:, (*21)
@component('fc::submit')
Submit this form
@endcomponent
Overriding
Laravel allows overriding of package views. Create the directory resources/views/vendor/fc;
then create any views you wish to override., (*22)
Extending
Custom fields can be added by extending the fc::layout.field template.
Ensure the $label, $name and $help attributes are passed through.
As an example, this is how the text field could be implemented:, (*23)
@component('fc::layout.field', ['label' => $label, 'name' => $name, 'help' => $help ?? null])
{{ html()->text($name, $value ?? null)->placeholder($placeholder ?? null)->class(['form-control', 'is-invalid' => $errors->has($name)]) }}
@endcomponent
There are more available settings in the fc::layout.field template for more customisation., (*24)
License
Laravel Form Components is licensed under The MIT License (MIT)., (*25)
Wallogit.com
