A set of Blade components to rapidly build forms with Tailwind CSS v1, Tailwind CSS v2, Bootstrap 4 and Bootstrap 5.

  • By Protone Media
  • Last update: Dec 28, 2022
  • Comments: 16

Laravel Form Components

Latest Version on Packagist Build Status Total Downloads Buy us a tree

A set of Blade components to rapidly build forms with Tailwind CSS v1, Tailwind CSS v2, Bootstrap 4 and Bootstrap 5. Supports validation, model binding, default values, translations, includes default vendor styling and fully customizable!

Launcher ๐Ÿš€

Hey! We've built a Docker-based deployment tool to launch apps and sites fully containerized. You can find all features and the roadmap on our website, and we are on Twitter as well!

Features

๐Ÿ“บ Want to see this package in action? Join the live stream on November 19 at 14:00 CET: https://youtu.be/7eNZS4U7xyM

Looking for Inertia/Vue.js support? Check out Form Components Pro

Requirements

  • PHP 7.4 or higher
  • Laravel 8.0

Support

We proudly support the community by developing Laravel packages and giving them away for free. Keeping track of issues and pull requests takes time, but we're happy to help! If this package saves you time or if you're relying on it professionally, please consider supporting the maintenance and development.

Installation

You can install the package via composer:

composer require protonemedia/laravel-form-components

If you're using Tailwind, make sure the right plugin (v1 or v2) is installed and configured.

Quick example

@endbind ">
<x-form>
    @bind($user)
        <x-form-input name="last_name" label="Last Name" />
        <x-form-select name="country_code" :options="$options" />
        <x-form-select name="interests[]" :options="$multiOptions" label="Select your interests" multiple />

        
        <x-form-textarea name="biography" language="nl" placeholder="Dutch Biography" />
        <x-form-textarea name="biography" language="en" placeholder="English Biography" />

        
        <x-form-group name="newsletter_frequency" label="Newsletter frequency" inline>
            <x-form-radio name="newsletter_frequency" value="daily" label="Daily" />
            <x-form-radio name="newsletter_frequency" value="weekly" label="Weekly" />
        x-form-group>

        <x-form-group>
            <x-form-checkbox name="subscribe_to_newsletter" label="Subscribe to newsletter" />
            <x-form-checkbox name="agree_terms" label="Agree with terms" />
        x-form-group>

        <x-form-submit />
    @endbind
x-form>

Quick example form

Preface

Generating HTML in PHP is always quite opinionated and limited. Blade Components are great because additional attributes are passed down to the element. That's why we prefer writing forms using components instead of using PHP builders. This way, you don't have to write extensions or custom code for any attribute you pass in. Let's take a look at this x-form example.

The action attribute is optional, but you can pass a hard-coded, primitive value to the component using a simple HTML attribute. PHP expressions and variables can be passed to the component as well via attributes that use the : character as a prefix. Do you need Alpine.js or VueJS directives? No problem!

">
<x-form action="/api/user">
    
x-form>
">
<x-form :action="route('api.user.store')" v-on:submit="checkForm">
    
x-form>

Configuration

You can switch frameworks by updating the framework setting in the form-components.php configuration file. Check out the customization section on publishing the configuration and view files.

return [
    'framework' => 'bootstrap-4',
];

No further configuration is needed unless you want to customize the Blade views and components.

Usage

Input and textarea elements

The minimum requirement for an input or textarea is the name attribute.

">
<x-form-input name="company_name" />

Optionally you can add a label attribute, which can be computed as well.

">
<x-form-input name="company_name" label="Company name" />
<x-form-input name="company_name" :label="trans('forms.company_name')" />

You can also choose to use a placeholder instead of a label, and of course you can change the type of the element.

">
<x-form-input type="email" name="current_email" placeholder="Current email address" />

By default, every element shows validation errors, but you can hide them if you want.

">
<x-form-textarea name="description" :show-errors="false" />

Default value and binds

You can use the default attribute to specify the default value of the element.

">
<x-form-textarea name="motivation" default="I want to use this package because..." />

Binding a target

Instead of setting a default value, you can also pass in a target, like an Eloquent model. Now the component will get the value from the target by the name.

">
<x-form-textarea name="description" :bind="$video" />

In the example above, where $video is an Eloquent model, the default value will be $video->description.

Date Casting

If you use Eloquent's Date Casting feature, you can use the date attributes in your forms by setting the use_eloquent_date_casting configuration key to true. For compatibility reasons, this is disabled by default.

