Laravel Livewire form component with declarative Bootstrap 5 fields and buttons.
- Bootstrap 5
composer require bastinald/laravel-livewire-formsMake a new form:
php artisan make:form users.create-user-formDeclare 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('/');
}Create a full page form by specifying a title, layout and route to use:
class Login extends FormComponent
{
public $title = 'Login';
public $layout = 'layouts.card';
public function route()
{
return Route::get('/login', static::class)
->name('login')
->middleware('guest');
}
}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';
public function route()
{
return Route::get('/login', static::class)
->name('login')
->middleware('guest');
}
}The route method is made available by using my laravel-livewire-routes package.
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 route()
{
return Route::get('/users/update/{user}', static::class)
->name('users.update')
->middleware('auth');
}
public function mount(User $user)
{
$this->data = $user->toArray();
}
}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'),
]);
}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 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 sizingSome 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(),Specify helper text for a field by using the help method:
Input::make('name', 'Name')->help('Please tell us your name!'),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
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
A bootstrap support to the form.
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
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
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
An array of checkbox fields.
Checkboxes::make('colors', 'Colors')->options(['Red', 'Green', 'Blue']),Available methods: options, switch, help, instant, addAttrs, defer, lazy, debounce, disabled
A color picker field.
Color::make('hair_color', 'Hair Color'),Available methods: small, large, containerSize, help, instant, addAttrs, defer, lazy, debounce, disabled, readonly
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
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.
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
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
A radio field.
Radio::make('gender', 'Gender')->options(['Male', 'Female']),Available methods: options, switch, help, instant, addAttrs, defer, lazy, debounce, disabled
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
A textarea field.
Input::make('bio', 'Biography'),
Input::make('bio', 'Biography')->rows(5),Available methods: small, large, containerSize, help, instant, addAttrs, defer, lazy, debounce, disabled, readonly, placeholder, rows
Used to render a custom Blade view inside the form.
View::make('custom-view', ['hello' => 'world']),namespace App\Http\Livewire\Clients;
use Bastinald\LaravelLivewireForms\Components\Button;
use Bastinald\LaravelLivewireForms\Components\FormComponent;
use Bastinald\LaravelLivewireForms\Components\Input;
use Bastinald\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: [email protected]'),
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'),
];
}
}
For more examples, read the example.md document.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent