Larastrap

Opinionated Bootstrap 5 components for Laravel

There are lots of Laravel packages pretending to wrap the widely popular Bootstrap CSS design system. Most of them are limited just to forms formatting (while Bootstrap provides so many different tools), and all of them have an elaborated syntax, so the code required to format your component is no so less verbose (nor more readable) then the actual resulting HTML.

Larastrap provides a conspicuous amount of (configurable) defaults and many out-of-the-box common behaviours. And, leveraging the Laravel's native Blade Components system, provides a few handy automatisms and the ability to define your own reusable Custom Elements. To reduce to the bare minimum the code you have to actually write (and read, and maintain...) to obtain your desidered layout.


Intro

To install it in your Laravel project, run
composer require madbob/larastrap
php artisan vendor:publish --tag=config

This will generate the config/larastrap.php file where you can find (and modify) the default behaviours. From here, you can define a default value for each property of each component, and define custom presets.

Each component can be included into your Blade template using
<x-larastrap::componentname>
and it is possible to inline overwrite all of his attributes using the common notation for Blade components
<x-larastrap::componentname id="a_static_string" :name="$a_php_variable">

Attributes can be also packed in a single indexed array and passed as :params. This is in particular useful when dynamically setting up and loading a component
<x-dynamic-component
    :component="sprintf('larastrap::%s', $a_component_type)"
    :params="['id' => 'a_static_string', 'name' => $a_php_variable]" />

Remeber to include the Bootstrap assets (both CSS and JS) in your page!

Larastrap is opensource, MIT licensed: grab the code and contribute on the Gitlab repository.

A navbar.
For each item you can specify just a label and an url, or a sub-array with more informations. Eventually even the children (for dropdowns).
If none of the items has the active attribute set to true, tries to guess the active item through the actual Laravel route. On the contrary, if a child is set to active, his parent is marked active as well
Bootstrap documentation

Code

<x-larastrap::navbar :options="[
    'Home' => '/',
    'Navbar' => ['url' => '#navbar', 'active' => true],
    'More' => ['children' => ['Forms' => '#forms', 'Modals' => '#modals', 'All' => '#props']]
]" />
<nav class="navbar navbar-light bg-light navbar-expand-lg">
  <div class="container-fluid">
    <div class="collapse navbar-collapse position-relative" id="navbar-ZwKtglOezW">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#navbar">Navbar</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">More</a>
          <ul class="dropdown-menu">
            <li>
              <a class="dropdown-item" href="#forms">Forms</a>
            </li>
            <li>
              <a class="dropdown-item" href="#modals">Modals</a>
            </li>
            <li>
              <a class="dropdown-item" href="#props">All</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Forms

Open a form, specifying a reference obj and an action URL, them populate it with the preferred inputs.
For each of them you have to specify at least a label and a name (matching with an attribute of the reference object) or an explicit value.
By default the POST method is used, the CSRF token is properly added, Bootstrap validation is leveraged, label_width and input_width are applied from the configuration, and a submit button is appended (using the array buttons, containing details for all desired buttons).
Bootstrap documentation
Must be a valid email address

Code

<?php $obj = (object) ['id' => 1234, 'name' => 'Foo', 'bio' => 'A very smart guy!', 'email' => 'foo@bar.baz', 'country' => 'it', 'colors' => ['red', 'green']] ?>
<x-larastrap::form :obj="$obj" action="/user/save">
  <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="Bar" />
  <x-larastrap::textarea name="bio" label="Bio" />
  <x-larastrap::email name="email" label="EMail" help="Must be a valid email address" />

  <?php $countries = ['fr' => 'France', 'de' => 'Germany', 'it' => 'Italy'] ?>
  <x-larastrap::select name="country" label="Country (as select)" :options="$countries" />
  <x-larastrap::radios name="country" label="Country (as radio)" :options="$countries" />

  <?php $colors = ['red' => 'Red', 'green' => 'Green', 'blue' => 'Blue'] ?>
  <x-larastrap::checks name="colors" label="Colors" :options="$colors" />