return [
    'use_eloquent_date_casting' => true,
];

You can either use the dates property or the casts property in your Eloquent model to specify date attributes:

class ActivityModel extends Model
{
    public $dates = ['finished_at'];

    public $casts = [
        'started_at'   => 'date',
        'failed_at'    => 'datetime',
        'completed_at' => 'date:d-m-Y',
        'skipped_at'   => 'datetime:Y-m-d H:i',
    ];
}
">
<x-form-input name="completed_at" :bind="$activity" />

In the example above, the default value will be formatted like 31-10-2021.

Binding a target to multiple elements

You can also bind a target by using the @bind directive. This will bind the target to all elements until the @endbind directive.

@endbind ">
<x-form>
    @bind($video)
        <x-form-input name="title" label="Title" />
        <x-form-textarea name="description" label="Description" />
    @endbind
x-form>

You can even mix targets!

@bind($userProfile) @endbind @endbind ">
<x-form>
    @bind($user)
        <x-form-input name="full_name" label="Full name" />

        @bind($userProfile)
            <x-form-textarea name="biography" label="Biography" />
        @endbind

        <x-form-input name="email" label="Email address" />
    @endbind
x-form>

Override or remove a binding

You can override the @bind directive by passing a target directly to the element using the :bind attribute. If you want to remove a binding for a specific element, pass in false.

@endbind ">
<x-form>
    @bind($video)
        <x-form-input name="title" label="Title" />
        <x-form-input :bind="$videoDetails" name="subtitle" label="Subtitle" />
        <x-form-textarea :bind="false" name="description" label="Description" />
    @endbind
x-form>

Laravel Livewire

You can use the @wire and @endwire directives to bind a form to a Livewire component. Let's take a look at the ContactForm example from the official Livewire documentation.

use Livewire\Component;

class ContactForm extends Component
{
    public $name;
    public $email;

    public function submit()
    {
        $this->validate([
            'name' => 'required|min:6',
            'email' => 'required|email',
        ]);

        Contact::create([
            'name' => $this->name,
            'email' => $this->email,
        ]);
    }

    public function render()
    {
        return view('livewire.contact-form');
    }
}

Normally you would use a wire:model attribute to bind a component property with a form element. By using the @wire directive, this package will automatically use the wire:model attribute instead of the name attribute.

@wire @endwire Save Contact ">
<x-form wire:submit.prevent="submit">
    @wire
        <x-form-input name="name" />
        <x-form-input name="email" />
    @endwire

    <x-form-submit>Save Contactx-form-submit>
x-form>

Additionally, you can pass an optional modifier to the @wire directive. This feature was added in v2.4.0. If you're upgrading from a previous version and you published the Blade views, you should republish them or update them manually.

@wire('debounce.500ms') @endwire ">
<x-form wire:submit.prevent="submit">
    @wire('debounce.500ms')
        <x-form-input name="email" />
    @endwire
x-form>

Select elements

Besides the name attribute, the select element has a required options attribute, which should be a simple key-value array.

$countries = [
    'be' => 'Belgium',
    'nl' => 'The Netherlands',
];
">
<x-form-select name="country_code" :options="$countries" />

You can provide a slot to the select element as well:

">
<x-form-select name="country_code">
   <option value="be">Belgiumoption>
   <option value="nl">The Netherlandsoption>
x-form-select>

If you want a select element where multiple options can be selected, add the multiple attribute to the element. If you specify a default, make sure it is an array. This applies to bound targets as well.

">
<x-form-select name="country_code[]" :options="$countries" multiple :default="['be', 'nl']" />

You may add a placeholder attribute to the select element. This will prepend a disabled option.

This feature was added in v3.2.0. If you're upgrading from a previous version and you published the Blade views, you should republish them or update them manually.

">
<x-form-select name="country_code" placeholder="Choose..." />

Rendered HTML:

Choose... ">
<select>
    <option value="" disabled>Choose...option>
    
select>

Using Eloquent relationships

This package has built-in support for BelongsToMany, MorphMany, and MorphToMany relationships. To utilize this feature, you must add both the multiple and many-relation attribute to the select element.

In the example below, you can attach one or more tags to the bound video. By using the many-relation attribute, it will correctly retrieve the selected options (attached tags) from the database.

@endbind ">
<x-form>
    @bind($video)
        <x-form-select name="tags[]" :options="$tags" multiple many-relation />
    @endbind
x-form>

