View on GitLab

Forms

x-larastrap::form is one of the most complex (and useful) components in Larastrap. It plays well with Field components to provide a powerful tool to organize, populate and handle the forms of your Laravel application.

obj

As all other Containers, forms have an obj parameter which can be populated with an object (eventually: an Eloquent model). This parameter is inherited by all child input fields, which values are then inited with the proper attributes matched by their name.

When obj is null , all child inputs are left with their explicit value (if set at all).

Name

Surname

Bio

Must be a valid email address

Check

Country (as select)

Country (as radio)

France Germany Italy

Colors

Red Green Blue

@php

$obj = (object) ['id' => 1234, 'name' => 'Foo', 'surname' => 'Baz', 'bio' => 'A very smart guy!', 'email' => 'foo@bar.baz', 'country' => 'it', 'colors' => ['red', 'blue']];
$countries = ['fr' => 'France', 'de' => 'Germany', 'it' => 'Italy'];

@endphp

<x-larastrap::form :obj="$obj">
    <x-larastrap::hidden name="id" />
    <x-larastrap::number name="id" label="ID" disabled="true" />
    <x-larastrap::text name="name" label="Name" />
    <x-larastrap::text name="surname" label="Surname" value="Overwritten value (should be 'Baz')" />
    <x-larastrap::textarea name="bio" label="Bio" />
    <x-larastrap::email name="email" label="EMail" help="Must be a valid email address" />
    <x-larastrap::check name="check" label="Check" />

    <x-larastrap::select name="country" label="Country (as select)" :options="$countries" />
    <x-larastrap::radios name="country" label="Country (as radio)" :options="$countries" color="danger" />

    <x-larastrap::checks name="colors" label="Colors" :options="['red' => 'Red', 'green' => 'Green', 'blue' => 'Blue']" color="warning" />
</x-larastrap::form>

<form id="form-1a2cc12c" class="" method="post" name="form-1a2cc12c">
  <input type="hidden" name="_token" value="ViexPi6ieOEpKXiCuBRQTHb08UtrPoNJJzMCNuzf" autocomplete="off"> <input id="hidden-07cd7b4e" type="hidden" class="" name="id" value="1234">
  <div class="row mb-2">
    <label for="input-3304fe60" class="col-4 col-form-label">ID</label>
    <div class="col-8">
      <input id="input-3304fe60" type="number" class="form-control-plaintext" name="id" value="1234" disabled>
    </div>
  </div>
  <div class="row mb-2">
    <label for="input-92e8c578" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-92e8c578" type="text" class="form-control" name="name" value="Foo">
    </div>
  </div>
  <div class="row mb-2">
    <label for="input-3414d632" class="col-4 col-form-label">Surname</label>
    <div class="col-8">
      <input id="input-3414d632" type="text" class="form-control" name="surname" value="Overwritten value (should be 'Baz')">
    </div>
  </div>
  <div class="row mb-2">
    <label for="textarea-df9fb5e3" class="col-4 col-form-label">Bio</label>
    <div class="col-8">
      <textarea id="textarea-df9fb5e3" class="form-control" name="bio">A very smart guy!</textarea>
    </div>
  </div>
  <div class="row mb-2">
    <label for="input-1bdb1488" class="col-4 col-form-label">EMail</label>
    <div class="col-8">
      <input id="input-1bdb1488" type="email" class="form-control" name="email" value="foo@bar.baz" aria-describedby="help-input-1bdb1488">
      <div class="form-text" id="help-input-1bdb1488">
        Must be a valid email address
      </div>
    </div>
  </div>
  <div class="row mb-2">
    <label for="check-1927ed71" class="col-4 col-form-label">Check</label>
    <div class="col-8">
      <div class="form-check mt-1">
        <input id="check-1927ed71" type="checkbox" class="form-check-input" name="check">
      </div>
    </div>
  </div>
  <div class="row mb-2">
    <label for="select-47c4e07d" class="col-4 col-form-label">Country (as select)</label>
    <div class="col-8">
      <select id="select-47c4e07d" class="form-select" name="country">
        <option value="fr">
          France
        </option>
        <option value="de">
          Germany
        </option>
        <option value="it" selected>
          Italy
        </option>
      </select>
    </div>
  </div>
  <div class="row mb-2">
    <label for="radios-0d4e6337" class="col-4 col-form-label">Country (as radio)</label>
    <div class="col-8">
      <div id="radios-0d4e6337" class="btn-group" role="group">
        <input type="radio" class="btn-check" id="radios-0d4e6337-0309a6c666a7a803fdb9db95de71cf01" name="country" value="fr" autocomplete="off"> <label class="btn btn-danger" for="radios-0d4e6337-0309a6c666a7a803fdb9db95de71cf01">France</label> <input type="radio" class="btn-check" id="radios-0d4e6337-d8b00929dec65d422303256336ada04f" name="country" value="de" autocomplete="off"> <label class="btn btn-danger" for="radios-0d4e6337-d8b00929dec65d422303256336ada04f">Germany</label> <input type="radio" class="btn-check" id="radios-0d4e6337-1007e1b7f894dfbf72a0eaa80f3bc57e" name="country" value="it" autocomplete="off" checked> <label class="btn btn-danger" for="radios-0d4e6337-1007e1b7f894dfbf72a0eaa80f3bc57e">Italy</label>
      </div>
    </div>
  </div>
  <div class="row mb-2">
    <label for="checks-4e1ba987" class="col-4 col-form-label">Colors</label>
    <div class="col-8">
      <div id="checks-4e1ba987" class="btn-group" role="group">
        <input type="checkbox" class="btn-check" id="checks-4e1ba987-ee38e4d5dd68c4e440825018d549cb47" name="colors[]" value="red" autocomplete="off" checked> <label class="btn btn-warning" for="checks-4e1ba987-ee38e4d5dd68c4e440825018d549cb47">Red</label> <input type="checkbox" class="btn-check" id="checks-4e1ba987-d382816a3cbeed082c9e216e7392eed1" name="colors[]" value="green" autocomplete="off"> <label class="btn btn-warning" for="checks-4e1ba987-d382816a3cbeed082c9e216e7392eed1">Green</label> <input type="checkbox" class="btn-check" id="checks-4e1ba987-9594eec95be70e7b1710f730fdda33d9" name="colors[]" value="blue" autocomplete="off" checked> <label class="btn btn-warning" for="checks-4e1ba987-9594eec95be70e7b1710f730fdda33d9">Blue</label>
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-81206238" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

