Inputs

Larastrap provides multiple components implementing the many HTML input types. Some of them have specific parameters.

A Text

A Textarea

A Number

An Email

A Password

An URL

A Range

A Date

A Time

Both Date and Time

A Color

A Boolean

Choose One

Red Green Blue

Choose Many

Red Green Blue

<x-larastrap::form>
    <x-larastrap::hidden />
    <x-larastrap::text label="A Text" />
    <x-larastrap::textarea label="A Textarea" />
    <x-larastrap::number label="A Number" />
    <x-larastrap::email label="An Email" />
    <x-larastrap::password label="A Password" />
    <x-larastrap::url label="An URL" />
    <x-larastrap::range label="A Range" />
    <x-larastrap::date label="A Date" />
    <x-larastrap::time label="A Time" />
    <x-larastrap::datetime label="Both Date and Time" />
    <x-larastrap::color label="A Color" />
    <x-larastrap::check label="A Boolean" />
    <x-larastrap::radios label="Choose One" :options="['red' => 'Red', 'green' => 'Green', 'blue' => 'Blue']" />
    <x-larastrap::checks label="Choose Many" :options="['red' => 'Red', 'green' => 'Green', 'blue' => 'Blue']" />
</x-larastrap::form>

<form id="form-c0c7c76d30bd3dcaefc96f40275bdc0a" class="" method="post" name="form-c0c7c76d30bd3dcaefc96f40275bdc0a">
  <input type="hidden" name="_token" value="kFjt7rmq6e40yNtoYx0uWygLTMkxGXVhOJpGzpf9"> <input id="hidden-c91139f4db74163c448e9eef2e1b8676" type="hidden" class="" name="iSznIVORtV" value="">
  <div class="row mb-3">
    <label for="input-10b5659ff6ac43bb9b8094643beaa3f0" class="col-4 col-form-label">A Text</label>
    <div class="col-8">
      <input id="input-10b5659ff6ac43bb9b8094643beaa3f0" type="text" class="form-control" name="fmvZJtoFg7" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="textarea-eef81c1daeed640f644804b6c4b282d2" class="col-4 col-form-label">A Textarea</label>
    <div class="col-8">
      <textarea id="textarea-eef81c1daeed640f644804b6c4b282d2" class="form-control" name="IbjkBt4xgh"></textarea>
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-2e1471d2063f163abc246d4807d845a1" class="col-4 col-form-label">A Number</label>
    <div class="col-8">
      <input id="input-2e1471d2063f163abc246d4807d845a1" type="number" class="form-control" name="l69DpoPrUL" value="" step="1" min="-9223372036854775808" max="9223372036854775807">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-1ea10dde13ed6a3c2e36827b89ed162f" class="col-4 col-form-label">An Email</label>
    <div class="col-8">
      <input id="input-1ea10dde13ed6a3c2e36827b89ed162f" type="email" class="form-control" name="YhbuDA5vOO" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-a386df4081ab6f22553207ee317d1b3b" class="col-4 col-form-label">A Password</label>
    <div class="col-8">
      <input id="input-a386df4081ab6f22553207ee317d1b3b" type="password" class="form-control" name="8mbAmlJRis" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-f5b25f38e81cb9fbfaa9ce608cae470a" class="col-4 col-form-label">An URL</label>
    <div class="col-8">
      <input id="input-f5b25f38e81cb9fbfaa9ce608cae470a" type="url" class="form-control" name="09MbxL0TrT" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-538037c0e8962b0e98f54b46b61fa512" class="col-4 col-form-label">A Range</label>
    <div class="col-8">
      <input id="input-538037c0e8962b0e98f54b46b61fa512" type="range" class="form-range" name="RszHfsf3oY" value="" step="1" min="-9223372036854775808" max="9223372036854775807">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-cfa4d8eeb316a22cc8a3b1444800b759" class="col-4 col-form-label">A Date</label>
    <div class="col-8">
      <input id="input-cfa4d8eeb316a22cc8a3b1444800b759" type="date" class="form-control" name="s2jwnDtJ3R" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-ac396fde3e3fd747e2a95858480bbec6" class="col-4 col-form-label">A Time</label>
    <div class="col-8">
      <input id="input-ac396fde3e3fd747e2a95858480bbec6" type="time" class="form-control" name="poNjko1tyt" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-6bf3c7e1412c701f9073d5f4f95b438c" class="col-4 col-form-label">Both Date and Time</label>
    <div class="col-8">
      <input id="input-6bf3c7e1412c701f9073d5f4f95b438c" type="datetime-local" class="form-control" name="L5gvfjqJgH" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-49bd1f728e0b2fb9a5d9c3fd1e27768a" class="col-4 col-form-label">A Color</label>
    <div class="col-8">
      <input id="input-49bd1f728e0b2fb9a5d9c3fd1e27768a" type="color" class="form-control" name="nvCrlvczKw" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="check-59bb9c339dde77292c5aab25a57681e4" class="col-4 col-form-label">A Boolean</label>
    <div class="col-8">
      <div class="form-check mt-1">
        <input id="check-59bb9c339dde77292c5aab25a57681e4" type="checkbox" class="form-check-input" name="kIgmY2tDWW">
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <label for="radios-5d46294fd1ac1f1198c417b97b04dca8" class="col-4 col-form-label">Choose One</label>
    <div class="col-8">
      <div class="btn-group" role="group">
        <input type="radio" class="btn-check" name="2blf8BGaHJ" id="radios-5d46294fd1ac1f1198c417b97b04dca8-ee38e4d5dd68c4e440825018d549cb47" autocomplete="off" value="red"> <label class="btn btn-outline-primary" for="radios-5d46294fd1ac1f1198c417b97b04dca8-ee38e4d5dd68c4e440825018d549cb47">Red</label> <input type="radio" class="btn-check" name="2blf8BGaHJ" id="radios-5d46294fd1ac1f1198c417b97b04dca8-d382816a3cbeed082c9e216e7392eed1" autocomplete="off" value="green"> <label class="btn btn-outline-primary" for="radios-5d46294fd1ac1f1198c417b97b04dca8-d382816a3cbeed082c9e216e7392eed1">Green</label> <input type="radio" class="btn-check" name="2blf8BGaHJ" id="radios-5d46294fd1ac1f1198c417b97b04dca8-9594eec95be70e7b1710f730fdda33d9" autocomplete="off" value="blue"> <label class="btn btn-outline-primary" for="radios-5d46294fd1ac1f1198c417b97b04dca8-9594eec95be70e7b1710f730fdda33d9">Blue</label>
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <label for="checks-5f99c7905f98214d297095a1d6c15955" class="col-4 col-form-label">Choose Many</label>
    <div class="col-8">
      <div class="btn-group" role="group">
        <input type="checkbox" class="btn-check" name="[]" id="checks-5f99c7905f98214d297095a1d6c15955-ee38e4d5dd68c4e440825018d549cb47" autocomplete="off" value="red"> <label class="btn btn-outline-primary" for="checks-5f99c7905f98214d297095a1d6c15955-ee38e4d5dd68c4e440825018d549cb47">Red</label> <input type="checkbox" class="btn-check" name="[]" id="checks-5f99c7905f98214d297095a1d6c15955-d382816a3cbeed082c9e216e7392eed1" autocomplete="off" value="green"> <label class="btn btn-outline-primary" for="checks-5f99c7905f98214d297095a1d6c15955-d382816a3cbeed082c9e216e7392eed1">Green</label> <input type="checkbox" class="btn-check" name="[]" id="checks-5f99c7905f98214d297095a1d6c15955-9594eec95be70e7b1710f730fdda33d9" autocomplete="off" value="blue"> <label class="btn btn-outline-primary" for="checks-5f99c7905f98214d297095a1d6c15955-9594eec95be70e7b1710f730fdda33d9">Blue</label>
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-89cd2949e54c73ffe64e174f2b24edb8" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