Checkbox elements

Checkboxes have a default value of 1, but you can customize it as well.

">
<x-form-checkbox name="subscribe_to_newsletter" label="Subscribe to newsletter" />

If you have a fieldset of multiple checkboxes, you can group them together with the form-group component. This component has an optional label attribute and you can set the name as well. This is a great way to handle the validation of arrays. If you disable the errors on the individual checkboxes, it will one show the validation errors once. The form-group component has a show-errors attribute that defaults to true.

">
<x-form-group name="interests" label="Pick one or more interests">
    <x-form-checkbox name="interests[]" :show-errors="false" value="laravel" label="Laravel" />
    <x-form-checkbox name="interests[]" :show-errors="false" value="tailwindcss" label="Tailwind CSS" />
x-form-group>

Radio elements

Radio elements behave exactly the same as checkboxes, except the show-errors attribute defaults to false as you almost always want to wrap multiple radio elements in a form-group.

You can group checkbox and radio elements on the same horizontal row by adding an inline attribute to the form-group element.

">
<x-form-group name="notification_channel" label="How do you want to receive your notifications?" inline>
    <x-form-radio name="notification_channel" value="mail" label="Mail" />
    <x-form-radio name="notification_channel" value="slack" label="Slack" />
x-form-group>

When you're not using target binding, you can use the default attribute to mark a radio element as checked:

">
<x-form-group name="notification_channel" label="How do you want to receive your notifications?">
    <x-form-radio name="notification_channel" value="mail" label="Mail" default />
    <x-form-radio name="notification_channel" value="slack" label="Slack" />
x-form-group>

Old input data

When a validation errors occurs and Laravel redirects you back, the form will be re-populated with the old input data. This old data will override any binding or default value.

Handling translations

This package supports spatie/laravel-translatable out of the box. You can add a language attribute to your element.

">
<x-form-input name="title" language="en" :bind="$book" />

This will result in the following HTML:

">
<input name="title[en]" value="Laravel: Up & Running" />

To get the validation errors from the session, the name of the input will be mapped to a dot notation like title.en. This is how old input data is handled as well.

Customize the blade views

Publish the configuration file and Blade views with the following command:

php artisan vendor:publish --provider="ProtoneMedia\LaravelFormComponents\Support\ServiceProvider"

You can find the Blade views in the resources/views/vendor/form-components folder. Optionally, in the form-components.php configuration file, you can change the location of the Blade view per component.

Component logic

You can bind your own component classes to any of the elements. In the form-components.php configuration file, you can change the class per component. As the logic for the components is quite complex, it is strongly recommended to duplicate the default component as a starting point and start editing. You'll find the default component classes in the vendor/protonemedia/laravel-form-components/src/Components folder.

Prefix the components

You can define a prefix in the form-components.php configuration file.

return [
    'prefix' => 'tailwind',
];

Now all components can be referenced like so:

">
<x-tailwind-form>
    <x-tailwind-form-input name="company_name" />
x-tailwind-form>

Error messages

By the default, the errors messages are positioned under the element. To show these messages, we created a FormErrors component. You can manually use this component as well. The element takes an optional bag attribute to specify the ErrorBag, which defaults to default.

">
<x-form>
    <x-form-input name="company_name" :show-errors="false" />

    

    <x-form-errors name="company_name" />

    <x-form-errors name="company_name" bag="register" />
x-form>

Submit button

The label defaults to Submit, but you can use the slot to provide your own content.

Send ">
<x-form-submit>
    <span class="text-green-500">Sendspan>
x-form-submit>

Bootstrap

You can switch to Bootstrap 4 or Bootstrap 5 by updating the framework setting in the form-components.php configuration file.

return [
    'framework' => 'bootstrap-5',
];

There is a little of styling added to the form.blade.php view to add support for inline form groups. If you want to change it or remove it, publish the assets and update the view file.

Bootstrap 5 changes a lot regarding forms. If you migrate from 4 to 5, make sure to read the migration logs about forms.

Input group / prepend and append

In addition to the Tailwind features, with Bootstrap 4, there is also support for input groups. Use the prepend and append slots to provide the contents.

@slot('prepend') @ @endslot @slot('append') .protone.media @endslot ">
<x-form-input name="username" label="Username">
    @slot('prepend')
        <span>@span>
    @endslot
x-form-input>

<x-form-input name="subdomain" label="Subdomain">
    @slot('append')
        <span>.protone.mediaspan>
    @endslot