When using obj , note that the name of the children Fields can be expressed in "dot notation" to access arrays casted by the Eloquent model or, anyway, the keys of the used associative array.

@php

/*

class User
{
    protected $casts = [
        'attributes' => 'array',
    ];
}

*/

$user = App\Models\User::inRandomOrder()->first();

$arbitrary = (object) [
    'name' => 'John Doe',
    'attributes' => [
        'external_id' => '1234567890',
    ]
];

@endphp

<x-larastrap::form :obj="$user">
    <div class="alert alert-info">
        Example with Eloquent model
    </div>

    <x-larastrap::text name="name" label="Name" />
    <x-larastrap::text name="attributes.external_id" label="External ID" />
</x-larastrap::form>

<hr>

<x-larastrap::form :obj="$arbitrary">
    <div class="alert alert-info">
        Example with plain object
    </div>

    <x-larastrap::text name="name" label="Name" />
    <x-larastrap::text name="attributes.external_id" label="External ID" />
</x-larastrap::form>

<form id="form-dc16bec8" class="" method="post" name="form-dc16bec8">
  <input type="hidden" name="_token" value="ViexPi6ieOEpKXiCuBRQTHb08UtrPoNJJzMCNuzf" autocomplete="off">
  <div class="alert alert-info">
    Example with Eloquent model
  </div>
  <div class="row mb-2">
    <label for="input-c7a281e1" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-c7a281e1" type="text" class="form-control" name="name" value="Gerard McGlynn">
    </div>
  </div>
  <div class="row mb-2">
    <label for="input-e114d399" class="col-4 col-form-label">External ID</label>
    <div class="col-8">
      <input id="input-e114d399" type="text" class="form-control" name="attributes[external_id]" value="fLdO0fA19S">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-f32f164f" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>
<hr>
<form id="form-2e8f5648" class="" method="post" name="form-2e8f5648">
  <input type="hidden" name="_token" value="ViexPi6ieOEpKXiCuBRQTHb08UtrPoNJJzMCNuzf" autocomplete="off">
  <div class="alert alert-info">
    Example with plain object
  </div>
  <div class="row mb-2">
    <label for="input-08da1841" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-08da1841" type="text" class="form-control" name="name" value="John Doe">
    </div>
  </div>
  <div class="row mb-2">
    <label for="input-2e6c4a39" class="col-4 col-form-label">External ID</label>
    <div class="col-8">
      <input id="input-2e6c4a39" type="text" class="form-control" name="attributes[external_id]" value="1234567890">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-7114403f" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

action / method

action and method parameters are equivalent to the classic HTML attributes for forms. But you can specify once a default method in your configuration file (by default it is POST ).

Any method different than POST or GET translates to @method('XYZ'), as supported by Laravel.

<x-larastrap::form method="DELETE" :buttons="[['label' => 'Delete!', 'color' => 'danger', 'type' => 'submit']]">
    <div class="alert alert-danger">This is a delete form!</div>
</x-larastrap::form>