</x-larastrap::form>
<form id="form-AEEjcTM6Qz" class="" method="post" action="/user/save" novalidate="" name="form-AEEjcTM6Qz">
  <input type="hidden" name="_token" value="AS9yfSI4jp4NQVS0VyDZBmrV9qrG624OKKASC9PF"> <input id="hidden-scnGgEZChq" type="hidden" class="" name="id" value="1234">
  <div class="row mb-3">
    <label for="input-7m8uGAX9gk" class="col-2 col-form-label">ID</label>
    <div class="col-10">
      <input id="input-7m8uGAX9gk" type="number" class="form-control-plaintext" name="id" value="1234" step="1" min="-9223372036854775808" max="9223372036854775807" disabled>
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-3qzo2bKDsF" class="col-2 col-form-label">Name</label>
    <div class="col-10">
      <input id="input-3qzo2bKDsF" type="text" class="form-control" name="name" value="Foo">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-zcwYs8GmcI" class="col-2 col-form-label">Surname</label>
    <div class="col-10">
      <input id="input-zcwYs8GmcI" type="text" class="form-control" name="surname" value="Bar">
    </div>
  </div>
  <div class="row mb-3">
    <label for="textarea-q4guwqqSQ2" class="col-2 col-form-label">Bio</label>
    <div class="col-10">
      <textarea id="textarea-q4guwqqSQ2" class="form-control" name="bio">A very smart guy!</textarea>
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-2veIIQfNsp" class="col-2 col-form-label">EMail</label>
    <div class="col-10">
      <input id="input-2veIIQfNsp" type="email" class="form-control" name="email" value="foo@bar.baz">
      <div class="form-text">
        Must be a valid email address
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <label for="select-g7mIr0M5xs" class="col-2 col-form-label">Country (as select)</label>
    <div class="col-10">
      <select 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-3">
    <label for="radios-avsf91D5Mj" class="col-2 col-form-label col-2 col-form-label">Country (as radio)</label>
    <div class="col-10">
      <div class="btn-group" role="group">
        <input type="radio" class="btn-check" name="country" id="radios-avsf91D5Mj-5138032368191792519" autocomplete="off" value="fr"> <label class="btn btn-outline-primary" for="radios-avsf91D5Mj-5138032368191792519">France</label> <input type="radio" class="btn-check" name="country" id="radios-avsf91D5Mj-5175070500032709317" autocomplete="off" value="de"> <label class="btn btn-outline-primary" for="radios-avsf91D5Mj-5175070500032709317">Germany</label> <input type="radio" class="btn-check" name="country" id="radios-avsf91D5Mj-894226336742016781" autocomplete="off" value="it" checked> <label class="btn btn-outline-primary" for="radios-avsf91D5Mj-894226336742016781">Italy</label>
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <label for="checks-gdsGCTLhW2" class="col-2 col-form-label col-2 col-form-label">Colors</label>
    <div class="col-10">
      <div class="btn-group" role="group">
        <input type="checkbox" class="btn-check" name="colors[]" id="checks-gdsGCTLhW2-5457248710338673313" autocomplete="off" value="red" checked> <label class="btn btn-outline-primary" for="checks-gdsGCTLhW2-5457248710338673313">Red</label> <input type="checkbox" class="btn-check" name="colors[]" id="checks-gdsGCTLhW2-1273169572726630417" autocomplete="off" value="green" checked> <label class="btn btn-outline-primary" for="checks-gdsGCTLhW2-1273169572726630417">Green</label> <input type="checkbox" class="btn-check" name="colors[]" id="checks-gdsGCTLhW2-1161712870106460348" autocomplete="off" value="blue"> <label class="btn btn-outline-primary" for="checks-gdsGCTLhW2-1161712870106460348">Blue</label>
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-RhkCvm28NZ" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>
For a different layout, use the formview parameter. Or modify the default configuration in larastrap.elements.form.formview to change them all.

Code

<?php $obj = (object) ['id' => 1234, 'name' => 'Mario', 'email' => 'mario@mailinator.com'] ?>
<x-larastrap::form :obj="$obj" action="/user/save" formview="vertical">
  <x-larastrap::number name="id" label="ID" disabled="true" />
  <x-larastrap::text name="name" label="Name" />
  <x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>
<form id="form-xhkfscCrEg" class="" method="post" action="/user/save" novalidate="" name="form-xhkfscCrEg">
  <input type="hidden" name="_token" value="AS9yfSI4jp4NQVS0VyDZBmrV9qrG624OKKASC9PF">
  <div class="mb-3">
    <label for="input-3cu22pxW96" class="form-label">ID</label> <input id="input-3cu22pxW96" type="number" class="form-control-plaintext" name="id" value="1234" step="1" min="-9223372036854775808" max="9223372036854775807" disabled>
  </div>
  <div class="mb-3">
    <label for="input-iFYXGv1lYt" class="form-label">Name</label> <input id="input-iFYXGv1lYt" type="text" class="form-control" name="name" value="Mario">
  </div>
  <div class="mb-3">
    <label for="input-sqVgPrlAhS" class="form-label">EMail</label> <input id="input-sqVgPrlAhS" type="email" class="form-control" name="email" value="mario@mailinator.com">
  </div>
  <div class="col-12 text-end">
    <button id="button-Fm5z28Zcy4" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>
The formview: inline mode displays the form on a single row, with hidden labels.
Bootstrap documentation

Code

<?php $obj = (object) ['id' => 1234, 'name' => 'Mario', 'email' => 'mario@mailinator.com'] ?>
<x-larastrap::form :obj="$obj" action="/user/save" formview="inline">
  <x-larastrap::number name="id" label="ID" disabled="true" />
  <x-larastrap::text name="name" label="Name" />
  <x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>
<form id="form-wkPBd5xjxY" class="row row-cols-lg-auto g-3 align-items-center" method="post" action="/user/save" novalidate="" name="form-wkPBd5xjxY">
  <input type="hidden" name="_token" value="AS9yfSI4jp4NQVS0VyDZBmrV9qrG624OKKASC9PF">
  <div class="col-12">
    <label for="input-vdjVleoRc4" class="d-none">ID</label> <input id="input-vdjVleoRc4" type="number" class="form-control-plaintext" name="id" value="1234" step="1" min="-9223372036854775808" max="9223372036854775807" disabled>
  </div>
  <div class="col-12">
    <label for="input-xyAVmzHlAG" class="d-none">Name</label> <input id="input-xyAVmzHlAG" type="text" class="form-control" name="name" value="Mario">
  </div>
  <div class="col-12">
    <label for="input-cmhfvWhViQ" class="d-none">EMail</label> <input id="input-cmhfvWhViQ" type="email" class="form-control" name="email" value="mario@mailinator.com">
  </div>
  <div class="col-12 text-end">
    <button id="button-HjcOy17jS3" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>
When a file input is involved, the enctype is automatically added to the parent form.

Code

<x-larastrap::form action="/document/save">
  <x-larastrap::file name="document" label="Attach Document" />
</x-larastrap::form>
<form id="form-roixbW0dFf" class="" method="post" action="/document/save" enctype="multipart/form-data" novalidate="" name="form-roixbW0dFf">
  <input type="hidden" name="_token" value="AS9yfSI4jp4NQVS0VyDZBmrV9qrG624OKKASC9PF">
  <div class="row mb-3">
    <label for="input-5BMVCrccM6" class="col-2 col-form-label">Attach Document</label>
    <div class="col-10">
      <input id="input-5BMVCrccM6" type="file" class="form-control" name="document" value="">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-bKFFNgSI1y" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>
