View on GitLab

Inputs

Larastrap provides many components implementing the many HTML input types. 

<x-larastrap::form action="#" method="GET">
    <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::tel label="A Phone Number" />
    <x-larastrap::range label="A Range" />
    <x-larastrap::search label="A Search Input" />
    <x-larastrap::date label="A Date" />
    <x-larastrap::time label="A Time" />
    <x-larastrap::datetime label="Both Date and Time" />
    <x-larastrap::month label="A Month" />
    <x-larastrap::week label="A Week" />
    <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-8ee2f502ced3efa1937ee855ed61adef" class="" method="get" action="#" name="form-8ee2f502ced3efa1937ee855ed61adef">
  <input id="hidden-f203bcb2865b418007c956f5957deeb1" type="hidden" class="" name="5EHJ0PYpK5" value="">
  <div class="row mb-3">
    <label for="input-4c1cb61b90ad2c641b6c6d7545a73fef" class="col-4 col-form-label">A Text</label>
    <div class="col-8">
      <input id="input-4c1cb61b90ad2c641b6c6d7545a73fef" type="text" class="form-control" name="iDxBzhX5Tu" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="textarea-a7d9fa5f2dc8101a336cc2ecb5203d97" class="col-4 col-form-label">A Textarea</label>
    <div class="col-8">
      <textarea id="textarea-a7d9fa5f2dc8101a336cc2ecb5203d97" class="form-control" name="opYMuuch0j"></textarea>
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-863473b78a92bc1d4639b8f4041fcf87" class="col-4 col-form-label">A Number</label>
    <div class="col-8">
      <input id="input-863473b78a92bc1d4639b8f4041fcf87" type="number" class="form-control" name="5pkXvm4WHq" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-f70b19974f352422b54cc44babcb0a9d" class="col-4 col-form-label">An Email</label>
    <div class="col-8">
      <input id="input-f70b19974f352422b54cc44babcb0a9d" type="email" class="form-control" name="CiFLg9kOVp" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-dc353e77fa50bcb9ddf28828b259fd8b" class="col-4 col-form-label">A Password</label>
    <div class="col-8">
      <input id="input-dc353e77fa50bcb9ddf28828b259fd8b" type="password" class="form-control" name="ZDiUsykyaB" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-9857e07b7a79f183a84177167ff51a47" class="col-4 col-form-label">An URL</label>
    <div class="col-8">
      <input id="input-9857e07b7a79f183a84177167ff51a47" type="url" class="form-control" name="ybNDaWkcLy" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-c3a0cfcd247be829b94f0a6ee46d0d8a" class="col-4 col-form-label">A Phone Number</label>
    <div class="col-8">
      <input id="input-c3a0cfcd247be829b94f0a6ee46d0d8a" type="tel" class="form-control" name="CP4PVUcKjN" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-56f4c99487e6b6fd9dabfbad40dd7f87" class="col-4 col-form-label">A Range</label>
    <div class="col-8">
      <input id="input-56f4c99487e6b6fd9dabfbad40dd7f87" type="range" class="form-range" name="UAlIziqIsS" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-814459eef00d8b95ace13ddf1d50419d" class="col-4 col-form-label">A Search Input</label>
    <div class="col-8">
      <input id="input-814459eef00d8b95ace13ddf1d50419d" type="search" class="form-control" name="HvitRcqD0p" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-de555667f6003dcfcec5feb9cb413c5f" class="col-4 col-form-label">A Date</label>
    <div class="col-8">
      <input id="input-de555667f6003dcfcec5feb9cb413c5f" type="date" class="form-control" name="jE4Y0psCHD" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-86cfd979b7aaba9bb7697e35cd983bc0" class="col-4 col-form-label">A Time</label>
    <div class="col-8">
      <input id="input-86cfd979b7aaba9bb7697e35cd983bc0" type="time" class="form-control" name="8uVm4z7zML" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-f5cfad0813ef988ab00ddf6fd7401bdc" class="col-4 col-form-label">Both Date and Time</label>
    <div class="col-8">
      <input id="input-f5cfad0813ef988ab00ddf6fd7401bdc" type="datetime-local" class="form-control" name="4a0BZVw7yJ" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-6a29e84b1a026a63985be323a1e77185" class="col-4 col-form-label">A Month</label>
    <div class="col-8">
      <input id="input-6a29e84b1a026a63985be323a1e77185" type="month" class="form-control" name="OXljokXij5" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-bf608d35f107af978911aeae124d6126" class="col-4 col-form-label">A Week</label>
    <div class="col-8">
      <input id="input-bf608d35f107af978911aeae124d6126" type="week" class="form-control" name="rKZ6Er6MRk" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-0546d75bb969f6639a04e58908cedc72" class="col-4 col-form-label">A Color</label>
    <div class="col-8">
      <input id="input-0546d75bb969f6639a04e58908cedc72" type="color" class="form-control" name="gWoXsSH5fB" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="check-9755e87b0b147be3e8b91c221d99bda3" class="col-4 col-form-label">A Boolean</label>
    <div class="col-8">
      <div class="form-check mt-1">
        <input id="check-9755e87b0b147be3e8b91c221d99bda3" type="checkbox" class="form-check-input" name="r0Va95Zn1m">
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <label for="radios-d298055c4e235c198562086c52964f26" 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="I3JQDOMk5O" id="radios-d298055c4e235c198562086c52964f26-ee38e4d5dd68c4e440825018d549cb47" autocomplete="off" value="red"> <label class="btn btn-outline-primary" for="radios-d298055c4e235c198562086c52964f26-ee38e4d5dd68c4e440825018d549cb47">Red</label> <input type="radio" class="btn-check" name="I3JQDOMk5O" id="radios-d298055c4e235c198562086c52964f26-d382816a3cbeed082c9e216e7392eed1" autocomplete="off" value="green"> <label class="btn btn-outline-primary" for="radios-d298055c4e235c198562086c52964f26-d382816a3cbeed082c9e216e7392eed1">Green</label> <input type="radio" class="btn-check" name="I3JQDOMk5O" id="radios-d298055c4e235c198562086c52964f26-9594eec95be70e7b1710f730fdda33d9" autocomplete="off" value="blue"> <label class="btn btn-outline-primary" for="radios-d298055c4e235c198562086c52964f26-9594eec95be70e7b1710f730fdda33d9">Blue</label>
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <label for="checks-3003c8508e6afd79c3b49a52208b2033" 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-3003c8508e6afd79c3b49a52208b2033-ee38e4d5dd68c4e440825018d549cb47" autocomplete="off" value="red"> <label class="btn btn-outline-primary" for="checks-3003c8508e6afd79c3b49a52208b2033-ee38e4d5dd68c4e440825018d549cb47">Red</label> <input type="checkbox" class="btn-check" name="[]" id="checks-3003c8508e6afd79c3b49a52208b2033-d382816a3cbeed082c9e216e7392eed1" autocomplete="off" value="green"> <label class="btn btn-outline-primary" for="checks-3003c8508e6afd79c3b49a52208b2033-d382816a3cbeed082c9e216e7392eed1">Green</label> <input type="checkbox" class="btn-check" name="[]" id="checks-3003c8508e6afd79c3b49a52208b2033-9594eec95be70e7b1710f730fdda33d9" autocomplete="off" value="blue"> <label class="btn btn-outline-primary" for="checks-3003c8508e6afd79c3b49a52208b2033-9594eec95be70e7b1710f730fdda33d9">Blue</label>
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-44ce2c982e96ca718da5429b64cba4c8" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