<form id="form-cea29a3a" class="" method="post" name="form-cea29a3a">
  <input type="hidden" name="_token" value="ViexPi6ieOEpKXiCuBRQTHb08UtrPoNJJzMCNuzf" autocomplete="off"> <input type="hidden" name="_method" value="DELETE">
  <div class="alert alert-danger">
    This is a delete form!
  </div>
  <div class="col-12 text-end">
    <button id="button-c16eba4e" class="btn btn-danger">Delete!</button>
  </div>
</form>

route

A convenient shortcut for action is route , where you specify just the name of the intended route which doesn't require addictional parameters.

<x-larastrap::form route="user.store">
    <x-larastrap::text name="name" label="Name" />
    <x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>

<form id="form-1a9a9552" class="" method="post" action="https://larastrap.madbob.org/user" name="form-1a9a9552">
  <input type="hidden" name="_token" value="ViexPi6ieOEpKXiCuBRQTHb08UtrPoNJJzMCNuzf" autocomplete="off">
  <div class="row mb-2">
    <label for="input-de747734" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-de747734" type="text" class="form-control" name="name" value="">
    </div>
  </div>
  <div class="row mb-2">
    <label for="input-04881272" class="col-4 col-form-label">EMail</label>
    <div class="col-8">
      <input id="input-04881272" type="email" class="form-control" name="email" value="">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-d49a90f4" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

baseaction

A bit more articulated is baseaction : this is intended to be the prefix of a Laravel's Resource Controller.

In the following example, when obj is set to NULL it is assigned as action the value route('user.store'); otherwise, if obj is a valid object, it will become route('user.update', $obj->id). This is handy to have a single edit form to both create and update the same kind of model.

Of course, when in update mode, the proper PUT method is used.

<x-larastrap::form :obj="null" baseaction="user">
    <div class="alert alert-info">
        This form creates a new model.
    </div>

    <x-larastrap::text name="name" label="Name" />
    <x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>

<br>

@php

$obj = (object) [
    'id' => 123,
    'name' => 'Foo Bar',
    'email' => 'foobar@example.com',
];

@endphp

<x-larastrap::form :obj="$obj" baseaction="user">
    <div class="alert alert-info">
        This form updates the existing model.
    </div>

    <x-larastrap::text name="name" label="Name" />
    <x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>

<form id="form-9601b797" class="" method="post" action="https://larastrap.madbob.org/user" name="form-9601b797">
  <input type="hidden" name="_token" value="ViexPi6ieOEpKXiCuBRQTHb08UtrPoNJJzMCNuzf" autocomplete="off">
  <div class="alert alert-info">
    This form creates a new model.
  </div>
  <div class="row mb-2">
    <label for="input-c61e5daf" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-c61e5daf" type="text" class="form-control" name="name" value="">
    </div>
  </div>
  <div class="row mb-2">
    <label for="input-a3381fb9" class="col-4 col-form-label">EMail</label>
    <div class="col-8">
      <input id="input-a3381fb9" type="email" class="form-control" name="email" value="">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-f9f3c5f0" class="btn btn-primary" type="submit">Save</button>
  </div>
</form><br>
<form id="form-29db90c7" class="" method="post" action="https://larastrap.madbob.org/user/123" name="form-29db90c7">
  <input type="hidden" name="_token" value="ViexPi6ieOEpKXiCuBRQTHb08UtrPoNJJzMCNuzf" autocomplete="off"> <input type="hidden" name="_method" value="PUT">
  <div class="alert alert-info">
    This form updates the existing model.
  </div>
  <div class="row mb-2">
    <label for="input-c0bc87e4" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-c0bc87e4" type="text" class="form-control" name="name" value="Foo Bar">
    </div>
  </div>
  <div class="row mb-2">
    <label for="input-9099ba6d" class="col-4 col-form-label">EMail</label>
    <div class="col-8">
      <input id="input-9099ba6d" type="email" class="form-control" name="email" value="foobar@example.com">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-fca56401" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

buttons

The form's buttons (notably: the submit button) are generally not included within the x-larastrap::form node but are defined using the buttons parameter, which has to be an array of arrays, each rappresenting a button and with the parameters for the relevant x-larastrap::button.

<x-larastrap::form :buttons="[['color' => 'success', 'label' => 'Submit', 'attributes' => ['type' => 'submit']], ['color' => 'danger', 'label' => 'Reset', 'attributes' => ['type' => 'reset']]]">
    <x-larastrap::text name="firstname" label="First Name" />
    <x-larastrap::text name="lastname" label="Last Name" />
    <x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>