x-form-input>

With Bootstrap 5, the input groups have been simplified. You can add as many items as you would like in any order you would like. Use the form-input-group-text component to add text or checkboxes.

@ ">
<x-form-input-group label="Profile" >
    <x-form-input name="name" placeholder="Name" id="name" />
    <x-form-input-group-text>@x-form-input-group-text>
    <x-form-input name="nickname" placeholder="Nickname" id="nickname" />
    <x-form-submit />
x-form-input-group>

Floating labels

As of Bootstrap 5, you can add floating labels by adding the floating attribute to inputs, selects (excluding multiple), and textareas.

">
<x-form-input label="Floating Label" name="float_me" id="float_me" floating />

Help text

You can add block-level help text to any element by using the help slot.

@slot('help') Your username must be 8-20 characters long. @endslot ">
<x-form-input name="username" label="Username">
    @slot('help')
        <small class="form-text text-muted">
            Your username must be 8-20 characters long.
        small>
    @endslot
x-form-input>

Testing

composer test

Changelog

Please see CHANGELOG for more information about what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Other Laravel packages

  • Laravel Analytics Event Tracking: Laravel package to easily send events to Google Analytics.
  • Laravel Blade On Demand: Laravel package to compile Blade templates in memory.
  • Laravel Cross Eloquent Search: Laravel package to search through multiple Eloquent models.
  • Laravel Eloquent Scope as Select: Stop duplicating your Eloquent query scopes and constraints in PHP. This package lets you re-use your query scopes and constraints by adding them as a subquery.
  • Laravel Eloquent Where Not: This Laravel package allows you to flip/invert an Eloquent scope, or really any query constraint.
  • Laravel FFMpeg: This package provides an integration with FFmpeg for Laravel. The storage of the files is handled by Laravel's Filesystem.
  • Laravel Paddle: Paddle.com API integration for Laravel with support for webhooks/events.
  • Laravel Verify New Email: This package adds support for verifying new email addresses: when a user updates its email address, it won't replace the old one until the new one is verified.
  • Laravel WebDAV: WebDAV driver for Laravel's Filesystem.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

Credits

License

The MIT License (MIT). Please see License File for more information.

Treeware

This package is Treeware. If you use it in production, then we ask that you buy the world a tree to thank us for our work. By contributing to the Treeware forest youโ€™ll be creating employment for local families and restoring wildlife habitats.

Github

https://github.com/pascalbaljetmedia/laravel-form-components

