codions / laravel-livewire-forms
Laravel Livewire form component with declarative Bootstrap 5 fields and buttons.
Requires
- laravel/framework: ^8.0|^9.0|^10.0
- livewire/livewire: ^2.0
This package is auto-updated.
Last update: 2024-10-28 23:21:15 UTC
README
Laravel Livewire form component with declarative Bootstrap 5 fields and buttons.
Installation
composer require codions/laravel-livewire-forms
Usage
Make a new form:
php artisan make:form users.create-user-form
Declare fields:
public function fields() { return [ Input::make('name', 'Name'), Input::make('email', 'Email')->type('email'), Input::make('password', 'Password')->type('password'), ]; }
Declare buttons:
public function buttons() { return [ Button::make('Create User')->click('createUser'), Button::make('Cancel', 'secondary')->url('/'), ]; }
Declare rules:
public function rules() { return [ 'name' => ['required', 'string', 'max:255'], 'email' => ['required', 'string', 'email', 'max:255', 'unique:users'], 'password' => ['required', 'string', 'min:8'], ]; }
Declare an action (notice the use of ->click('createUser')
in the button example above:
public function createUser() { $this->validate(); User::create([ 'name' => $this->data('name'), 'email' => $this->data('email'), 'password' => Hash::make($this->data('password')), ]); return redirect('/'); }
Form Slider
Create a form that slides out by specifying a title
, layout
and route
to use:
class Login extends FormSliderComponent { public $title = 'Login'; public $layout = 'layouts.card'; public $btnText = 'Login'; }
Setting Initial Data
You can set the initial form data / defaults via the data
array property in your component mount
method:
class UpdateUserForm extends FormComponent { public $title = 'Update User'; public function mount(User $user) { $this->data = $user->toArray(); } }
Accessing Data
Use the data
method in the component to access current form data (you can use dot notation for array values):
public function createUser() { User::create([ 'name' => $this->data('name'), 'email' => $this->data('email'), 'likes_turtles' => $this->data('answers.likes_turtles'), ]); }
Data Binding
Most fields allow you to change the way livewire binds data via helper methods that are chained to fields e.g.:
Input::make('name', 'Name'), // defaults to defer Input::make('name', 'Name')->instant(), // bind on keyup Input::make('name', 'Name')->defer(), // bind on action Input::make('name', 'Name')->lazy(), // bind on change Input::make('name', 'Name')->debounce(500), // bind after 500ms delay
Sizing
Many fields also allow you to specify a size for the input e.g.:
Input::make('name', 'Name'), // defaults to normal sizing Input::make('name', 'Name')->small(), // small sizing Input::make('name', 'Name')->large(), // large sizing
Disabling
Some fields allow you to disable or set them to readonly, and even plaintext for inputs:
Input::make('name', 'Name')->disabled(), Input::make('name', 'Name')->readonly(), Input::make('name', 'Name')->plaintext(),
Helper Text
Specify helper text for a field by using the help
method:
Input::make('name', 'Name')->help('Please tell us your name!'),
Available Fields
Alert ($message, $style = 'success')
An alert box.
Alert::make('It worked!'), Alert::make('Something bad happened.', 'danger'), Alert::make('Something else happened.')->dismissible(),
The $style
parameter accepts a bootstrap alert style e.g. success
, danger
, primary
, etc. Use the dismissible
method to make the alert dismissible.
Available methods: dismissible
Arrayable ($name, $label = null)
An array of fields.
Arrayable::make('locations', 'Locations')->fields([ Input::make('city')->placeholder('City'), Select::make('state')->placeholder('State')->options(['FL', 'TX']), ]),
Available methods: fields
, help
, disabled
Bootstrap Grid
A bootstrap support to the form.
Row ($label = null)
and RowColumn ($label = null)
An array of fields display in a Bootstrap Row or Column
Row::make()->fields([ Input::make('city')->placeholder('City'), Select::make('state')->placeholder('State')->options(['FL', 'TX']), ]),
Available methods: fields
, help
, disabled
, isColumn
, col_class
Button ($label = 'Submit', $style = 'primary')
A button used for actions and links.
Button::make('Register')->click('register'), Button::make('Already registered?', 'secondary')->route('login'), Button::make('Go back home', 'link')->url('/'),
The $style
parameter accepts a bootstrap button style e.g. primary
, outline-secondary
, link
, etc. Use the block
method to make a button full width.
Available methods: block
, click
, href
, route
, url
Checkbox ($name, $label)
A checkbox field.
Checkbox::make('accept', 'I accept the terms'), Checkbox::make('accept', 'I accept')->help('Please accept our terms'), Checkbox::make('active', 'This user is active')->switch(),
Use the switch
method to style the checkbox as a switch.
Available methods: switch
, help
, instant
, addAttrs
, defer
, lazy
, debounce
, disabled
Checkboxes ($name, $label = null)
An array of checkbox fields.
Checkboxes::make('colors', 'Colors')->options(['Red', 'Green', 'Blue']),
Available methods: options
, switch
, help
, instant
, addAttrs
, defer
, lazy
, debounce
, disabled
Color ($name, $label = null)
A color picker field.
Color::make('hair_color', 'Hair Color'),
Available methods: small
, large
, containerSize
, help
, instant
, addAttrs
, defer
, lazy
, debounce
, disabled
, readonly
Conditional
A statement used to conditionally show fields.
Conditional::if($this->data('color') == 'green', [ Input::make('green', 'Green'), ])->elseif($this->data('color') == 'blue', [ Input::make('blue', 'Blue'), ])->else([ Input::make('red', 'Red'), ]),
Available methods: if
, elseif
, else
DynamicComponent ($name, $attrs = [])
A field used to display dynamic third-party components.
DynamicComponent::make('honey'), DynamicComponent::make('honey', ['recaptcha' => true]),
This would translate to <x-honey/>
and <x-honey recaptcha="recaptcha"/>
in your form.
File ($name, $label = null)
A file upload field.
File::make('avatar', 'Avatar'), File::make('photos', 'Photos')->multiple(), File::make('documents', 'Documents')->multiple()->disk('s3'),
Use the multiple
method to allow multiple file uploads. Optionally specify the filesystem disk to use via the disk
method (used for linking to files, defaults to the filesystem config default
).
Available methods: disk
, multiple
, help
, disabled
Input ($name, $label = null)
An input field.
Input::make('name', 'Name'), Input::make('phone')->placeholder('Phone')->type('tel'), Input::make('email', 'Email')->type('email')->large(), Input::make('price', 'Price')->type('number')->append('$')->prepend('.00'),
The type
method accepts a standard HTML input type. As with other inputs, use small
or large
to resize an input. Input fields also support appends/prepends, and even plaintext.
Available methods: small
, large
, containerSize
, help
, instant
, addAttrs
, defer
, lazy
, debounce
, disabled
, readonly
, placeholder
, type
, append
, prepend
, plaintext
Radio ($name, $label = null)
A radio field.
Radio::make('gender', 'Gender')->options(['Male', 'Female']),
Available methods: options
, switch
, help
, instant
, addAttrs
, defer
, lazy
, debounce
, disabled
Select ($name, $label = null)
A select dropdown field.
Select::make('color', 'Color')->options(['Red', 'Green', 'Blue']), Select::make('color', 'Color')->options([ '#ff0000' => 'Red', '#00ff00' => 'Green', '#0000ff' => 'Blue', ])->instant(), Select::make('user_id', 'User')->options(User::pluck('name', 'id')->toArray()),
Available methods: options
, small
, large
, containerSize
, help
, instant
, addAttrs
, defer
, lazy
, debounce
, disabled
, placeholder
Textarea ($name, $label = null)
A textarea field.
Input::Textarea('bio', 'Biography'), Input::Textarea('bio', 'Biography')->rows(5),
Available methods: small
, large
, containerSize
, help
, instant
, addAttrs
, defer
, lazy
, debounce
, disabled
, readonly
, placeholder
, rows
View ($name, $data = [])
Used to render a custom Blade view inside the form.
View::make('custom-view', ['hello' => 'world']),
Sameple Example
Code
namespace App\Http\Livewire\Clients; use Codions\LaravelLivewireForms\Components\Button; use Codions\LaravelLivewireForms\Components\FormComponent; use Codions\LaravelLivewireForms\Components\Input; use Codions\LaravelLivewireForms\Components\Select; class CreateClientForm extends FormComponent { public $gridClass = 'row'; public function fields() { return [ Row::make()->fields([ Input::make('name', 'Name') ->placeholder('Full Name'), Input::make('email', 'Email') ->type('email') ->placeholder('Email, example: user@example.com'), Select::make('gender', 'Gender') ->placeholder('Gender') ->options(['Male', 'Female']) ->addAttrs(['class' => 'd-block w-full']), Input::make('phone_no', 'Contact Number') ->placeholder('(xxx) xxx xxxxx'), Input::make('street_address', 'Street Address'), Input::make('city', 'City'), Input::make('state', 'State / Parist'), Input::make('country', 'Country'), ]) ]; } public function buttons() { return [ Button::make('Cancel', 'secondary')->url(route('team.index')), Button::make()->click('submit'), ]; } }
Credits
- This project is a modified version of bastinald/laravel-livewire-forms, created as a fork with additional changes.
License
Laravel Themes Manager is open-sourced software licensed under the MIT license.