<form id="form-f0a48843" class="" method="post" name="form-f0a48843">
  <input type="hidden" name="_token" value="ViexPi6ieOEpKXiCuBRQTHb08UtrPoNJJzMCNuzf" autocomplete="off">
  <div class="row mb-2">
    <label for="input-331cd633" class="col-4 col-form-label">First Name</label>
    <div class="col-8">
      <input id="input-331cd633" type="text" class="form-control" name="firstname" value="">
    </div>
  </div>
  <div class="row mb-2">
    <label for="input-37e2e366" class="col-4 col-form-label">Last Name</label>
    <div class="col-8">
      <input id="input-37e2e366" type="text" class="form-control" name="lastname" value="">
    </div>
  </div>
  <div class="row mb-2">
    <label for="input-9b9860d0" class="col-4 col-form-label">EMail</label>
    <div class="col-8">
      <input id="input-9b9860d0" type="email" class="form-control" name="email" value="">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-2eac372a" class="btn btn-success" type="submit">Submit</button> <button id="button-e4841bc3" class="btn btn-danger" type="reset">Reset</button>
  </div>
</form>

A peculiar parameter which can be used for those buttons is element , that permits to use a different node type for the element. By default it is of course larastrap::button , but can be any other Blade's Component identifier (remember to prefix Larastrap's widgets with larastrap:: ).

@php

$buttons = [
    ['element' => 'larastrap::link', 'label' => 'This is a Link', 'href' => 'https://larastrap.madbob.org/'],
    ['color' => 'success', 'label' => 'Submit', 'attributes' => ['type' => 'submit']]
];

@endphp

<x-larastrap::form :buttons="$buttons">
    <x-larastrap::text name="firstname" label="First Name" />
    <x-larastrap::text name="lastname" label="Last Name" />
    <x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>

<form id="form-e210acb1" class="" method="post" name="form-e210acb1">
  <input type="hidden" name="_token" value="ViexPi6ieOEpKXiCuBRQTHb08UtrPoNJJzMCNuzf" autocomplete="off">
  <div class="row mb-2">
    <label for="input-4641e8b4" class="col-4 col-form-label">First Name</label>
    <div class="col-8">
      <input id="input-4641e8b4" type="text" class="form-control" name="firstname" value="">
    </div>
  </div>
  <div class="row mb-2">
    <label for="input-511d4596" class="col-4 col-form-label">Last Name</label>
    <div class="col-8">
      <input id="input-511d4596" type="text" class="form-control" name="lastname" value="">
    </div>
  </div>
  <div class="row mb-2">
    <label for="input-511f7907" class="col-4 col-form-label">EMail</label>
    <div class="col-8">
      <input id="input-511f7907" type="email" class="form-control" name="email" value="">
    </div>
  </div>
  <div class="col-12 text-end">
    <a id="link-7761ad65" class="btn btn-primary" href="https://larastrap.madbob.org/">This is a Link</a> <button id="button-a99a8aae" class="btn btn-success" type="submit">Submit</button>
  </div>
</form>

Leveraging the Typography widget, you are actually able to append in the Form's footer any kind of text. Even better: any kind of text generated from the contextual obj .

@php

$user = App\Models\User::inRandomOrder()->first();

$buttons = [
    ['element' => 'larastrap::t', 'node' => 'small', 'name' => 'updated_at', 'prelabel' => 'Last update: ', 'classes' => ['float-start']],
    ['color' => 'success', 'label' => 'Submit', 'attributes' => ['type' => 'submit']]
];

@endphp

<x-larastrap::form :buttons="$buttons" :obj="$user">
    <x-larastrap::text name="name" label="Name" />
    <x-larastrap::email name="email" label="EMail" />
    <hr>
</x-larastrap::form>

<form id="form-2578502d" class="" method="post" name="form-2578502d">
  <input type="hidden" name="_token" value="ViexPi6ieOEpKXiCuBRQTHb08UtrPoNJJzMCNuzf" autocomplete="off">
  <div class="row mb-2">
    <label for="input-cbd77540" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-cbd77540" type="text" class="form-control" name="name" value="Jules Wunsch">
    </div>
  </div>
  <div class="row mb-2">
    <label for="input-6992f6e7" class="col-4 col-form-label">EMail</label>
    <div class="col-8">
      <input id="input-6992f6e7" type="email" class="form-control" name="email" value="daniel.arlie@example.net">
    </div>
  </div>
  <hr>
  <div class="col-12 text-end">
    <small id="basenode-1afe4c11" class="float-start">Last update:</small> <button id="button-f8d8547c" class="btn btn-success" type="submit">Submit</button>
  </div>
</form>

buttons_align

The buttons_align parameter permit to define where to put buttons within the form: by default their are aligned to end , but can also be at start or center .

<x-larastrap::form formview="vertical" buttons_align="start">
    <x-larastrap::text name="firstname" label="First Name" />
    <x-larastrap::text name="lastname" label="Last Name" />
    <x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>

