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-19ca14e7ea6328a42e0eb13d585e4c22" class="" method="post" name="form-19ca14e7ea6328a42e0eb13d585e4c22">
  <input type="hidden" name="_token" value="fe6KcRT0wbJKtf8a90smDuJlJlZ8a8VL7LNBqvWt"> <input id="hidden-a7bd504ab7953c008015f35502c10c4c" type="hidden" class="" name="OLPE6r0IoZ" value="">
  <div class="row mb-3">
    <label for="input-64a62206e680ed6a18777e2898f2004e" class="col-4 col-form-label">A Text</label>
    <div class="col-8">
      <input id="input-64a62206e680ed6a18777e2898f2004e" type="text" class="form-control" name="JsLao0PAqD" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="textarea-1d194c330ce4627719b19b11f38209fb" class="col-4 col-form-label">A Textarea</label>
    <div class="col-8">
      <textarea id="textarea-1d194c330ce4627719b19b11f38209fb" class="form-control" name="O0P8e3yTul"></textarea>
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-5859c0109ff9f111f373052dfca30c9d" class="col-4 col-form-label">A Number</label>
    <div class="col-8">
      <input id="input-5859c0109ff9f111f373052dfca30c9d" type="number" class="form-control" name="W2W3AqIYiS" value="" step="1" min="-9223372036854775808" max="9223372036854775807">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-b718d4f360639b514488287a516b40bb" class="col-4 col-form-label">An Email</label>
    <div class="col-8">
      <input id="input-b718d4f360639b514488287a516b40bb" type="email" class="form-control" name="xJukA7d50R" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-7ce0e1870b95d6f1f09ec35e025edbc2" class="col-4 col-form-label">A Password</label>
    <div class="col-8">
      <input id="input-7ce0e1870b95d6f1f09ec35e025edbc2" type="password" class="form-control" name="Q79wSmPszA" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-36b2ec4e25dac54294c6ba9fa79a8b9e" class="col-4 col-form-label">An URL</label>
    <div class="col-8">
      <input id="input-36b2ec4e25dac54294c6ba9fa79a8b9e" type="url" class="form-control" name="LTMcK8dh5s" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-dbce3a2e43567e752856100540707839" class="col-4 col-form-label">A Range</label>
    <div class="col-8">
      <input id="input-dbce3a2e43567e752856100540707839" type="range" class="form-range" name="88a1FRwVDi" value="" step="1" min="-9223372036854775808" max="9223372036854775807">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-11f89f6de237e0a4de1cd8e6a1dc8d1f" class="col-4 col-form-label">A Date</label>
    <div class="col-8">
      <input id="input-11f89f6de237e0a4de1cd8e6a1dc8d1f" type="date" class="form-control" name="KLS7NZhaGa" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-67ba35af9a939abe73259f7875d7378f" class="col-4 col-form-label">A Time</label>
    <div class="col-8">
      <input id="input-67ba35af9a939abe73259f7875d7378f" type="time" class="form-control" name="dX2Cj1W1tX" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-70c044b5aa90a42f3f076075d9f97cb6" class="col-4 col-form-label">Both Date and Time</label>
    <div class="col-8">
      <input id="input-70c044b5aa90a42f3f076075d9f97cb6" type="datetime-local" class="form-control" name="BHjw5vJSwB" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-f270a1a8add94806e62701547284ab7e" class="col-4 col-form-label">A Color</label>
    <div class="col-8">
      <input id="input-f270a1a8add94806e62701547284ab7e" type="color" class="form-control" name="mgXzdWH2dR" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="check-926cad8c78d8518bd58b8d2513026c23" class="col-4 col-form-label">A Boolean</label>
    <div class="col-8">
      <div class="form-check mt-1">
        <input id="check-926cad8c78d8518bd58b8d2513026c23" type="checkbox" class="form-check-input" name="kmBYc50nf2" value="">
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <label for="radios-8869fac18c2248d10aa26ab256f7a340" class="col-4 col-form-label 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="sTNuTSsvRF" id="radios-8869fac18c2248d10aa26ab256f7a340-ee38e4d5dd68c4e440825018d549cb47" autocomplete="off" value="red"> <label class="btn btn-outline-primary" for="radios-8869fac18c2248d10aa26ab256f7a340-ee38e4d5dd68c4e440825018d549cb47">Red</label> <input type="radio" class="btn-check" name="sTNuTSsvRF" id="radios-8869fac18c2248d10aa26ab256f7a340-d382816a3cbeed082c9e216e7392eed1" autocomplete="off" value="green"> <label class="btn btn-outline-primary" for="radios-8869fac18c2248d10aa26ab256f7a340-d382816a3cbeed082c9e216e7392eed1">Green</label> <input type="radio" class="btn-check" name="sTNuTSsvRF" id="radios-8869fac18c2248d10aa26ab256f7a340-9594eec95be70e7b1710f730fdda33d9" autocomplete="off" value="blue"> <label class="btn btn-outline-primary" for="radios-8869fac18c2248d10aa26ab256f7a340-9594eec95be70e7b1710f730fdda33d9">Blue</label>
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <label for="checks-f56bbdda9ea38203344a86346da39713" class="col-4 col-form-label 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-f56bbdda9ea38203344a86346da39713-ee38e4d5dd68c4e440825018d549cb47" autocomplete="off" value="red"> <label class="btn btn-outline-primary" for="checks-f56bbdda9ea38203344a86346da39713-ee38e4d5dd68c4e440825018d549cb47">Red</label> <input type="checkbox" class="btn-check" name="[]" id="checks-f56bbdda9ea38203344a86346da39713-d382816a3cbeed082c9e216e7392eed1" autocomplete="off" value="green"> <label class="btn btn-outline-primary" for="checks-f56bbdda9ea38203344a86346da39713-d382816a3cbeed082c9e216e7392eed1">Green</label> <input type="checkbox" class="btn-check" name="[]" id="checks-f56bbdda9ea38203344a86346da39713-9594eec95be70e7b1710f730fdda33d9" autocomplete="off" value="blue"> <label class="btn btn-outline-primary" for="checks-f56bbdda9ea38203344a86346da39713-9594eec95be70e7b1710f730fdda33d9">Blue</label>
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-17a86096eb37fa07532941e342d3cbf5" 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-28dd2c7955ce926456240b2ff0100bde" class="" method="post" name="form-28dd2c7955ce926456240b2ff0100bde">
  <input type="hidden" name="_token" value="fe6KcRT0wbJKtf8a90smDuJlJlZ8a8VL7LNBqvWt">
  <div class="row mb-3">
    <label for="input-106603305c686e0e10a29ca7a761ff46" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-106603305c686e0e10a29ca7a761ff46" type="text" class="form-control" name="name" value="Amaya Beer">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-4aa8984e1ca6ceea7ce3e093156053df" 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-e2ef524fbf3d9fe611d5a8e90fefdc9c" class="" method="post" name="form-e2ef524fbf3d9fe611d5a8e90fefdc9c">
  <input type="hidden" name="_token" value="fe6KcRT0wbJKtf8a90smDuJlJlZ8a8VL7LNBqvWt">
  <div class="row mb-3">
    <label for="input-e90360edf81f7a520ce670700f2090d7" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-e90360edf81f7a520ce670700f2090d7" type="text" class="form-control" name="name[]" value="Dr. Gardner Medhurst">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-4efd7d7444b5c4b69a9d32e33112c270" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-4efd7d7444b5c4b69a9d32e33112c270" type="text" class="form-control" name="name[]" value="Miss Earnestine Lowe">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-7e093674e96cb1e65d503a138bdde7a6" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-7e093674e96cb1e65d503a138bdde7a6" type="text" class="form-control" name="name[]" value="Dr. Pasquale Borer IV">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-d2468b0704a733901d45f2f6a182d1a6" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