name

The name parameter has two purposes: assign the relative HTML attribute to the input node, and access the same-named attribute of the undelying obj assigned to the parent x-larastrap::form .

@php

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

@endphp

<x-larastrap::form :obj="$obj">
    <x-larastrap::text name="name" label="Name" />
</x-larastrap::form>

<form id="form-f0935e4cd5920aa6c7c996a5ee53a70f" class="" method="post" name="form-f0935e4cd5920aa6c7c996a5ee53a70f">
  <input type="hidden" name="_token" value="kFjt7rmq6e40yNtoYx0uWygLTMkxGXVhOJpGzpf9">
  <div class="row mb-3">
    <label for="input-8034059232807a1dbe2f3acaf6675f0f" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-8034059232807a1dbe2f3acaf6675f0f" type="text" class="form-control" name="name" value="Dr. Darrin Hamill">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-92834936022334297476bf04bd4a8850" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

nprefix / npostfix

With nprefix and npostfix it is possible to prepend or append a string to the actual HTML "name" attribute of the node. This permits to decouple from the name of the obj attribute you want to use to populate the input field.

Useful in particular to handle arrays of objects within a form.

@php

$users = App\Models\User::inRandomOrder()->take(3)->get();

@endphp

<x-larastrap::form>
    @foreach($users as $user)
        <x-larastrap::enclose :obj="$user">
            <x-larastrap::text name="name" label="Name" npostfix="[]" />
        </x-larastrap::enclose>
    @endforeach
