Downloads
Stars
Version
We recommend the use of https://github.com/blade-ui-kit/blade-ui-kit
You can install this package via composer using this command:
composer require mydnic/laravel-form-blade-components
The package will automatically register itself
You then must publish the components with:
php artisan vendor:publish --provider="Mydnic\FormBladeComponents\FormBladeComponentsServiceProvider" --tag="blade-components"
This will copy the blade components in resources/views/components/form and will be automatically registered.
You can customize them the way you want.
In your blade views you can now add form elements in a very clean way.
Include an <input>
element into your views.
@input([
'name' => 'first_name',
'type' => 'text',
'label' => 'First Name',
'attributes' => 'required checked max="10"',
'placeholder' => 'Some placeholder',
])@endinput
Include a <textarea>
element into your views.
@textarea([
'name' => 'description',
'label' => 'Description',
'placeholder' => 'Some placeholder',
])@endtextarea
Include an <input type="checkbox">
element into your views.
@checkbox([
'name' => 'is_enabled',
'label' => 'Enabled',
'object' => $user
])@endcheckbox
Include a <select>
element into your views.
@select([
'name' => 'user_id',
'label' => 'User',
'object' => $user,
'options' => $users
])@endselect
By default the input are not filled with any value, like any empty input elements.
You can force fill an attribute by providing a value
like this:
@input([
'name' => 'first_name',
'label' => 'First Name',
'value' => 'Clément',
])@endinput
You can fill an input value using an object attribute by providing an object
. This is very helpful when editing a resource.
@input([
'name' => 'first_name',
'label' => 'First Name',
'object' => $user,
])@endinput
All components make use of the old()
helper from laravel, allowing the input to be filled in by previous value when submitting a form. This is done automatically and do not need any additional attribute.
You can customize the css classes on each element by editing the blade components once they are published.
By default, each element use some default classes:
<label class="label"></label>
Default state:
<input class="input">
Error state:
<input class="input error">
<p class="helper-error"></p>
Default state:
<textarea class="textarea">
Error state:
<textarea class="textarea error"></textarea>
<p class="helper-error"></p>
Default state:
<input type="checkbox" class="checkbox">
Error state:
<input type="checkbox" class="checkbox error">
<p class="helper-error"></p>
Default state:
<select class="select"></select>
Error state:
<select class="select error"></select>
<p class="helper-error"></p>