Opinionated library designed to streamline the process of building forms in Laravel applications by leveraging Blade components and Boostrap utilities.
- Reduced boilerplate: Minimize repetitive code and simplify the form-building process
- Advanced Select Components: Utilize
SearchSelectandMultiSelectfor enhanced and complex selection input needs, providing a better user experience. - Automatic Old Input Handling: Automatically manage old input based on the field name, ensuring form repopulation is seamless.
-
- Automatic Form model binding: Automatically binds to a model and populate the form with the corrisponding field
- Livewire Support: Fully integrate with Livewire by forwarding tags (e.g.,
wire:model) to the underlying input/select elements.
You can install the package via composer:
composer require tiknil/bs-blade-formsJS/CSS assets should be automatically published alongside the default laravel libraries assets. Alternatively, publish them using:
php artisan vendor:publish --tag=bs-blade-forms:assetsNote
Boostrap is not imported automatically by the library. We assume you are already using it on your page and it is already available
The advanced select elements (SearchSelect / MultiSelect) requires some additional assets to be included. Add this
between your page head tag:
<head>
...
{{ BsBladeForms::assets() }}
</head>In your blade templates, use the provided components:
<x-bs::search-select label="Your country" name="country" :options="$countries" required/>
<x-bs::multi-select label="Pick your countries" name="countries" :options="$countries" required/>
<x-bs::input label="Full Name" name="name" :value="$user->name"/>
Go from:
<form action="{{ route('users.edit', ['id' => $user->id]) }}" method="POST">
@csrf
@method('patch')
<label for="name" class="form-label">{{ __('user.name') }}</label>
<input type="text"
class="form-control"
id="name"
name="name"
value="{{ old('name', $user->name) }}"
/>
<label for="role" class="form-label">{{ __('user.role') }}</label>
<select name="role" id="role" class="form-select">
<option value="">-- Select a role --</option>
@foreach($roles as $key => $label)
<option value="{{ $key }}"
@selected(old('role', $user->role) === $key)
>
{{ $label }}
</option>
@endforeach
</select>
<div class="form-check">
<input type="checkbox"
class="form-check-input"
value="1"
name="newsletter"
id="newsletter"
@checked(old('newsletter', $user->newsletter) === '1') />
<label class="form-check-label" for="newsletter">
Subscribe to newsletter
</label>
</div>
</form>To:
<x-bs::form :model="$user" method="PATCH" action="{{ route('users.edit', ['id' => $user->id]) }}">
<x-bs::input
:label="__('user.name)"
name="name"
/>
<x-bs::select
:label="__('user.role')"
name="role"
:options="$roles"
empty-option="-- Select a role --"
/>
<x-bs::checkbox
name="newsletter"
label="Subscribe to newsletter"
/>
</x-bs::form>
Renders a form, with optional modal binding.
<x-bs::form :model="$model" method="PATCH" action="{{ route(...) }}">
...
</x-bs::form>
Automatically adds @csrf and @method(...) when required.
When a model is provided, x-bs:: components will automatically use the model corresponding field as default value.
Renders a single selection element with a research bar for filtering the options.
<x-bs::search-select
label="Your country"
name="country"
:value="$user->country"
:options="$countries"
icon="bi bi-map"
required
allow-clear
/>
Important
Include {{ BsBladeForms::assets() }} in the page head for this component to work
| Attribute | Type | Description |
|---|---|---|
| name | string | Required. Name of the select element |
| options | array, Collection | The options to display on the select. |
| value | string, int | The initial selected value |
| required | bool | Set the select element as required (form can't be submitted without selection) |
| placeholder | string | Element placeholder when no option is selected |
| label | string | If present, renders a Label above the element |
| icon | string | If present, renders an IconGroup around the element |
| allow-clear | bool | Allows the user to clear the selected option |
| empty-value | string | The value to submit when no option is selected |
| search-placeholder | string | The placeholder of the search input |
| * | Additional attributes will be forwarded to the underlying element. |
Renders a multiple selection element with a research bar for filtering the options.
<x-bs::multi-select
label="Which countries you visited?"
name="countries"
:value="['US', 'DE', 'IT']"
:options="$countries"
icon="bi bi-map"
required
/>
Important
Include {{ BsBladeForms::assets() }} in the page head for this component to work
| Attribute | Type | Description |
|---|---|---|
| name | string | Required. Name of the select element |
| options | array, Collection | The options to display on the select. |
| value | array | The initial selected values |
| required | bool | Set the select element as required (form can't be submitted without selection) |
| placeholder | string | Element placeholder when no option is selected |
| label | string | If present, renders a Label above the element |
| icon | string | If present, renders an IconGroup around the element |
| search-placeholder | string | The placeholder of the search input |
| * | Additional attributes will be forwarded to the underlying element. |
<x-bs::select
label="Your country"
name="country"
:value="$user->country"
:options="$countries"
icon="bi bi-map"
empty-option="No answer"
required
/>
| Attribute | Type | Description |
|---|---|---|
| name | string | Required. Name of the select element |
| options | array, Collection | The options to display on the select. |
| value | string | The initial selected values |
| required | bool | Set the select element as required (form can't be submitted without selection) |
| label | string | If present, renders a Label above the element |
| icon | string | If present, renders an IconGroup around the element |
| empty-option | string | When present, an additional option with empty string as value is added with this label. |
| * | Additional attributes will be forwarded to the underlying element. |
<x-bs::input
type="email"
label="Your email"
name="email"
:value="$user->email"
icon="bi bi-envelop"
required
/>
| Attribute | Type | Description |
|---|---|---|
| name | string | Required. Name of the input element |
| value | string | The initial value |
| label | string | If present, renders a Label above the element |
| icon | string | If present, renders an IconGroup around the element |
| type | string | Type of the input (text by default) |
| * | Additional attributes will be forwarded to the underlying element. |
<x-bs::textarea
label="Notes"
name="notes"
:value="$user->notes"
required
/>
| Attribute | Type | Description |
|---|---|---|
| name | string | Required. Name of the textarea element |
| value | string | The initial value |
| label | string | If present, renders a Label above the element |
| * | Additional attributes will be forwarded to the underlying element. |
<x-bs::checkbox
label="Enable"
name="enabled"
@checked($user->enabled)
/>
Note
When the form is submitted, a parameter is submitted even when the checkbox is not checked!
The parameter submitted has value 1 when the checkbox is checked, 0 otherwise
| Attribute | Type | Description |
|---|---|---|
| name | string | Required. Name of the element |
| label | string | If present, renders a Label aside the input checkbox |
| checked | bool | Initial checked value (default false) |
| value | string | The value submitted when the checkbox is checked (default 1) |
| false-value | string | The value submitted when the checkbox is not checked (default 0) |
| send-false-value | bool | Send the false value when the checkbox is not checked (default true) |
| * | Additional attributes will be forwarded to the underlying element. |
<x-bs::radio
label="Contact choice"
name="contact_choice"
value="email"
@checked($user->contact_choice === 'email')
/>
| Attribute | Type | Description |
|---|---|---|
| name | string | Required. Name of the element |
| label | string | If present, renders a Label aside the input radio |
| checked | bool | Initial checked value (default false) |
| value | string | The value submitted when the checkbox is checked |
| * | Additional attributes will be forwarded to the underlying element. |
All form components automatically include the Label component when the label attribute is present, but it can be used independently:
<x-bs::label name="email">
User email
</x-bs::label>
Please see CHANGELOG for more information what has changed recently.
Please see CONTRIBUTING for details.
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
The MIT License (MIT). Please see License File for more information.
This package was generated using the Laravel Package Boilerplate, following the laravelpackage.com documentation.