</x-larastrap::form>

<form id="form-9b8619251a19057cff70779273e95aa6" class="" method="post" name="form-9b8619251a19057cff70779273e95aa6">
  <input type="hidden" name="_token" value="kFjt7rmq6e40yNtoYx0uWygLTMkxGXVhOJpGzpf9">
  <div class="row mb-3">
    <label for="input-dda5641a18d4c0ebac2fc71b31af6292" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-dda5641a18d4c0ebac2fc71b31af6292" type="text" class="form-control" name="name[]" value="Dr. Pasquale Borer IV">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-bb3703e5571bfa0056df1671bc8d0b59" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-bb3703e5571bfa0056df1671bc8d0b59" type="text" class="form-control" name="name[]" value="Mr. Cyril Adams">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-4c1b5b9bd80d565c369b91b7230bd63e" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-4c1b5b9bd80d565c369b91b7230bd63e" type="text" class="form-control" name="name[]" value="Amaya Beer">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-9a598bf58ffa730c166013b86b7d6494" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

textprepend / textappend

When set with a value, the textprepend and textappend parameters enforces the creation of a Bootstrap's "input group" and the addiction of an explicit label before or after the input field itself.

Price

€

Name

Mr.

Composed email

user. @example.com

<x-larastrap::number label="Price" textappend="€" />
<x-larastrap::text label="Name" textprepend="Mr." />
<x-larastrap::text label="Composed email" textprepend="user." textappend="@example.com" />

<div class="row mb-3">
  <label for="input-c0f675f4570d4a23568e1c6c685ea924" class="col-4 col-form-label">Price</label>
  <div class="col-8">
    <div class="input-group">
      <input id="input-c0f675f4570d4a23568e1c6c685ea924" type="number" class="form-control" name="xGJIHOKOBQ" value="" step="1" min="-9223372036854775808" max="9223372036854775807"> <span class="input-group-text">€</span>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="input-063831d980f6aa7adc990f3c5b9b4db4" class="col-4 col-form-label">Name</label>
  <div class="col-8">
    <div class="input-group">
      <span class="input-group-text">Mr.</span> <input id="input-063831d980f6aa7adc990f3c5b9b4db4" type="text" class="form-control" name="4GpBfDMx9G" value="">
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="input-b3968115e168835c17d21776de9caf18" class="col-4 col-form-label">Composed email</label>
  <div class="col-8">
    <div class="input-group">
      <span class="input-group-text">user.</span> <input id="input-b3968115e168835c17d21776de9caf18" type="text" class="form-control" name="7Ym6ZYrmm7" value=""> <span class="input-group-text">@example.com</span>
    </div>
  </div>
</div>

inline

By default, within a x-larastrap::form , checkboxes follow the same layout of other input fields: the label is placed in the left column (when formview is horizontal ) or above the input itself (when formview is vertical ).

To obtain a layout more aligned to Bootstrap's practises, it is possible to use the inline parameter: the label will be moved aside the input checkbox.

<x-larastrap::form formview="horizontal">
    <div class="alert alert-info">Horizontal form, non-inline checkbox</div>
    <x-larastrap::text label="Reference Text" />
    <x-larastrap::check label="Non-Inline Check" />
</x-larastrap::form>

<hr>

<x-larastrap::form formview="vertical">
    <div class="alert alert-info">Vertical form, non-inline checkbox</div>
    <x-larastrap::text label="Reference Text" />
    <x-larastrap::check label="Non-Inline Check" />
</x-larastrap::form>

<hr>

<x-larastrap::form formview="horizontal">
    <div class="alert alert-info">Horizontal form, inline checkbox</div>
    <x-larastrap::text label="Reference Text" />
    <x-larastrap::check label="Inline Check" inline />
</x-larastrap::form>

<hr>

<x-larastrap::form formview="vertical">
    <div class="alert alert-info">Vertical form, inline checkbox</div>
    <x-larastrap::text label="Reference Text" />
    <x-larastrap::check label="Inline Check" inline />
</x-larastrap::form>