Comments(16)

  • 1

    Form group with radio is causing all radio buttons having checked attribute

    We're using <x-form-group> with a couple of <x-form-radio> elements inside. When a value is selected and the form reloads due to validation errors, all radio elements have the checked='checked' attribute.

    image

    I think this is due to the fact that <x-form-radio> component is using a class which extends FormCheckbox and because of the presence of this line: https://github.com/protonemedia/laravel-form-components/blob/master/src/Components/FormCheckbox.php#L33

    It could be fixed by changing FormRadio.php to the following:

    <?php
    
    namespace ProtoneMedia\LaravelFormComponents\Components;
    
    class FormRadio extends Component
    {
        use HandlesValidationErrors;
        use HandlesBoundValues;
    
        public string $name;
        public string $label;
        public $value;
        public bool $checked = false;
    
        /**
         * Create a new component instance.
         *
         * @return void
         */
        public function __construct(
            string $name,
            string $label = '',
            $value = 1,
            $bind = null,
            bool $default = false,
            bool $showErrors = true
        ) {
            $this->name       = $name;
            $this->label      = $label;
            $this->value      = $value;
            $this->showErrors = $showErrors;
    
            if (old($name) == $value) { <== CHANGE
                $this->checked = true;
            }
    
            if (!session()->hasOldInput() && $this->isNotWired()) {
                $boundValue = $this->getBoundValue($bind, $name);
    
                $this->checked = is_null($boundValue) ? $default : $boundValue == $value; <== CHANGE
            }
        }
    }
    
  • 2

    Support for Bootstrap v5

    Bootstrap 5 is out of beta and has some real improvements for forms.

    Hereby the bootstrap 5 version of laravel-form-components including floating labels.

    image

    With bootstrap 5 form-group has been removed. It's still a component because it can be used for inline radio's and check boxes with validation.

    prepend and append are also removed. This is replaced by input-group and can contain basically anything (just text, but also buttons and radio's).

    Read more here: Bootstrap 5 migration: Forms

    This has also been covered in the readme.

    Closes: #50

  • 3

    select options with integers as keys breaks the form on user errors

    For this issue I copied the example from the readme:

    <x-form-select name="country_code">
       <option value="be">Belgium</option>
       <option value="nl">The Netherlands</option>
    </x-form-select>
    

    suppose that we generated the above options with a $options array. This will work:

    $options = ['be' => 'Belgium', 'nl' => 'The Netherlands'];
    <x-form-select name="country_code" :options="$options">
    

    But the following will not work correctly:

    $options = ['Belgium','The Netherlands'];
    <x-form-select name="country_code" :options="$options">
    

    The above will generate this HTML:

    <select name="country_code">
                                <option value="0">
                        Belgium
                    </option>
                                <option value="1">
                        The Netherlands
                    </option>
                        </select>
    

    This will not correctly bind the old values of the form when the user made an error. The form will be reloaded with the error messages in it but without the selected item from the select list. The reason for this lies in the file src/Components/FormSelect.php on line 51: if ($this->selectedKey === $key) { this will return false every time because $this->selectedKey is a string and $key is an integer. Is it possible to change the === to ==? The example with the country_code does not make much sense at first. But if I want to generate the form options from an eloquent relation (and other data than country codes), I have exactly this problem. The ID of the foreign key is an int and the above mentioned if will never return true.

  • 4

    select multiple does not handle selected attribute

    Hello,

    When I do this :

    @bind($model)
    <x-form-select
      multiple
      name="categories[]"
      :options="App\Models\Categories::options()"
    />
    @endbind($model)
    

    Categories are saved, but they are not selected on page reload : no selected attribute on the <option> tags ,

    am I doing it wrong ?

    BTW this is my App\Models\Categories::options() :

    [
       1 => "Justice",
       2 => "Culture",
       3 => "Agriculture"
    ]
    
  • 5

    Unable to locate a class or view for component [form.form-input]

    Maybe I'm missing something obvious here, but I've installed the package and I'm still getting errors trying to load any component, e.g.Unable to locate a class or view for component [form.form-input].

    I thought perhaps it wasn't registering properly so I tried adding the Service Provider in app.config, but that made no difference.

  • 6

    FormCheckbox old value

    image

    ProtoneMedia\LaravelFormComponents\Components\FormCheckbox. Starts on line 45 ... if (is_array($boundValue)) { $this->checked = in_array($value, $boundValue); return; } ... What about collection support?

  • 7

    Livewire support

    Thanks for this library, saves me a lot of time.

    I noticed when I'm using Livewire the errors don't show. It's because in Livewire the errors are not in the session, so this line always returns an empty bag.

    I also noticed that the check for hasError is not that usefull because in the layouts it's always wrapped in the @error directive. Like form-errors.blade.php

    Maybe just get rid of the hasError part and just use the showError, it should be compatible with Livewire that way and you don't double check for errors.

    What's your opinion on this?

  • 8

    Radio inputs - Non-string values considered false are not bound (in edit view or after wrong validation)

    Hi,

    I have boolean field create_role (0 or 1) from my database that I've bound to a radio input :

    @bind($user)
           <x-form-group class="ms-3" label="Is this user able to create new articles?" inline>
               <x-form-radio name="create_article" value="0" label="no" default/>
               <x-form-radio name="create_article" value="1" label="yes"/>
           </x-form-group>
    @endbind
    

    But if I edit or update with a wrong validation another field, value 0 (false is the same) is not bound. Its because of the comparison in the ProtoneMedia\LaravelFormComponents\Components\FormRadio.php file at line 31 and line 38

    Is there any simple way you use to fix that problem? I've already fixed it by my own but not sure its the better one...

    I have modified the same file as before like this :

    <?php
    
    namespace ProtoneMedia\LaravelFormComponents\Components;
    
    class FormRadio extends Component
    {
        use HandlesValidationErrors;
        use HandlesBoundValues;
    
        public string $name;
        public string $label;
        public $value;
        public bool $checked = false;
    
        public function __construct(
            string $name,
            string $label = '',
            $value = 1,
            $bind = null,
            bool $default = false,
            bool $showErrors = false
        ) {
            $this->name       = $name;
            $this->label      = $label;
            $this->value      = $value;
            $this->showErrors = $showErrors;
    
            $inputName = static::convertBracketsToDots($name);
    
            //modified line
            if (!is_null(old($inputName))) {
                //modified line
                $this->checked = $this->toStringIfFalse(old($inputName)) == $value;
            }
    
            if (!session()->hasOldInput() && $this->isNotWired()) {
                $boundValue = $this->getBoundValue($bind, $name);
    
                if (!is_null($boundValue)) {
                    //modified line
                    $this->checked = $this->toStringIfFalse($boundValue) == $this->value;
                } else {
                    $this->checked = $default;
                }
            }
        }
    
        /**
         * Generates an ID by the name and value attributes.
         *
         * @return string
         */
        protected function generateIdByName(): string
        {
            return "auto_id_" . $this->name . "_" . $this->value;
        }
    
        /**
         * All of the non-string boolean values considered false are casted to string
         * so that it can be correctly compared with the input radio value
         * (string values considered false like "0" or "" are already correctly compared)
         * 
         * @return string
         */
        protected function toStringIfFalse($value)
        {
            if($value === false ||
               $value === 0 ||
               $value === 0.0 ||//im not sure this one
               $value === -0.0 // and this one will find concrete cases...
            ){
                return var_export($value, true);
            }
            return $value;
        }
    }
    
    
  • 9

    Checkboxes and Radios broken after 2.5.1

    After 2.5.1, it seems that Checkboxes and Radio buttons are broken when used in a Grouped setting. This is because the ID was previously being dynamically generated which was replaced to simply use the name attribute.

    As the id attribute is the same for multiple inputs targeting the same option, the value will not change between different options.

    Please see attached screenshot comparing this with 2.5.1 and 2.1.1:

    2.5.1 (broken): image

    2.1.1 (working): image

  • 10

    help text in attribute

    Hi, I was wondering if it could be possible to pass help text directly through an attribute like any other parameters ? something like this :

    <x-form-input
      name="name"
      label="Name"
      help="Your name will not be visible"
    />
    

    Thanks !!

  • 11

    Can't use x-form-select using query

    I'm using livewire query to get options for select, for example, I have this in my blade:

           <x-form-select
                       name="area_group[]"
                       :options="$area_group" />
    

    and in my livewire this:

    public
            $area_group;
    
        public function mount()
        {
            $this->area_group = AreaGroup::query()->select('id', 'name')->get();
        }
    

    but the result on the view is a select options in json

    <option value="0">
                        {"id":1,"name":"\u30cf\u30ef\u30a4"}
                    </option>
    

    And I want to get that ID as value and name as option, how can I solve it?

  • 12

    "Unable to locate class or view [{$alias}] for component [{$component}]."

    when my installation was done after that iam trying to give "Unable to locate class or view [{$alias}] for component [{$component}]." this error was displaying

  • 13

    Output sub-item form-errors messages when they exist

    When validating an array Laravel lets us validate array items using the fieldname.* syntax which can result in the error bag containing messages which are returned as fieldname.<array_index>.

    These are not output at the moment, this PR is a simple fix to (recursively) output them if they exist.

    I've just extended the <x-form-errors> component to output them as their own messages, an enhancement might be to make them smarter or display in a more inline way..

    There were no existing tests for form-errors, so apologies for not adding one and starting those.

  • 14

    Checkbox Shows which are checked and then disappears

    Checked Box For Loop Code

    `

    @foreach ($permissions as $key => $value) @endforeach

    `

    Please Check the below Attachment for the clear look on issue Peek 2022-07-14 13-34

    Thanks in Advance..

  • 15

    Add missing .form-label classes in BS5 forms

    According to BS5 docs, form labels should contain .form-label class to be displayed correctly. Without it, the space between label and field is too small.

    Before: obraz

    After: obraz

  • 16

    Can I suggest a modification to x-form-submit

    Hello,

    I would like to make a suggestion for a modification to x-form-submit which I would create a pull request for but I am not sure how this will work in anything other than Bootstrap.

    If I have a form that has a file upload and I click submit (x-form-submit) before the file has finished uploading via livewire, the validation will fail as the file has not been uploaded.

    Can I suggest that x-form-submit has wire:loading.attr="disabled" by default?

    This will disable the submit button while livewire is processing.

    In my use case I have done the following:

    <x-form-input wire:model="cv" label="Upload Your CV *" type="file" name="cv" />
    <div wire:loading wire:target="cv">
        Please wait, file is uploading...
    </div>
    <x-form-submit wire:loading.attr="disabled">Submit</x-form-submit>
    

    I can not think of any instance where you would want someone to be able to click the submit button before livewire has finished updating the server.