<form id="form-79461503" class="" method="post" name="form-79461503">
  <input type="hidden" name="_token" value="ViexPi6ieOEpKXiCuBRQTHb08UtrPoNJJzMCNuzf" autocomplete="off">
  <div class="mb-2">
    <label for="input-69d57d18" class="form-label">First Name</label> <input id="input-69d57d18" type="text" class="form-control" name="firstname" value="">
  </div>
  <div class="mb-2">
    <label for="input-b9134725" class="form-label">Last Name</label> <input id="input-b9134725" type="text" class="form-control" name="lastname" value="">
  </div>
  <div class="mb-2">
    <label for="input-33c8237b" class="form-label">EMail</label> <input id="input-33c8237b" type="email" class="form-control" name="email" value="">
  </div>
  <div class="col-12 text-start">
    <button id="button-c4e0a46b" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

formview

It is possible to organize the layout of the Form in multiple ways, using the formview parameter. horizontal is the default value and behavior, but it is possible to opt for inline ; it this case, please note that labels are converted in placeholders to accomodate into the row.

<x-larastrap::form formview="inline">
    <x-larastrap::text name="firstname" label="First Name" />
    <x-larastrap::text name="lastname" label="Last Name" />
</x-larastrap::form>

<form id="form-7850a986" class="row row-cols-lg-auto g-3 align-items-center" method="post" name="form-7850a986">
  <input type="hidden" name="_token" value="ViexPi6ieOEpKXiCuBRQTHb08UtrPoNJJzMCNuzf" autocomplete="off">
  <div class="col-auto">
    <input id="input-b3d1563d" type="text" class="form-control" name="firstname" value="" placeholder="First Name">
  </div>
  <div class="col-auto">
    <input id="input-917cef03" type="text" class="form-control" name="lastname" value="" placeholder="Last Name">
  </div>
  <div class="col-12 text-end">
    <button id="button-2b159b52" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

Similar, but not equal, is the squeeze alternative, which enforces the same named attribute on all children Fields and, as a conseguence, will omit the wrapping markup for each input element.

This is in particular suggested when your form is mostly formatted into a table, and you want to omit explicit label for each single field.

<x-larastrap::form formview="squeeze">
    <table class="table">
        <tbody>
            @foreach(App\Models\User::take(3)->get() as $user)
                <x-larastrap::enclose :obj="$user">
                    <tr>
                        <td>
                            <x-larastrap::text name="name" />
                        </td>
                        <td>
                            <x-larastrap::text name="email" />
                        </td>
                    </tr>
                </x-larastrap::enclose>
            @endforeach
        </tbody>
    </table>
</x-larastrap::form>

<form id="form-4d53d619" class="" method="post" name="form-4d53d619">
  <input type="hidden" name="_token" value="ViexPi6ieOEpKXiCuBRQTHb08UtrPoNJJzMCNuzf" autocomplete="off">
  <table class="table">
    <tbody>
      <tr>
        <td>
          <input id="input-e399eb8a" type="text" class="form-control" name="name" value="Jules Wunsch">
        </td>
        <td>
          <input id="input-c97acbd9" type="text" class="form-control" name="email" value="daniel.arlie@example.net">
        </td>
      </tr>
      <tr>
        <td>
          <input id="input-db769502" type="text" class="form-control" name="name" value="Ebba Olson I">
        </td>
        <td>
          <input id="input-ba94008b" type="text" class="form-control" name="email" value="ebert.jeremy@example.net">
        </td>
      </tr>
      <tr>
        <td>
          <input id="input-d5d764dd" type="text" class="form-control" name="name" value="Jessyca Goyette">
        </td>
        <td>
          <input id="input-ff34448e" type="text" class="form-control" name="email" value="casper.lorine@example.net">
        </td>
      </tr>
    </tbody>
  </table>
  <div class="col-12 text-end">
    <button id="button-f81f1099" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

Another - and more classical - option is the vertical value for formview .

<x-larastrap::form formview="vertical">
    <x-larastrap::text name="firstname" label="First Name" />
    <x-larastrap::text name="lastname" label="Last Name" />
    <x-larastrap::email name="email" label="EMail" />
    <x-larastrap::check name="check" label="Check" inline />
    <x-larastrap::checks name="checks" label="Checks" :options="['One', 'Two', 'Three']" />
</x-larastrap::form>