If you have some special HTML block to align into the form, just leverage the x-larastrap::field component to format whatever you want.
example

Code

<x-larastrap::form action="/do/nothing">
  <x-larastrap::field label="Image">
    <img src="https://picsum.photos/100" class="img-fluid" alt="example">
  </x-larastrap::field>
</x-larastrap::form>
<form id="form-i1YsMpImOY" class="" method="post" action="/do/nothing" novalidate="" name="form-i1YsMpImOY">
  <input type="hidden" name="_token" value="AS9yfSI4jp4NQVS0VyDZBmrV9qrG624OKKASC9PF">
  <div class="row mb-3">
    <label for="field-1wBkjn8jVn" class="col-2 col-form-label">Image</label>
    <div class="col-10">
      <img src="https://picsum.photos/100" class="img-fluid" alt="example">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-WRrJSrxspZ" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>
There are a few bult-in utilities that can be used out-of-the-box, both to enrich the visualization and customize the behaviour of the fields. Those do not cover all combinations provided by Bootstrap, but still are handy in most cases.
@

Code

<?php $obj = (object) ['id' => 1234, 'name' => 'Foo', 'email' => 'foo@bar.baz', 'country' => 'it'] ?>
<x-larastrap::form :obj="$obj" action="/user/save">
  <x-larastrap::text name="name" label="Name" :classes="['is-invalid']" />
  <x-larastrap::text name="surname" label="Surname" pophelp="This is an extensive description text about the field, displayed only on hover. Requires initialization of Bootstrap's popovers" />
  <x-larastrap::email name="email" label="EMail" textappend="@" />

  <?php $countries = ['fr' => 'France', 'de' => 'Germany', 'it' => 'Italy'] ?>
  <x-larastrap::select name="country" npostfix="[]" label="Array of Countries" :options="$countries" />
  <x-larastrap::select name="country" npostfix="[]" label="Array of Countries" :options="$countries" />
</x-larastrap::form>
<form id="form-TsWNVdjhYm" class="" method="post" action="/user/save" novalidate="" name="form-TsWNVdjhYm">
  <input type="hidden" name="_token" value="AS9yfSI4jp4NQVS0VyDZBmrV9qrG624OKKASC9PF">
  <div class="row mb-3">
    <label for="input-eVfTAtVPKf" class="col-2 col-form-label">Name</label>
    <div class="col-10">
      <input id="input-eVfTAtVPKf" type="text" class="is-invalid form-control" name="name" value="Foo">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-R4lyc1Xdis" class="col-2 col-form-label">Surname <span class="badge rounded-pill bg-primary" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="This is an extensive description text about the field, displayed only on hover. Requires initialization of Bootstrap's popovers">?</span></label>
    <div class="col-10">
      <input id="input-R4lyc1Xdis" type="text" class="form-control" name="surname" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-d7AyLYxB4p" class="col-2 col-form-label">EMail</label>
    <div class="col-10">
      <div class="input-group">
        <input id="input-d7AyLYxB4p" type="email" class="form-control" name="email" value="foo@bar.baz"> <span class="input-group-text">@</span>
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <label for="select-LmmCCzd8GI" class="col-2 col-form-label">Array of Countries</label>
    <div class="col-10">
      <select 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-3">
    <label for="select-AbGOplzB7E" class="col-2 col-form-label">Array of Countries</label>
    <div class="col-10">
      <select 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="col-12 text-end">
    <button id="button-OBXLa6ZURm" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

Select Model

A special widget included in Larastrap is x-larastrap::select-model: a regular select input able to directly handle Eloquent models. It translates a Collection of Models (fetched with a query or from a relationship) into an array of IDs and values.

Code

<?php $user = App\Models\User::inRandomOrder()->first() ?>
<x-larastrap::select-model name="user_id" label="Select a User" :options="App\Models\User::all()" :value="$user->id" />
<div class="row mb-3">
  <label for="select-VN1F41a403" class="col-2 col-form-label">Select a User</label>
  <div class="col-10">
    <select class="form-select" name="user_id">
      <option value="1">
        Adrian Conroy
      </option>
      <option value="2">
        Rodrick Emard
      </option>
      <option value="3">
        Harold Little
      </option>
      <option value="4">
        Shakira Barrows IV
      </option>
      <option value="5" selected>
        Cole Tillman
      </option>
      <option value="6">
        Mrs. Ursula Keeling MD
      </option>
      <option value="7">
        Ransom D'Amore
      </option>
      <option value="8">
        Zion Morar
      </option>
      <option value="9">
        Cicero Mitchell
      </option>
      <option value="10">
        Dean Shields
      </option>
    </select>
  </div>
</div>
By default $obj->id becomes the value of the option and $obj->name is used for its content, but you can customize this behaviour using a provided translateCallback function used to retrieve them for each model. An idea is to provide your own custom elements for frequently selectable Models, and reuse them across your codebase.

Code

<?php $translate = function($obj) { return [$obj->id, $obj->email]; } ?>
<x-larastrap::select-model name="user_id" label="Select a User" :options="App\Models\User::all()" :translateCallback="$translate" />
<div class="row mb-3">
  <label for="select-v5Uipwe3GK" class="col-2 col-form-label">Select a User</label>
  <div class="col-10">
    <select class="form-select" name="user_id">
      <option value="1">
        alta01@example.com
      </option>
      <option value="2">
        macejkovic.haven@example.net
      </option>
      <option value="3">
        skiles.hester@example.com
      </option>
      <option value="4">
        virgie.renner@example.net
      </option>
      <option value="5">
        hking@example.com
      </option>
      <option value="6">
        wbauch@example.com
      </option>
      <option value="7">
        camille.senger@example.com
      </option>
      <option value="8">
        ivah96@example.net
      </option>
      <option value="9">
        marjorie.pouros@example.net
      </option>
      <option value="10">
        walter.kory@example.com
      </option>
    </select>
  </div>