All parameter assignable to the Field element are also directly appliable to Input elements: those will infer with the nodes wrapping the actual input component.

This is a text input 
<x-larastrap::text label="A Text" help="This is a text input" />
<x-larastrap::text label="Another Text" pophelp="This is another text input" />
<x-larastrap::text label_html="<strong>HTML label</strong>" label_class="text-danger" />
<x-larastrap::text placeholder="Full width input" squeeze />

<div class="row mb-3">
  <label for="input-44e911f4879d32844bf01c0707c32427" class="col-4 col-form-label">A Text</label>
  <div class="col-8">
    <input id="input-44e911f4879d32844bf01c0707c32427" type="text" class="form-control" name="Y91sLIoFpA" value="" aria-describedby="help-input-44e911f4879d32844bf01c0707c32427">
    <div class="form-text" id="help-input-44e911f4879d32844bf01c0707c32427">
      This is a text input
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="input-1b32bcd5332faf5415bd2947abd7712f" class="col-4 col-form-label">Another Text <span class="badge rounded-pill bg-primary" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="This is another text input">?</span></label>
  <div class="col-8">
    <input id="input-1b32bcd5332faf5415bd2947abd7712f" type="text" class="form-control" name="0xQS3zvQ6l" value="">
  </div>
</div>
<div class="row mb-3">
  <label for="input-8837f2f48e5bdc30dc00d262fb18441d" class="text-danger col-4 col-form-label"><strong>HTML label</strong></label>
  <div class="col-8">
    <input id="input-8837f2f48e5bdc30dc00d262fb18441d" type="text" class="form-control" name="W4tDq0oxm7" value="">
  </div>
</div><input id="input-0dc9e8ea1c3465ddab2858a5b81c4f83" type="text" class="form-control" name="B4IkhAw3hG" value="" placeholder="Full width input">