<form id="form-58b33464" class="" method="post" name="form-58b33464">
  <input type="hidden" name="_token" value="ViexPi6ieOEpKXiCuBRQTHb08UtrPoNJJzMCNuzf" autocomplete="off">
  <div class="mb-2">
    <label for="input-e19e1848" class="form-label">First Name</label> <input id="input-e19e1848" type="text" class="form-control" name="firstname" value="">
  </div>
  <div class="mb-2">
    <label for="input-17f9c59d" class="form-label">Last Name</label> <input id="input-17f9c59d" type="text" class="form-control" name="lastname" value="">
  </div>
  <div class="mb-2">
    <label for="input-bb83462b" class="form-label">EMail</label> <input id="input-bb83462b" type="email" class="form-control" name="email" value="">
  </div>
  <div class="mb-2">
    <div class="form-check mt-1">
      <input id="check-ed64f3ad" type="checkbox" class="form-check-input" name="check"> <label for="check-ed64f3ad" class="">Check</label>
    </div>
  </div>
  <div class="mb-2">
    <label for="checks-06088cac" class="form-label">Checks</label>
    <div id="checks-06088cac" class="d-table btn-group" role="group">
      <input type="checkbox" class="btn-check" id="checks-06088cac-06c2cea18679d64399783748fa367bdd" name="checks[]" value="0" autocomplete="off"> <label class="btn btn-outline-primary" for="checks-06088cac-06c2cea18679d64399783748fa367bdd">One</label> <input type="checkbox" class="btn-check" id="checks-06088cac-aada29daee1d64ed0fe907043855cb7e" name="checks[]" value="1" autocomplete="off"> <label class="btn btn-outline-primary" for="checks-06088cac-aada29daee1d64ed0fe907043855cb7e">Two</label> <input type="checkbox" class="btn-check" id="checks-06088cac-ca8a2087e5557e317599344687a57391" name="checks[]" value="2" autocomplete="off"> <label class="btn btn-outline-primary" for="checks-06088cac-ca8a2087e5557e317599344687a57391">Three</label>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-762066a3" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

Then, there is the column option to organize all child elements in Bootstrap's columns. This is handy in particular when building composite widgets.

<x-larastrap::form formview="column">
    <x-larastrap::text name="firstname" label="First Name" />
    <x-larastrap::text name="lastname" label="Last Name" />
    <x-larastrap::email name="email" label="E-Mail" />
</x-larastrap::form>

<form id="form-dde2b4ac" class="row g-3" method="post" name="form-dde2b4ac">
  <input type="hidden" name="_token" value="ViexPi6ieOEpKXiCuBRQTHb08UtrPoNJJzMCNuzf" autocomplete="off">
  <div class="col mb-2">
    <label for="input-43f99d7a" class="form-label">First Name</label> <input id="input-43f99d7a" type="text" class="form-control" name="firstname" value="">
  </div>
  <div class="col mb-2">
    <label for="input-933fa747" class="form-label">Last Name</label> <input id="input-933fa747" type="text" class="form-control" name="lastname" value="">
  </div>
  <div class="col mb-2">
    <label for="input-72ba11a7" class="form-label">E-Mail</label> <input id="input-72ba11a7" type="email" class="form-control" name="email" value="">
  </div>
  <div class="col-12 text-end">
    <button id="button-eecc4409" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

Anyway, you can use the formview attribute on each individual input component, to provide more complex layout.

<x-larastrap::form formview="horizontal">
    <x-larastrap::text name="firstname" label="First Name" />
    <x-larastrap::text name="lastname" label="Last Name" />

    <div class="row">
        <div class="col">
            <x-larastrap::email name="email" label="EMail" formview="vertical" />
            <x-larastrap::tel name="phone" label="Phone" formview="vertical" />
        </div>
        <div class="col">
            <x-larastrap::text name="address" label="Address" formview="vertical" />
            <x-larastrap::text name="city" label="City" formview="vertical" />
        </div>
    </div>
</x-larastrap::form>

<form id="form-083e6cc2" class="" method="post" name="form-083e6cc2">
  <input type="hidden" name="_token" value="ViexPi6ieOEpKXiCuBRQTHb08UtrPoNJJzMCNuzf" autocomplete="off">
  <div class="row mb-2">
    <label for="input-2c59f504" class="col-4 col-form-label">First Name</label>
    <div class="col-8">
      <input id="input-2c59f504" type="text" class="form-control" name="firstname" value="">
    </div>
  </div>
  <div class="row mb-2">
    <label for="input-3b055826" class="col-4 col-form-label">Last Name</label>
    <div class="col-8">
      <input id="input-3b055826" type="text" class="form-control" name="lastname" value="">
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="mb-2">
        <label for="input-3b0764b7" class="form-label">EMail</label> <input id="input-3b0764b7" type="email" class="form-control" name="email" value="">
      </div>
      <div class="mb-2">
        <label for="input-2c0cd7d8" class="form-label">Phone</label> <input id="input-2c0cd7d8" type="tel" class="form-control" name="phone" value="">
      </div>
    </div>
    <div class="col">
      <div class="mb-2">
        <label for="input-ec0c3220" class="form-label">Address</label> <input id="input-ec0c3220" type="text" class="form-control" name="address" value="">
      </div>
      <div class="mb-2">
        <label for="input-a987285b" class="form-label">City</label> <input id="input-a987285b" type="text" class="form-control" name="city" value="">
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-712ad67e" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