</div>
Need to push some extra option in the select, perhaps to permit to select 'none'? Use the extra_options attribute to pass an addictional array of values!

Code

<x-larastrap::select-model name="user_id" label="Select a User" :options="App\Models\User::all()" :extra_options="[0 => 'None']" />
<div class="row mb-3">
  <label for="select-iG1ffcvXqq" class="col-2 col-form-label">Select a User</label>
  <div class="col-10">
    <select class="form-select" name="user_id">
      <option value="0" selected>
        None
      </option>
      <option value="1">
        Adrian Conroy
      </option>
      <option value="2">
        Rodrick Emard
      </option>
      <option value="3">
        Harold Little
      </option>
      <option value="4">
        Shakira Barrows IV
      </option>
      <option value="5">
        Cole Tillman
      </option>
      <option value="6">
        Mrs. Ursula Keeling MD
      </option>
      <option value="7">
        Ransom D'Amore
      </option>
      <option value="8">
        Zion Morar
      </option>
      <option value="9">
        Cicero Mitchell
      </option>
      <option value="10">
        Dean Shields
      </option>
    </select>
  </div>
</div>

Modals

The classic Bootstrap modal. The x-larastrap::button component has a special triggers_modal property to rapidly setup a trigger.
Bootstrap documentation

Code

<x-larastrap::button label="Open Modal" triggers_modal="#test-modal" />

<x-larastrap::modal title="Test" id="test-modal">
  <p>Ciao</p>
</x-larastrap::modal>
<button id="button-DQcPU0Vgm1" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#test-modal">Open Modal</button>
<div class="modal fade" id="test-modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-none">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          Test
        </h5>
      </div>
      <div class="modal-body">
        <p>
          Ciao
        </p>
      </div>
      <div class="modal-footer">
        <button id="button-krSN1tG2Jl" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
A form into a modal is a special (automatically managed) case, in which buttons for the form are merged into the modal's footer.

Code

<x-larastrap::button label="Open Modal with Form" triggers_modal="#save-modal" />

<x-larastrap::modal title="Test" id="save-modal">
  <?php $obj = (object) ['id' => 1234, 'name' => 'Foo', 'email' => 'foo@bar.baz'] ?>
  <x-larastrap::form :obj="$obj" action="/user/save">
    <x-larastrap::hidden name="id" />
    <x-larastrap::text name="name" label="Name" />
    <x-larastrap::email name="email" label="EMail" />
  </x-larastrap::form>
</x-larastrap::modal>
<button id="button-46Q1vjiECZ" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#save-modal">Open Modal with Form</button>
<div class="modal fade" id="save-modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-none">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          Test
        </h5>
      </div>
      <div class="modal-body">
        <form id="form-pgrmZbUvtZ" class="" method="post" action="/user/save" novalidate="" name="form-pgrmZbUvtZ">
          <input type="hidden" name="_token" value="AS9yfSI4jp4NQVS0VyDZBmrV9qrG624OKKASC9PF"> <input id="hidden-QmGwvuSI0j" type="hidden" class="" name="id" value="1234">
          <div class="row mb-3">
            <label for="input-r77zjFUI3V" class="col-2 col-form-label">Name</label>
            <div class="col-10">
              <input id="input-r77zjFUI3V" type="text" class="form-control" name="name" value="Foo">
            </div>
          </div>
          <div class="row mb-3">
            <label for="input-FUPQwHq5AR" class="col-2 col-form-label">EMail</label>
            <div class="col-10">
              <input id="input-FUPQwHq5AR" type="email" class="form-control" name="email" value="foo@bar.baz">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button id="button-TRLLko8yH2" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button id="button-ZCyWh1xn4c" class="btn btn-primary" type="submit" form="form-pgrmZbUvtZ">Save</button>
      </div>
    </div>
  </div>
</div>

Tabs

Tabs are managed as a hiearchy of elements: the options associative array permits to specify the contents of the tabs, and each x-larastrap::tabpane is a tab page. By default, the first tab is active.
Remember that you can alter the classes attribute (both inline or once in the configuration file) to pass formatting classes for the tab panes (useful for padding and margins).
Bootstrap documentation

This is the first tab!

This is the second tab!

Code

<x-larastrap::tabs>
  <x-larastrap::tabpane label="First">
    <p>This is the first tab!</p>
  </x-larastrap::tabpane>

  <x-larastrap::tabpane label="Second" active="true">
    <p>This is the second tab!</p>
  </x-larastrap::tabpane>
</x-larastrap::tabs>
<ul class="nav nav-tabs" id="tabs-ZVCgxc2AT1" role="tablist">
  <li class="nav-item" role="presentation">
    <button id="tabpane-kSblPWJ2jJ_5662739493182665005" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-kSblPWJ2jJ">First</button>
  </li>
  <li class="nav-item" role="presentation">
    <button id="tabpane-OT4dKfQZVL_71666823431040651" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-OT4dKfQZVL">Second</button>
  </li>
</ul>
<div class="tab-content" id="tabs-ZVCgxc2AT1_contents">
  <div class="p-3 tab-pane fade" id="tabpane-kSblPWJ2jJ" role="tabpanel">
    <p>
      This is the first tab!
    </p>
  </div>
  <div class="p-3 tab-pane fade show active" id="tabpane-OT4dKfQZVL" role="tabpanel">
    <p>
      This is the second tab!
    </p>
  </div>
</div>
Different styles for the tabs are possibile.
Remember to always define as active one of the tabpanes, or an active index to the parent tabs!
Bootstrap documentation

This is the first tab!

This is the second tab!

Code

<x-larastrap::tabs tabview="pills" active="0">
  <x-larastrap::tabpane label="First">
    <p>This is the first tab!</p>
  </x-larastrap::tabpane>

  <x-larastrap::tabpane label="Second">
    <p>This is the second tab!</p>
  </x-larastrap::tabpane>