textappend

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

Price

€

<x-larastrap::number label="Price" textappend="€" />

<div class="row mb-3">
  <label for="input-23d20e20c811fbd37858f1b4a890044a" class="col-4 col-form-label">Price</label>
  <div class="col-8">
    <div class="input-group">
      <input id="input-23d20e20c811fbd37858f1b4a890044a" type="number" class="form-control" name="rJqVW2z4wf" value="" step="1" min="-9223372036854775808" max="9223372036854775807"> <span class="input-group-text">€</span>
    </div>
  </div>
</div>

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-05fab867552bf7bfc4969b46cff2a5bb" class="col-4 col-form-label">Write a Value</label>
  <div class="col-8">
    <input id="input-05fab867552bf7bfc4969b46cff2a5bb" type="number" class="form-control" name="djA9Dk6qEd" value="" step="2" min="5" max="20">
  </div>
</div>
<div class="row mb-3">
  <label for="input-df8a5cd5816ad0afdedac88d49da6b60" class="col-4 col-form-label">Slide a Value</label>
  <div class="col-8">
    <input id="input-df8a5cd5816ad0afdedac88d49da6b60" type="range" class="form-range" name="zytmxCpp4B" value="" step="2" min="10" max="20">
  </div>
</div>

Intro

Components

Forms

Containers

Custom Elements

More

Inputs

name

nprefix / npostfix

textappend

number and range

Larastrap