Errors Handling

Larastrap's forms have built-in integration with Laravel's Validation and Bootstrap's Validation, and a few parameters to deal with it.

By default error_handling is set to true and error_bag is set to default . When validation fails, and the error bag is populated, fields involved in the form but considered as valid are pre-populated with the previously submitted values through the proper Laravel helpers.

To ignore validation just set error_handling to false . To change the name of the "error bag" used by your server-side Laravel's validator, set error_bag accordingly.

Submit the form below with at least an empty field to trigger server-side validation, then back here to see the result.

@php

// Server side validation for this form is defined as:
//
// $request->validateWithBag('special', [
//     'name' => 'required',
//     'email' => 'required|email|max:255',
//     'description' => 'required',
//     'select' => 'required',
//     'check' => 'accepted',
//     'checks' => 'required',
//     'radios' => 'required',
//     'checklist' => 'required',
// ]);

@endphp

<x-larastrap::form action="/validated" error_bag="special">
    <x-larastrap::text name="name" label="Name" />
    <x-larastrap::email name="email" label="EMail" />
    <x-larastrap::textarea name="description" label="Description" />
    <x-larastrap::select name="select" label="Select" :options="['' => 'Choose One', 'First', 'Second']" />
    <x-larastrap::check name="check" label="Check" />
    <x-larastrap::checks name="checks" label="Checks" :options="['One', 'Two', 'Three']" />
    <x-larastrap::radios name="radios" label="Radio" :options="['One', 'Two', 'Three']" />
    <x-larastrap::checklist name="checklist" label="Check List" :options="['One', 'Two', 'Three']" />
</x-larastrap::form>

<form id="form-cd6d7ab7" class="" method="post" action="/validated" name="form-cd6d7ab7">
  <input type="hidden" name="_token" value="ViexPi6ieOEpKXiCuBRQTHb08UtrPoNJJzMCNuzf" autocomplete="off">
  <div class="row mb-2">
    <label for="input-b0c2cae7" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-b0c2cae7" type="text" class="form-control" name="name" value="">
    </div>
  </div>
  <div class="row mb-2">
    <label for="input-04f44eef" class="col-4 col-form-label">EMail</label>
    <div class="col-8">
      <input id="input-04f44eef" type="email" class="form-control" name="email" value="">
    </div>
  </div>
  <div class="row mb-2">
    <label for="textarea-1c98b098" class="col-4 col-form-label">Description</label>
    <div class="col-8">
      <textarea id="textarea-1c98b098" class="form-control" name="description"></textarea>
    </div>
  </div>
  <div class="row mb-2">
    <label for="select-e6d69820" class="col-4 col-form-label">Select</label>
    <div class="col-8">
      <select id="select-e6d69820" class="form-select" name="select">
        <option value="" selected>
          Choose One
        </option>
        <option value="0">
          First
        </option>
        <option value="1">
          Second
        </option>
      </select>
    </div>
  </div>
  <div class="row mb-2">
    <label for="check-55991470" class="col-4 col-form-label">Check</label>
    <div class="col-8">
      <div class="form-check mt-1">
        <input id="check-55991470" type="checkbox" class="form-check-input" name="check">
      </div>
    </div>
  </div>
  <div class="row mb-2">
    <label for="checks-f73afec9" class="col-4 col-form-label">Checks</label>
    <div class="col-8">
      <div id="checks-f73afec9" class="btn-group" role="group">
        <input type="checkbox" class="btn-check" id="checks-f73afec9-06c2cea18679d64399783748fa367bdd" name="checks[]" value="0" autocomplete="off"> <label class="btn btn-outline-primary" for="checks-f73afec9-06c2cea18679d64399783748fa367bdd">One</label> <input type="checkbox" class="btn-check" id="checks-f73afec9-aada29daee1d64ed0fe907043855cb7e" name="checks[]" value="1" autocomplete="off"> <label class="btn btn-outline-primary" for="checks-f73afec9-aada29daee1d64ed0fe907043855cb7e">Two</label> <input type="checkbox" class="btn-check" id="checks-f73afec9-ca8a2087e5557e317599344687a57391" name="checks[]" value="2" autocomplete="off"> <label class="btn btn-outline-primary" for="checks-f73afec9-ca8a2087e5557e317599344687a57391">Three</label>
      </div>
    </div>
  </div>
  <div class="row mb-2">
    <label for="radios-2c1a1db3" class="col-4 col-form-label">Radio</label>
    <div class="col-8">
      <div id="radios-2c1a1db3" class="btn-group" role="group">
        <input type="radio" class="btn-check" id="radios-2c1a1db3-06c2cea18679d64399783748fa367bdd" name="radios" value="0" autocomplete="off" checked> <label class="btn btn-outline-primary" for="radios-2c1a1db3-06c2cea18679d64399783748fa367bdd">One</label> <input type="radio" class="btn-check" id="radios-2c1a1db3-aada29daee1d64ed0fe907043855cb7e" name="radios" value="1" autocomplete="off"> <label class="btn btn-outline-primary" for="radios-2c1a1db3-aada29daee1d64ed0fe907043855cb7e">Two</label> <input type="radio" class="btn-check" id="radios-2c1a1db3-ca8a2087e5557e317599344687a57391" name="radios" value="2" autocomplete="off"> <label class="btn btn-outline-primary" for="radios-2c1a1db3-ca8a2087e5557e317599344687a57391">Three</label>
      </div>
    </div>
  </div>
  <div class="row mb-2">
    <label for="checklist-04c6639f" class="col-4 col-form-label">Check List</label>
    <div class="col-8">
      <div class="form-control-plaintext">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="checklist-04c6639f-06c2cea18679d64399783748fa367bdd" name="checklist[]" value="0" autocomplete="off"> <label class="form-check-label" for="checklist-04c6639f-06c2cea18679d64399783748fa367bdd">One</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="checklist-04c6639f-aada29daee1d64ed0fe907043855cb7e" name="checklist[]" value="1" autocomplete="off"> <label class="form-check-label" for="checklist-04c6639f-aada29daee1d64ed0fe907043855cb7e">Two</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="checklist-04c6639f-ca8a2087e5557e317599344687a57391" name="checklist[]" value="2" autocomplete="off"> <label class="form-check-label" for="checklist-04c6639f-ca8a2087e5557e317599344687a57391">Three</label>
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-c0a5ef37" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

