https://github.com/tiknil/bs-blade-forms
Collection of blade components for building form using bootstrap
https://github.com/tiknil/bs-blade-forms
Last synced: 2 months ago
JSON representation
Collection of blade components for building form using bootstrap
- Host: GitHub
- URL: https://github.com/tiknil/bs-blade-forms
- Owner: tiknil
- License: mit
- Created: 2024-07-15T13:56:33.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2026-02-24T08:20:38.000Z (4 months ago)
- Last Synced: 2026-03-28T00:52:39.449Z (3 months ago)
- Language: PHP
- Size: 170 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Blade Form Components Library
[](https://packagist.org/packages/tiknil/bs-blade-forms)
[](https://packagist.org/packages/tiknil/bs-blade-forms)
Opinionated library designed to streamline the process of building forms in Laravel applications by leveraging Blade
components and Boostrap utilities.
- [Key Features](#key-features)
- [Installation](#installation)
- [Usage](#usage)
- [Examples](#examples)
- [Components](#components)
- [SearchSelect](#searchselect)
- [Autocomplete](#autocomplete)
- [MultiSelect](#multiselect)
- [Select](#select)
- [Input](#input)
- [Textarea](#textarea)
- [Checkbox](#checkbox)
- [Radio](#radio)
### Key Features
- **Reduced boilerplate**: Minimize repetitive code and simplify the form-building process
- **Advanced Select Components**: Utilize `SearchSelect` and `MultiSelect` for enhanced and complex selection input
needs, providing a better user experience.
- **Automatic Old Input Handling**: Automatically manage [old input](https://laravel.com/docs/validation#repopulating-forms) 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.
### Installation
You can install the package via composer:
```bash
composer require tiknil/bs-blade-forms
```
JS/CSS assets should be automatically published alongside the default laravel libraries assets. Alternatively, publish
them using:
```bash
php artisan vendor:publish --tag=bs-blade-forms:assets
```
> [!NOTE]
> Boostrap is not imported automatically by the library. We assume you are already using it on your page and it is
> already available
### Usage
The advanced select elements (SearchSelect / MultiSelect) requires some additional assets to be included. Add this
between your page `head` tag:
```php
...
{{ BsBladeForms::assets() }}
```
In your blade templates, use the provided components:
```bladehtml
```
#### Examples
Go from:
```html
@csrf
@method('patch')
{{ __('user.name') }}
{{ __('user.role') }}
-- Select a role --
@foreach($roles as $key => $label)
role) === $key)
>
{{ $label }}
@endforeach
newsletter) === '1') />
Subscribe to newsletter
```
To:
```bladehtml
```
## Components
#### Form
Renders a form, with optional modal binding.
```bladehtml
...
```
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.
#### SearchSelect
Renders a single selection element with a research bar for filtering the options.
```bladehtml
```
> [!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. |
| fetch-url | string | An url to fetch for available options (to use with big data). The library will add a `q` querystring param with the searched string. Response should be a json in the `{ [value]: [label] }` format |
| 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. |
#### Autocomplete
Renders an input field with dropdown suggestions that can be filtered by typing.
```bladehtml
```
> [!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 in the dropdown. |
| fetch-url | string | An url to fetch for available options (to use with big data). The library will add a `q` querystring param with the searched string. Response should be a json in the `{ [value]: [label] }` format |
| value | string, int | The initial selected value | |
| required | bool | Set the element as required (form can't be submitted without selection) | |
| placeholder | string | Input placeholder text 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 |
| \* | | Additional attributes will be forwarded to the underlying element. |
#### MultiSelect
Renders a multiple selection element with a research bar for filtering the options.
```bladehtml
```
> [!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. |
| fetch-url | string | An url to fetch for available options (to use with big data). The library will add a `q` querystring param with the searched string. Response should be a json in the `{ [value]: [label] }` format |
| 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 |
| select-buttons | bool | Whether or not to show "select all" and "unselect all" buttons (default true) |
| \* | | Additional attributes will be forwarded to the underlying element. |
#### Select
```bladehtml
```
| 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. |
#### Input
```bladehtml
```
| 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. |
#### Textarea
```bladehtml
```
| 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. |
#### Checkbox
```bladehtml
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. |
#### Radio
```bladehtml
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. |
#### Label
All form components automatically include the `Label` component when the `label` attribute is present, but it can be used independently:
```bladehtml
User email
```
### Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
## Contributing
Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
### Security
If you discover any security related issues, please
email [balduzzi.giorgio@tiknil.com](mailto:balduzzi.giorgio@tiknil.com) instead of using the issue tracker.
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
---
This package was generated using the [Laravel Package Boilerplate](https://laravelpackageboilerplate.com), following the
[laravelpackage.com](https://laravelpackage.com) documentation.