</x-larastrap::tabs>
<ul class="nav nav-pills" id="tabs-lHUT4xBmDs" role="tablist">
  <li class="nav-item" role="presentation">
    <button id="tabpane-ZtTOCMUWMC_3588939106291519483" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-ZtTOCMUWMC">First</button>
  </li>
  <li class="nav-item" role="presentation">
    <button id="tabpane-V0M27TqP1x_7347013775972322809" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#tabpane-V0M27TqP1x">Second</button>
  </li>
</ul>
<div class="tab-content" id="tabs-lHUT4xBmDs_contents">
  <div class="p-3 tab-pane fade show active" id="tabpane-ZtTOCMUWMC" role="tabpanel">
    <p>
      This is the first tab!
    </p>
  </div>
  <div class="p-3 tab-pane fade" id="tabpane-V0M27TqP1x" role="tabpanel">
    <p>
      This is the second tab!
    </p>
  </div>
</div>

Accordion

Accordions are not much different from tabs: there is a wrapper component and child components, one for panel. Each sub panel can be individually opened through the active attribute.
Bootstrap documentation

This is the first accordion!

This is the second accordion!

Code

<x-larastrap::accordion always_open="true">
  <x-larastrap::accordionitem label="First">
    <p>This is the first accordion!</p>
  </x-larastrap::accordionitem>

  <x-larastrap::accordionitem label="Second" active="true">
    <p>This is the second accordion!</p>
  </x-larastrap::accordionitem>
</x-larastrap::accordion>
<div class="accordion" id="accordion-OcydIOxkP8">
  <div class="accordion-item">
    <h2 class="accordion-header" id="head-accordionitem-GwD0p5PABS">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionitem-GwD0p5PABS" aria-expanded="false" aria-controls="accordionitem-GwD0p5PABS">First</button>
    </h2>
    <div id="accordionitem-GwD0p5PABS" class="accordion-collapse collapse" aria-labelledby="head-accordionitem-GwD0p5PABS">
      <div class="accordion-body">
        <p>
          This is the first accordion!
        </p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="head-accordionitem-2cUhOCHdWf">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordionitem-2cUhOCHdWf" aria-expanded="true" aria-controls="accordionitem-2cUhOCHdWf">Second</button>
    </h2>
    <div id="accordionitem-2cUhOCHdWf" class="accordion-collapse collapse show" aria-labelledby="head-accordionitem-2cUhOCHdWf">
      <div class="accordion-body">
        <p>
          This is the second accordion!
        </p>
      </div>
    </div>
  </div>
</div>

Encloses

Among the other types of containers, x-larastrap::enclose is a particular one: it provides no HTML output, for is useful to provide a context for inner inputs.

Code

<table class="table">
    @foreach(App\Models\User::take(3)->get() as $user)
        <x-larastrap::enclose :obj="$user">
            <tr>
                <td><x-larastrap::text name="name" readonly squeeze="true" /></td>
                <td><x-larastrap::email name="email" squeeze="true" /></td>
            </tr>
        </x-larastrap::enclose>
    @endforeach
</table>
<table class="table">
  <tr>
    <td>
      <input id="input-VjRkYotygt" type="text" class="form-control-plaintext" name="name" value="Adrian Conroy" readonly>
    </td>
    <td>
      <input id="input-prRqSeQJZK" type="email" class="form-control" name="email" value="alta01@example.com">
    </td>
  </tr>
  <tr>
    <td>
      <input id="input-UR8zU7lcKV" type="text" class="form-control-plaintext" name="name" value="Rodrick Emard" readonly>
    </td>
    <td>
      <input id="input-GO8jxstUJR" type="email" class="form-control" name="email" value="macejkovic.haven@example.net">
    </td>
  </tr>
  <tr>
    <td>
      <input id="input-iDXxtKbyv3" type="text" class="form-control-plaintext" name="name" value="Harold Little" readonly>
    </td>
    <td>
      <input id="input-objBYZCXqa" type="email" class="form-control" name="email" value="skiles.hester@example.com">
    </td>
  </tr>
</table>

Miscellaneous

Code

<x-larastrap::button label="Yes, this is a button" color="warning" />
<button id="button-ZI5yj3P4PZ" class="btn btn-warning">Yes, this is a button</button>
Links! Mostly like buttons, but with href!

Code

<x-larastrap::link label="Yes, this is an anchor" color="info" href="https://larastrap.madbob.org/" />
Button groups!
Bootstrap documentation

Code

<x-larastrap::btngroup>
  <x-larastrap::button label="First" />
  <x-larastrap::button label="Second" />
  <x-larastrap::button label="Third" />
</x-larastrap::btngroup>
<div class="btn-group" role="group">
  <button id="button-tZAyZocpkm" class="btn btn-primary">First</button> <button id="button-iCAI7DdgUK" class="btn btn-primary">Second</button> <button id="button-SIgnwHpZeK" class="btn btn-primary">Third</button>
</div>
More input fields!

Code

<x-larastrap::form>
  <x-larastrap::check label="Checkbox" />
  <x-larastrap::check label="Switch" switch />
  <x-larastrap::url label="URL" />
  <x-larastrap::range label="Range" min="0" max="100" step="5" />
  <x-larastrap::date label="Date" />
  <x-larastrap::time label="Time" />
  <x-larastrap::datetime label="Date and Time" />
  <x-larastrap::color label="Color" />