To, indeed, leverage Bootstrap's client-side validation functionality, use the client_side_errors parameter to deploy the relevant attributes in the HTML markup (and do not forget to init the proper Javascript code).

Submit the form below with at least an empty field to trigger client-side validation.

<x-larastrap::form id="native-validated" client_side_errors="true">
    <x-larastrap::text name="name" label="Name" required />
    <x-larastrap::email name="email" label="EMail" required />
</x-larastrap::form>

<script>
(() => {
    let form = document.getElementById('native-validated');
    form.addEventListener('submit', event => {
        if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
        }

        form.classList.add('was-validated')
    }, false);
})();
</script>

<form id="native-validated" class="needs-validation" method="post" novalidate="" name="native-validated">
  <input type="hidden" name="_token" value="ViexPi6ieOEpKXiCuBRQTHb08UtrPoNJJzMCNuzf" autocomplete="off">
  <div class="row mb-2" novalidate="">
    <label for="input-77f901b4" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-77f901b4" type="text" class="form-control" name="name" value="" required="" novalidate="">
    </div>
  </div>
  <div class="row mb-2" novalidate="">
    <label for="input-14646f06" class="col-4 col-form-label">EMail</label>
    <div class="col-8">
      <input id="input-14646f06" type="email" class="form-control" name="email" value="" required="" novalidate="">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-6995b0d9" class="btn btn-primary" novalidate="" type="submit">Save</button>
  </div>
</form>
<script>
(() => {
    let form = document.getElementById('native-validated');
    form.addEventListener('submit', event => {
        if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
        }

        form.classList.add('was-validated')
    }, false);
})();
</script>

Note that Larastrap can also handle nested array inputs for more complex forms.

@php

// Server side validation for this form is defined as:
//
// $request->validate([
//     'person.name' => 'required',
//     'person.email' => 'required|email|max:255',
// ]);

@endphp

<x-larastrap::form action="/validated_dot">
    <x-larastrap::text name="person.name" label="Name" />
    <x-larastrap::email name="person.email" label="EMail" />
</x-larastrap::form>

<form id="form-1979fdb0" class="" method="post" action="/validated_dot" name="form-1979fdb0">
  <input type="hidden" name="_token" value="ViexPi6ieOEpKXiCuBRQTHb08UtrPoNJJzMCNuzf" autocomplete="off">
  <div class="row mb-2">
    <label for="input-ecd4d74f" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-ecd4d74f" type="text" class="form-control" name="person[name]" value="">
    </div>
  </div>
  <div class="row mb-2">
    <label for="input-cf5ef7a4" class="col-4 col-form-label">EMail</label>
    <div class="col-8">
      <input id="input-cf5ef7a4" type="email" class="form-control" name="person[email]" value="">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-2da56e7f" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

Intro

Components

Forms

Containers

Custom Elements

More

About

Forms

obj

action / method

route

baseaction

buttons

buttons_align

formview

Errors Handling