steelants / form
Simple Form Builder class based on Laravel & Bootstrap 5
Installs: 1 178
Dependents: 3
Suggesters: 0
Security: 0
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 0
Language:Blade
Requires
- laravel/framework: ^11.0|^12.0
- livewire/livewire: ^2.0|^3.0
README
Livewire compatible form elements. Styled with Bootstrap 5.
Currently WIP
Created by: SteelAnts s.r.o.
Installation
npm|pnpm|bun i quill quill-table-ui quill-mention
Include scripts
app.js
import './quill';
app.scss
import "./quill";
Examples
Form
Attributes:
- action
- method
<x-form::form method="DELETE" action="action-url"> ... </x-form::form> <x-form::form wire:submit="save"> ... </x-form::form>
Automatically inserts _method and _token base on method attribute
<form enctype="multipart/form-data" action="action-url" method="POST"> <input type="hidden" name="_token" value="xxxxxxxx" autocomplete="off"> <input type="hidden" name="_method" value="DELETE"> ... </form> <form wire:submit="save" enctype="multipart/form-data"> ... </form>
Input
Attributes:
- name - Input name (required for non-livewire use)
- label - Input label (optional)
- help - Help text
- group-class - Class of wrapping element
- value - value
<x-form::input group-class="mb-3" type="text" name="test" id="xxxx" label="Basic input" placeholder="This is placeholder" help="Help text is here"/> <x-form::input type="text" wire:model="test" label="Livewire input"/>
Select
Attributes:
- name - Input name (required for non-livewire use)
- label - Input label (optional)
- help - Help text
- group-class - Class of wrapping element
- options - Array of values
- value - Selected value (for non-livewire use)
- placeholder - Placeholder (hidden option withou value)
- value - value
@php $options = [ 1 => 'one', 2 => 'two', 3 => 'three', ]; @endphp <x-form::select wire:model="select" group-class="mb-3" label="Livewire Select" :options="$options" placeholder="Select value..."/> <x-form::select name="select" group-class="mb-3" label="Basic Select" value="2" :options="$options" placeholder="Select value..."/>
Textarea
Attributes:
- name - Input name (required for non-livewire use)
- label - Input label (optional)
- help - Help text
- group-class - Class of wrapping element
- value - value
<x-form::textarea wire:model="textarea"/>
Quill
- name - Input name (required for non-livewire use)
- label - Input label (optional)
- help - Help text
- group-class - Class of wrapping element
- mentions - Users for @ mentions. (see quill-mention package for more info)
- tags - Hashtags (see quill-mention package for more info)
<x-form::quill group-class="mb-3" label="Quill" name="quill" value="This is init value from html" :mentions="[{id: 1, value: 'SteelAnts'}]" :tags="[{id: 1, value: 'Laravel'}]" /> <x-form::quill group-class="mb-3" label="Quill" wire:model="quill" />
Button
<x-form::button class="btn-primary" type="submit">submit</x-form::button>
Notes
- Non-livewire elment require
name
attribute - Livewire element require
wire:model*
attribute. - Values are inserted with
old()
- All attributes are passed down to input/select/texarea element.
Development
-
Create subfolder
/packages
at root of your laravel project -
clone repository to sub folder
/packages
(you need to be positioned at root of your laravel project in your terminal)
git clone https://github.com/steelants/Laravel-Form.git ./packages/Laravel-Form
- edit composer.json file
"autoload": { "psr-4": { "SteelAnts\\Form\\": "packages/Laravel-Form/src/", } }
- Add provider to
bootstrap/providers.php
return [ ... SteelAnts\Form\FormServiceProvider ::class, ... ];