</x-larastrap::form>
<form id="form-3LNxyitQ5j" class="" method="post" novalidate="" name="form-3LNxyitQ5j">
  <input type="hidden" name="_token" value="AS9yfSI4jp4NQVS0VyDZBmrV9qrG624OKKASC9PF">
  <div class="row mb-3">
    <label for="check-NzdjqkoZFA" class="col-2 col-form-label">Checkbox</label>
    <div class="col-10">
      <div class="form-check mt-1">
        <input id="check-NzdjqkoZFA" type="checkbox" class="form-check-input" name="" value="">
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <label for="check-orIBxgH3K8" class="col-2 col-form-label">Switch</label>
    <div class="col-10">
      <div class="form-check form-switch mt-1">
        <input id="check-orIBxgH3K8" type="checkbox" class="form-check-input" name="" value="">
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-TUag9AGFgK" class="col-2 col-form-label">URL</label>
    <div class="col-10">
      <input id="input-TUag9AGFgK" type="url" class="form-control" name="" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-hoCkiuROJg" class="col-2 col-form-label">Range</label>
    <div class="col-10">
      <input id="input-hoCkiuROJg" type="range" class="form-range" name="" value="" step="5" min="0" max="100">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-6sPayqhhVm" class="col-2 col-form-label">Date</label>
    <div class="col-10">
      <input id="input-6sPayqhhVm" type="date" class="form-control" name="" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-vA7H0OG89W" class="col-2 col-form-label">Time</label>
    <div class="col-10">
      <input id="input-vA7H0OG89W" type="time" class="form-control" name="" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-BdQR1cOGoT" class="col-2 col-form-label">Date and Time</label>
    <div class="col-10">
      <input id="input-BdQR1cOGoT" type="datetime-local" class="form-control" name="" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-wwBeoSErZS" class="col-2 col-form-label">Color</label>
    <div class="col-10">
      <input id="input-wwBeoSErZS" type="color" class="form-control" name="" value="">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-C9G4VgtgOx" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>
Optgroups in selects!

Code

<?php

$options = [
    'first' => (object) [
        'label' => 'First Group',
        'children' => [
            'first_1' => 'First Item in First Group',
            'first_2' => 'Second Item in First Group',
        ],
    ],
    'second' => (object) [
        'label' => 'Second Group',
        'children' => [
            'second_1' => 'First Item in Second Group',
            'second_2' => (object) [
                'label' => 'Second Item in Second Group (disabled)',
                'disabled' => true,
            ],
            'second_3' => 'Third Item in Second Group',
        ],
    ],
];

?>

<x-larastrap::select label="Select in groups" :options="$options" />
<div class="row mb-3">
  <label for="select-SUfSV7dHce" class="col-2 col-form-label">Select in groups</label>
  <div class="col-10">
    <select class="form-select" name="">
      <optgroup label="First Group">
        <option value="first_1">
          First Item in First Group
        </option>
        <option value="first_2">
          Second Item in First Group
        </option>
      </optgroup>
      <optgroup label="Second Group">
        <option value="second_1">
          First Item in Second Group
        </option>
        <option value="second_2" disabled>
          Second Item in Second Group (disabled)
        </option>
        <option value="second_3">
          Third Item in Second Group
        </option>
      </optgroup>
    </select>
  </div>
</div>
Complex radio selections! The same applies for x-larastrap::checks, too!

Code

<?php

$options = [
    'first' => 'First',
    'second' => 'Second',
    'third' => (object) [
        'label' => 'Third (disabled)',
        'disabled' => true,
    ],
    'fourth' => (object) [
        'label' => 'Fourth (hidden)',
        'hidden' => true,
    ],
    'fifth' => (object) [
        'label' => 'Fifth (with data attributes)',
        'button_attributes' => ['data-example' => 'test'],
    ],
];

?>

<x-larastrap::radios name="choose" label="Choose one" :options="$options" value="second" />
<div class="row mb-3">
  <label for="radios-Z6HPTOaOYl" class="col-2 col-form-label col-2 col-form-label">Choose one</label>
  <div class="col-10">
    <div class="btn-group" role="group">
      <input type="radio" class="btn-check" name="choose" id="radios-Z6HPTOaOYl-8872295521261422220" autocomplete="off" value="first"> <label class="btn btn-outline-primary" for="radios-Z6HPTOaOYl-8872295521261422220">First</label> <input type="radio" class="btn-check" name="choose" id="radios-Z6HPTOaOYl-4236258769872557913" autocomplete="off" value="second" checked> <label class="btn btn-outline-primary" for="radios-Z6HPTOaOYl-4236258769872557913">Second</label> <input type="radio" class="btn-check" name="choose" id="radios-Z6HPTOaOYl-1380246463159144094" autocomplete="off" value="third"> <label class="btn btn-outline-primary disabled" for="radios-Z6HPTOaOYl-1380246463159144094">Third (disabled)</label> <input type="radio" class="btn-check" name="choose" id="radios-Z6HPTOaOYl-4802462344617356718" autocomplete="off" value="fourth"> <input type="radio" class="btn-check" name="choose" id="radios-Z6HPTOaOYl-7002475515587768147" autocomplete="off" value="fifth"> <label class="btn btn-outline-primary" for="radios-Z6HPTOaOYl-7002475515587768147" data-example="test">Fifth (with data attributes)</label>
    </div>
  </div>
</div>

Custom Elements

In the config/larastrap.php file is possible to define custom presets, to be reused across the application using a specific set of configurations. Those are defined by a Blade component name, the name of the extended element type, and your own parameters.

Are you sure you want to delete this element?

Code

<!--

You find this example in the default config/larastrap.php file

'customs' => [
  'deleteform' => [  \\ <--- This is the name of your custom component!
    'extends' => 'form',
    'params' => [
      'classes' => ['text-center'],
      'method' => 'DELETE',
      'form_buttons' => [['color' => 'danger', 'label' => 'Yes, delete it', 'attributes' => ['type' => 'submit']]]
    ],
  ],
],

-->

<x-larastrap::deleteform action="/user/delete">
  <x-larastrap::hidden name="id" value="123" />
  <p>Are you sure you want to delete this element?</p>