Many of the Input components in Larastrap provides their own specific parameters, described in dedicated pages of the documentation. Following, you find parameters valid for all of them.

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-35f4a8d465e6e1edc05f3d8ab658c551" class="" method="post" name="form-35f4a8d465e6e1edc05f3d8ab658c551">
  <input type="hidden" name="_token" value="2L461OI7tlxUG8shpEGpZmV5reqyFN7ildVHBJyB" autocomplete="off">
  <div class="row mb-3">
    <label for="input-ead3caac2fab39e3df759a5c079b101c" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-ead3caac2fab39e3df759a5c079b101c" type="text" class="form-control" name="name" value="Jules Wunsch">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-bc651957aef2374f553acf2332819bc4" 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-2a38a4a9316c49e5a833517c45d31070" class="" method="post" name="form-2a38a4a9316c49e5a833517c45d31070">
  <input type="hidden" name="_token" value="2L461OI7tlxUG8shpEGpZmV5reqyFN7ildVHBJyB" autocomplete="off">
  <div class="row mb-3">
    <label for="input-d44ad6ec1fd03cf21aed5d292354c90a" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-d44ad6ec1fd03cf21aed5d292354c90a" type="text" class="form-control" name="name[]" value="Gerard McGlynn">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-cc6d6fb1e19c7fe833828fe1be08acc6" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-cc6d6fb1e19c7fe833828fe1be08acc6" type="text" class="form-control" name="name[]" value="Eliezer Luettgen">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-8dea8e9b438076cd0e99bc5916b81e9a" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-8dea8e9b438076cd0e99bc5916b81e9a" type="text" class="form-control" name="name[]" value="Geraldine Abshire IV">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-e39fd20459526907acf115ca64285544" 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.

€
Mr.
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-459f6db9ddeda95b314b19683ecf3f44" class="col-4 col-form-label">Price</label>
  <div class="col-8">
    <div class="input-group">
      <input id="input-459f6db9ddeda95b314b19683ecf3f44" type="number" class="form-control" name="5T6lJtiiWl" value=""> <span class="input-group-text">€</span>
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="input-7e01b04404935a973af4e58da17ec512" 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-7e01b04404935a973af4e58da17ec512" type="text" class="form-control" name="YwcwOJVonr" value="">
    </div>
  </div>
</div>
<div class="row mb-3">
  <label for="input-ce83aeef4d0b9a1ed564103f7b576945" 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-ce83aeef4d0b9a1ed564103f7b576945" type="text" class="form-control" name="hPN1EzooHz" value=""> <span class="input-group-text">@example.com</span>
    </div>
  </div>
</div>

readonly / disabled

The readonly and disabled parameters are both handled by default converting the value of the input field in plain text. If you want to preserve the classic behavior (an actual input field which is read-only or disabled), just use the asplaintext parameter (as any other parameter it can be defined once in your application's global configuration). 

<x-larastrap::text name="name" label="Name (readonly)" readonly value="Test" />
<x-larastrap::text name="name" label="Name (disabled)" disabled value="Test" />
<x-larastrap::text name="name" label="Name (readonly not text)" readonly asplaintext="false" value="Test" />
<x-larastrap::text name="name" label="Name (disabled not text)" disabled asplaintext="false" value="Test" />

<div class="row mb-3">
  <label for="input-27ea77bfae0180341ede769cb85dde42" class="col-4 col-form-label">Name (readonly)</label>
  <div class="col-8">
    <input id="input-27ea77bfae0180341ede769cb85dde42" type="text" class="form-control-plaintext" name="name" value="Test" readonly>
  </div>
</div>
<div class="row mb-3">
  <label for="input-627cc4a543f29c409d9af23e01def975" class="col-4 col-form-label">Name (disabled)</label>
  <div class="col-8">
    <input id="input-627cc4a543f29c409d9af23e01def975" type="text" class="form-control-plaintext" name="name" value="Test" disabled>
  </div>
</div>
<div class="row mb-3">
  <label for="input-a0ba6c294c898571ae6604e2e628feb8" class="col-4 col-form-label">Name (readonly not text)</label>
  <div class="col-8">
    <input id="input-a0ba6c294c898571ae6604e2e628feb8" type="text" class="form-control" name="name" value="Test" readonly>
  </div>
</div>
<div class="row mb-3">
  <label for="input-faa17c1d8b72a365b61a2e8a98f93baa" class="col-4 col-form-label">Name (disabled not text)</label>
  <div class="col-8">
    <input id="input-faa17c1d8b72a365b61a2e8a98f93baa" type="text" class="form-control" name="name" value="Test" disabled>
  </div>
</div>