<form id="form-274ad4786c3abca69fa097b85867d9a4" class="" method="post" name="form-274ad4786c3abca69fa097b85867d9a4">
  <input type="hidden" name="_token" value="kFjt7rmq6e40yNtoYx0uWygLTMkxGXVhOJpGzpf9">
  <div class="alert alert-info">
    Horizontal form, non-inline checkbox
  </div>
  <div class="row mb-3">
    <label for="input-e4627ac5f2950a0115ae401311c3523b" class="col-4 col-form-label">Reference Text</label>
    <div class="col-8">
      <input id="input-e4627ac5f2950a0115ae401311c3523b" type="text" class="form-control" name="b14sjphw0D" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="check-f45f25f47099c13badb369df2bb088a3" class="col-4 col-form-label">Non-Inline Check</label>
    <div class="col-8">
      <div class="form-check mt-1">
        <input id="check-f45f25f47099c13badb369df2bb088a3" type="checkbox" class="form-check-input" name="dXFlbeRx58">
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-9b7035d968afb6c9bfc16b9bbda58a93" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>
<hr>
<form id="form-1534b76d325a8f591b52d302e7181331" class="" method="post" name="form-1534b76d325a8f591b52d302e7181331">
  <input type="hidden" name="_token" value="kFjt7rmq6e40yNtoYx0uWygLTMkxGXVhOJpGzpf9">
  <div class="alert alert-info">
    Vertical form, non-inline checkbox
  </div>
  <div class="mb-3">
    <label for="input-792f8af2cf95939a325433fbfd1a3932" class="form-label">Reference Text</label> <input id="input-792f8af2cf95939a325433fbfd1a3932" type="text" class="form-control" name="6YAlc26GKY" value="">
  </div>
  <div class="mb-3">
    <label for="check-54340d742fb6cb460c13f711103e38aa" class="form-label">Non-Inline Check</label>
    <div class="form-check mt-1">
      <input id="check-54340d742fb6cb460c13f711103e38aa" type="checkbox" class="form-check-input" name="gGi1PUswQQ">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-9c732ff86361512792a0b41890d8f0ed" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>
<hr>
<form id="form-ec8ce6abb3e952a85b8551ba726a1227" class="" method="post" name="form-ec8ce6abb3e952a85b8551ba726a1227">
  <input type="hidden" name="_token" value="kFjt7rmq6e40yNtoYx0uWygLTMkxGXVhOJpGzpf9">
  <div class="alert alert-info">
    Horizontal form, inline checkbox
  </div>
  <div class="row mb-3">
    <label for="input-aee9a5f3cd5352f04b6bc5ed91833413" class="col-4 col-form-label">Reference Text</label>
    <div class="col-8">
      <input id="input-aee9a5f3cd5352f04b6bc5ed91833413" type="text" class="form-control" name="lkSF7TkYSO" value="">
    </div>
  </div>
  <div class="row mb-3">
    <div class="col-8">
      <div class="form-check mt-1">
        <input id="check-3a4499f4f349eeb781ae41610f16ce46" type="checkbox" class="form-check-input" name="dl72OJHU6z"> <label for="check-3a4499f4f349eeb781ae41610f16ce46" class="">Inline Check</label>
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-ccc572c3baa13391b85652145c80adc4" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>
<hr>
<form id="form-57aeee35c98205091e18d1140e9f38cf" class="" method="post" name="form-57aeee35c98205091e18d1140e9f38cf">
  <input type="hidden" name="_token" value="kFjt7rmq6e40yNtoYx0uWygLTMkxGXVhOJpGzpf9">
  <div class="alert alert-info">
    Vertical form, inline checkbox
  </div>
  <div class="mb-3">
    <label for="input-c5048c1cec27925d313757cff7d6915c" class="form-label">Reference Text</label> <input id="input-c5048c1cec27925d313757cff7d6915c" type="text" class="form-control" name="SITcZC1OCZ" value="">
  </div>
  <div class="mb-3">
    <div class="form-check mt-1">
      <input id="check-3e0b937ece48def4569deb7a6b73396f" type="checkbox" class="form-check-input" name="oD82REqGTa"> <label for="check-3e0b937ece48def4569deb7a6b73396f" class="">Inline Check</label>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-51c58793e9c0a528e23d9cb944cb528a" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

number and range

x-larastrap::number and x-larastrap::range have - like the equivalent HTML input elements - a few parameters that permit to alter the behavior (and the validation) of them.

Write a Value

Slide a Value

<x-larastrap::number label="Write a Value" min="5" max="20" step="2" />
<x-larastrap::range label="Slide a Value" min="10" max="20" step="2" />

<div class="row mb-3">
  <label for="input-9f5c9f55297c98a776263a5e4a0f24e2" class="col-4 col-form-label">Write a Value</label>
  <div class="col-8">
    <input id="input-9f5c9f55297c98a776263a5e4a0f24e2" type="number" class="form-control" name="0bsa5hsVWN" value="" step="2" min="5" max="20">
  </div>
</div>
<div class="row mb-3">
  <label for="input-c6dd1fa6c30b67278f587be2e5678261" class="col-4 col-form-label">Slide a Value</label>
  <div class="col-8">
    <input id="input-c6dd1fa6c30b67278f587be2e5678261" type="range" class="form-range" name="TQ0LwnfNaI" value="" step="2" min="10" max="20">
  </div>
</div>

Intro

Components

Forms

Containers

Custom Elements

More