</x-larastrap::deleteform>
<form id="form-scwTBF7L4v" class="text-center" method="post" action="/user/delete" novalidate="" name="form-scwTBF7L4v">
  <input type="hidden" name="_token" value="AS9yfSI4jp4NQVS0VyDZBmrV9qrG624OKKASC9PF"> <input id="hidden-oXwQJsWpu9" type="hidden" class="" name="id" value="123">
  <p>
    Are you sure you want to delete this element?
  </p>
  <div class="col-12 text-center">
    <button id="button-qtfmdh8eoY" class="btn btn-danger" type="submit">Yes, delete it</button>
  </div>
</form>
It is possible to dinamically create custom elements at runtime, accessing the LarastrapStack singleton inited by the Larastrap Service Provider.

Code

<?php

/*
    Call this before Blade rendering, e.g. in the parent Controller or in a Service Provider
*/
app()->make('LarastrapStack')->addCustomElement('jerkbutton', [
    'extends' => 'button',
    'params' => [
        'color' => 'secondary',
        'postlabel' => ' (Click Here!)',
    ],
]);

?>

<x-larastrap::jerkbutton label="A Button" />
<button id="button-jzsbOGpHbz" class="btn btn-secondary">A Button (Click Here!)</button>

All Elements and Properties

Your can include any component using the proper Blade directive, and passing attributes to it. All the attributes here listed are processed internally and may not appear in the final rendered node; those that are not managed (e.g. your own data attributes) are simply translated into the final HTML.

Some attributes are valid for every kind of component, such as:

  • id
    The ID of the HTML node. If not specified, a random one is generated so that all items are properly marked
  • attributes
    An associative array which is translated to an extra set of attributes to the node. Useful to attach your data attributes, custom attributes, hooks for your preferred Javascript framework and so on
  • classes
    An array of CSS classes to be added to the HTML node, in addiction to those automatically generated. Can be defined as an array or a space separated string
  • override_classes
    An array of CSS classes to be applied to the HTML node, overriding those automatically generated. Can be defined as an array or a space separated string
  • hidden
    A boolean attribute which hides the element
  • reviewCallback
    A function to be called for manually handle and transform the parameters of the node. This have to take two parameters (the first is the instance of the component, the second is the indexed array of parameters) and returns the (eventually modified) array of parameters. Mostly intended for Custom Elements

Some components are Containers, so have an opening and a closing tag. Their behaviour may be altered by child elements. Those always accept the following attributes:

  • obj
    A PHP object (eventually, an Eloquent model) used to automatically populate the value of inner input fields

Then there are Inputs, used (usually into form) to take user inputs. Those are automatically wrapped by a x-larastap::field to format them within the parent Container. Common attributes:

  • label
    The label to be displayed within the input field into the form, accordly to his formview
  • label_class
    CSS classes to be applied to the label, aside those automatically generated
  • label_width
    Width, in Bootstrap columns, of the label column. Can be a simple integer, to be used once for all Bootstrap's breakpoints, or an associative array containing the desired width for each target breackpoint, such as ["xs" => 4, "sm" => 3, "md" => 2]
  • input_width
    Width, in Bootstrap columns, of the input field column. Same rules as label_width
  • help
    An optional text to be displayed below the input field
  • pophelp
    An optional text to be displayed in a popover, aside the label. This is intended for long text, as an alternative to help. If you use this, remember to init Bootstrap's popovers
  • squeeze
    If true, the wrapping x-larastap::field (including the label) is omitted and just the input field is rendered
  • name
    HTML name of the input field. If matches with a property of the obj set into the parent Container, the input field is inited with the same value
  • nprefix
    Optional text to prepend to the name
  • npostfix
    Optional text to append to the name
  • value
    Value of the input field. If defined, will override the same value got from the obj object set into the parent Container
  • required
    True or false, if the input field has to be marked as mandatory for the user
  • disabled
    True or false, if the input field has to be marked as disabled for the user
  • readonly
    True or false, if the input field has to be marked as read only for the user
  • asplaintext
    True or false, valid only if disabled or readonly are true: if the input field has to be displayed as plaintext instead as a disabled input
  • placeholder
    Optional placeholder to display when the input field is empty
  • textappend
    If defined and not empty, will create a Bootstrap input group with this text appended to the input

Following, a complete list of components with their custom properties and notes about how common properties are managed in special cases.

x-larastrap::accordion Container
  • always_open
    Set to true if opening an inner panel will not close all others
x-larastrap::accordionitem Container
  • active
    Set to true to display the panel opened
  • label
    Text to be displayed into the opening header
  • label_html
    Use this attribute if you want to use HTML code in the header (plain label is escaped by Blade)
x-larastrap::btngroup Container
  • orientation
    Orientation of the button group. Valid values: horizontal (default), vertical
x-larastrap::button
  • color
    One of the colors described by Bootstrap. Of course you can define your own custom CSS classes and add more colors
  • label
    Text to be displayed into the button
  • postlabel
    A static text to be placed after the label
  • prelabel
    A static text to be placed before the label
  • triggers_modal
    If set, the button will be set up to trigger the modal identified by the selector here specified
x-larastrap::check Input
  • checked
    If set, overrides the content of value to determine if the checkbox must be flagged
  • switch
    True to render the checkbox as a switch
  • value
    The value of the checkbox. If it is a boolean, is it used to set the checkbox as flagged or not
x-larastrap::checks
  • button_classes
    Array of additional CSS classes to apply to all buttons within the component
  • color
    One of the colors described by Bootstrap. Of course you can define your own custom CSS classes and add more colors
  • npostfix
    If not defined, this is set to [] to enforce handling of submitted checked options as an array
  • options
    Associative array of options. May be a simple [value => label] array, otherwise "label" may be replaced by an object including the properties:
    • label: for the actual label
    • disabled: if set to true, the option is disabled
    • hidden: if set to true, the label is not displayed (but an invisible input radio is still rendered in HTML)
    • button_classes: array of CSS classes to be applied to the button; those are merged with the button_classes applied to the whole component
    • button_attributes: associative array of additional attributes for the label
x-larastrap::color Input
x-larastrap::date Input
x-larastrap::datetime Input
x-larastrap::email Input
x-larastrap::enclose Container
x-larastrap::field Container
x-larastrap::file Input
x-larastrap::form Container
  • action
    The action URL of the form
  • buttons
    An array of associative arrays for each buttons to display at the end of the form. Same properties as for the x-larastrap::button component. If you override the default buttons, remember to always add one having a ["type" => "submit"] attribute!
  • buttons_align
    Alignment of form buttons. Valid values: start, end, center
  • enctype
    The enctype of the form. Please note that file component already handles this transparently
  • formview
    Style to be applied to the form, determines layout of inner fields. Valid values: horizontal, vertical, inline, grid
  • gutter
    Used for fields spacing when formview is inline or grid
  • method
    The HTML method (GET, POST, DELETE, PUT...) of the form. If it is not GET, the @method and @csrf Blade directives are automatically managed
  • novalidate
    By default this is set to true, to leverage native Bootstrap validation
x-larastrap::hidden
x-larastrap::link
  • color
    One of the colors described by Bootstrap. Of course you can define your own custom CSS classes and add more colors
  • href
    URL to link. Default: #
  • label
    Text to be displayed into the link
  • postlabel
    A static text to be placed after the label
  • prelabel
    A static text to be placed before the label
  • triggers_modal
    If set, the link will be set up to trigger the modal identified by the selector here specified
x-larastrap::modal Container
  • buttons
    An array containing associative arrays for each buttons to display at the end of the modal. Same properties as for the button component. If you override the default buttons, keep in mind to have one button with a ["attributes" => ["data-bs-dismiss" => "modal"]] attribute to close the modal!
  • scrollable
    True if the modal has to be set as scrollable
  • size
    The size of the modal. Can be a string (sm, lg, xl...) or an array of Bootstrap classes, to include also fullscreen behaviours
  • title
    Title of the modal
x-larastrap::navbar
  • collapse
    Bootstrap's breakpoint at which the navbar have to collapse. Valid values: never, md, lg, xl, xxl
  • color
    One of the colors described by Bootstrap for navbars. Of course you can define your own custom CSS classes and add more colors
  • end_options
    Same as options, but buttons are displayed on the end side of the navbar
  • options
    Associative array of menu items. May be a simple [label => url] array, otherwise "url" may be replaced by an associative array including the properties:
    • url: the actual URL to link
    • active: if the menu item has to be highlighted. Note that Larastrap already tries to determine the currently active menu item, accordly to the current Route
    • attributes: associative array of additional attributes for the button
    • children: if a dropdown menu has be to generated, this must include another associative array recursively handled
  • title
    Title of the navbar
  • title_link
    Optional URL to link in the navbar title
x-larastrap::number Input
  • max
    The maximum value for the input
  • min
    The minimum value for the input
  • step
    The step value for the input
x-larastrap::password Input
x-larastrap::pophelp
  • text
    Text to display into the popover
x-larastrap::radios
  • button_classes
    Array of additional CSS classes to apply to all buttons within the component
  • color
    One of the colors described by Bootstrap. Of course you can define your own custom CSS classes and add more colors
  • options
    Associative array of options. May be a simple [value => label] array, otherwise "label" may be replaced by an object including the properties:
    • label: for the actual label
    • disabled: if set to true, the option is disabled
    • hidden: if set to true, the label is not displayed (but an invisible input radio is still rendered in HTML)
    • button_classes: array of CSS classes to be applied to the button; those are merged with the button_classes applied to the whole component
    • button_attributes: associative array of additional attributes for the label
x-larastrap::range Input
  • max
    The maximum value for the input
  • min
    The minimum value for the input
  • step
    The step value for the input
x-larastrap::select Input
  • multiple
    True for a multiple selection
  • npostfix
    If not defined, and multiple is active, this is set to [] to enforce handling of submitted selected options as an array
  • options
    Associative array of options. May be a simple [value => label] array, otherwise "label" may be replaced by an object including the properties:
    • label: for the actual label
    • disabled: if set to true, the option is disabled
    • children: if an optgroup has be to generated, this must include another associative array recursively handled
  • readonly
    If set to true, this forces the select to display as a static text with the selected option's label
x-larastrap::select-model
  • extra_options
    Optional associative array for addictional options into the select
  • multiple
    See x-larastrap::select
  • npostfix
    See x-larastrap::select
  • options
    A Collection of Eloquent Models; each will provide an option into the select
  • readonly
    See x-larastrap::select
  • translateCallback
    Optional function to provide the value and the content for each option into the select. Accepts an Eloquent Models, returns an array with two values: the first will be the value, the second will be the content
x-larastrap::tabpane Container
  • active
    Set to true to display the pane. Only one active pane is opened at once in tabs, and at least one pane have to be active. If set on at least one x-larastrap::tabpane within a x-larastrap::tabs, overrides the active property of the parent tabs
  • button_attributes
    Additional associative array of attributes for the tab
  • button_classes
    Additional array of CSS classes for the tab
x-larastrap::tabs Container
  • active
    Index of the tab you want to make active by default. To be used instead of the active property of child x-larastrap::tabpane. Usually you may want to set this to 0 (by default it is undefined)
  • tabview
    Style to be applied to the tabs. Valid values: tabs, pills
  • use_anchors
    Use <a> tags for tabs instead of <button>. Useful when you have tabs inside a form, to avoid triggering unwanted submit
x-larastrap::text Input
x-larastrap::textarea Input
x-larastrap::time Input
x-larastrap::url Input