View on GitLab

Fields

A x-larastrap::field usually wraps an input within a x-larastrap::form , and is responsible for the layout of the input itself and his label. Each input field provides to init his own wrapping x-larastrap::field (until the squeeze parameter is not set to true ), and there is no need to manually place it, but it is possible to create your own fields to wrap custom elements.

All of the following parameters can be passed to an Input element, to be applied to his implicit wrapping Field.

label

The base parameter for a field is his label , used as a description for the child content (which usually is an input box, but can be anything else).

Name

<x-larastrap::field label="Name">
    <img src="https://picsum.photos/100">
</x-larastrap::field>

<div class="row mb-3">
  <label for="field-b0737bf337ea4e463d811f675f401491" class="col-4 col-form-label">Name</label>
  <div class="col-8">
    <img src="https://picsum.photos/100">
  </div>
</div>

label_class

The label can be customized assigning one or more CSS classes, using the label_class parameter.

Name

<x-larastrap::field label="Name" label_class="text-danger">
    <img src="https://picsum.photos/100">
</x-larastrap::field>

<div class="row mb-3">
  <label for="field-3aebdf7b6c19a598603432dde434fc77" class="text-danger col-4 col-form-label">Name</label>
  <div class="col-8">
    <img src="https://picsum.photos/100">
  </div>
</div>

label_html

If you want to use a completely custom HTML label, you have to use the label_html parameter instead of label . Entities in plain label are escaped; when using label_html , those are not.

Name

<x-larastrap::field label_html="<strong>Name</strong>">
    <img src="https://picsum.photos/100">
</x-larastrap::field>

<div class="row mb-3">
  <label for="field-b7416c9cb9434e8c2034b3ef9a0527eb" class="col-4 col-form-label"><strong>Name</strong></label>
  <div class="col-8">
    <img src="https://picsum.photos/100">
  </div>
</div>

label / input width

With the label_width and input_width parameters it is possible to define the width of each column, within the twelve columns system of Bootstrap. You can specify both an absolute value, or an array of breakpoints to obtain a responsive layout.

Name

Here, the width of label's and input's columns vary accordingly to the responsive breakpoint.

<x-larastrap::field label="Name" label_width="6" input_width="6">
    <img src="https://picsum.photos/100">
</x-larastrap::field>

<br>

<x-larastrap::field label="Name" label_width="2" input_width="10">
    <img src="https://picsum.photos/100">
</x-larastrap::field>

<br>

<x-larastrap::field label="Name" :label_width="['md' => 4, 'lg' => 3]" :input_width="['md' => 8, 'lg' => 9]">
    <img src="https://picsum.photos/100">

    <p>
        Here, the width of label's and input's columns vary accordingly to the responsive breakpoint.
    </p>
</x-larastrap::field>

<div class="row mb-3">
  <label for="field-1a76f2853c512373d39dd7540f33aec8" class="col-6 col-form-label">Name</label>
  <div class="col-6">
    <img src="https://picsum.photos/100">
  </div>
</div><br>
<div class="row mb-3">
  <label for="field-8cb7146cd9521bee38fe87ea99ea9ff3" class="col-2 col-form-label">Name</label>
  <div class="col-10">
    <img src="https://picsum.photos/100">
  </div>
</div><br>
<div class="row mb-3">
  <label for="field-7a1ff13cc08f63c5d36c660995f7b170" class="col-md-4 col-lg-3 col-form-label">Name</label>
  <div class="col-md-8 col-lg-9">
    <img src="https://picsum.photos/100">
    <p>
      Here, the width of label's and input's columns vary accordingly to the responsive breakpoint.
    </p>
  </div>
</div>

Those parameter are inherited from the parent Container, to avoid to specify for each field. Even better: it is recommended to define those value in the Larastrap's global configuration, once and for all the application, and override them only when required for specific and occasional edge cases.

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

<form id="form-6364d3f0f495b6ab9dcf8d3b5c6e0b01" class="" method="post" name="form-6364d3f0f495b6ab9dcf8d3b5c6e0b01">
  <input type="hidden" name="_token" value="pg6Wq9YUsivEczx9lVdwBBaDmR5506UkdJ9RDI7G" autocomplete="off">
  <div class="row mb-3">
    <label for="input-cdbb8704d9a3835a915c56ed35b34dd2" class="col-6 col-form-label">Name</label>
    <div class="col-6">
      <input id="input-cdbb8704d9a3835a915c56ed35b34dd2" type="text" class="form-control" name="name" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-1379cb82655152d9008b40f952fe602c" class="col-6 col-form-label">EMail</label>
    <div class="col-6">
      <input id="input-1379cb82655152d9008b40f952fe602c" type="email" class="form-control" name="email" value="">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-40945fdaf1a3654ca107b87635c7a75e" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

margins

margins permits to define margins of the field row within horizontal and vertical forms. It is expressed as an array (or a space separated string) of four integers, representing top, right, bottom and left margin using Bootstrap margins sizes.

Name

<x-larastrap::field label="Name" margins="1 2 3 2">
    <img src="https://picsum.photos/100">
</x-larastrap::field>

<div class="row mt-1 me-2 mb-3 ms-2">
  <label for="field-1d5ccdb7f6b6febde6b5ca7842846c2f" class="col-4 col-form-label">Name</label>
  <div class="col-8">
    <img src="https://picsum.photos/100">
  </div>
</div>

Those parameter are inherited from the parent Container.

<x-larastrap::form margins="0 0 1 0">
    <x-larastrap::text label="First" />
    <x-larastrap::text label="Second" />
</x-larastrap::form>

<form id="form-d9d4f495e875a2e075a1a4a6e1b9770f" class="" method="post" name="form-d9d4f495e875a2e075a1a4a6e1b9770f">
  <input type="hidden" name="_token" value="pg6Wq9YUsivEczx9lVdwBBaDmR5506UkdJ9RDI7G" autocomplete="off">
  <div class="row mb-1">
    <label for="input-2685b36aa616e220b4114c930de35041" class="col-4 col-form-label">First</label>
    <div class="col-8">
      <input id="input-2685b36aa616e220b4114c930de35041" type="text" class="form-control" name="4EphIIGSYt" value="">
    </div>
  </div>
  <div class="row mb-1">
    <label for="input-d6ad66644ecbc50305c43430ad3ce063" class="col-4 col-form-label">Second</label>
    <div class="col-8">
      <input id="input-d6ad66644ecbc50305c43430ad3ce063" type="text" class="form-control" name="KkS5u7BONb" value="">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-07c7bf24efd691efcc343520e3ba1227" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

More usually, you may want to just set all margins to 0 but the bottom one in the Larastrap's global configuration of "field".

help

The help parameter implements a classic Bootstrap's pattern: displays a muted text below the actual content, to be used as an explicit hint for the user.

Name

This help line is always displayed

<x-larastrap::field label="Name" help="This help line is always displayed">
    <img src="https://picsum.photos/100">
</x-larastrap::field>

<div class="row mb-3">
  <label for="field-0fe5fa3ec26611be800541e6eb3c0a07" class="col-4 col-form-label">Name</label>
  <div class="col-8">
    <img src="https://picsum.photos/100">
    <div class="form-text" id="help-field-0fe5fa3ec26611be800541e6eb3c0a07">
      This help line is always displayed
    </div>
  </div>
</div>

pophelp

The pophelp parameter is an alternative to help , and provides a popover to be used for more detailed (or less invasive) descriptions of the purpose of each field.

Remember you have to init the Javascript function to handle Bootstrap's popovers!

Name ?

<x-larastrap::field label="Name" pophelp="This is a hoverable help box">
    <img src="https://picsum.photos/100">
</x-larastrap::field>

<div class="row mb-3">
  <label for="field-05395ab20c0a03cedd6a38ed194664ba" class="col-4 col-form-label">Name <span class="badge rounded-pill bg-primary" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="This is a hoverable help box">?</span></label>
  <div class="col-8">
    <img src="https://picsum.photos/100">
  </div>
</div>

It is possible to overwrite once the aspect of the pophelp element directly from the global configuration file, to change the symbol and the CSS classes.

Name HELP!

<!--

In your config/larastrap.php file...

return [
    'pophelp' => [
        'symbol' => 'HELP!',
        'override_classes' => ['badge', 'bg-success', 'float-start', 'me-2'],
    ]
];

-->

<x-larastrap::field label="Name" pophelp="This is a hoverable help box">
    <img src="https://picsum.photos/100">
</x-larastrap::field>

<div class="row mb-3">
  <label for="field-4f3bc7e8d7a561e13cfe036dc279b9ad" class="col-4 col-form-label">Name <span class="badge bg-success float-start me-2" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="This is a hoverable help box">HELP!</span></label>
  <div class="col-8">
    <img src="https://picsum.photos/100">
  </div>
</div>

Also symbol_html can be used, to specify a HTML string to be used as label (for example: a Bootstrap icon).

Name

<!--

In your config/larastrap.php file...

return [
    'pophelp' => [
        'symbol_html' => '<i class="bi bi-info-circle-fill"></i>',
        'override_classes' => ['text-danger'],
    ]
];

-->

<x-larastrap::field label="Name" pophelp="This is a hoverable help box">
    <img src="https://picsum.photos/100">
</x-larastrap::field>

<div class="row mb-3">
  <label for="field-e13d9534fd699ddc94ca326092fbe0dd" class="col-4 col-form-label">Name</label>
  <div class="col-8">
    <img src="https://picsum.photos/100">
  </div>
</div>

do_label

The do_label parameter can be valorized to

show - the default: the label is formatted accondingly the the parent's formview )
hide - the label is omitted from the final output, but the field's content keeps his size
empty - the label is appended to the HTML, but contains an empty string despite any other configuration
squeeze - both label and wrapping field are totally omitted

Normal Label

Normal behavior

Hidden label: in a horizontal form, the content is shifted to the left due the missing node

Empty label: in a horizontal form, the space allocation for the label is still preserved

No label nor wrapping field (.row and .col divs)

<x-larastrap::field label="Normal Label" do_label="show">
    <img src="https://picsum.photos/100">
    <p>Normal behavior</p>
</x-larastrap::field>

<x-larastrap::field label="Name" do_label="hide">
    <img src="https://picsum.photos/100">
    <p>Hidden label: in a horizontal form, the content is shifted to the left due the missing node</p>
</x-larastrap::field>

<x-larastrap::field label="Name" do_label="empty">
    <img src="https://picsum.photos/100">
    <p>Empty label: in a horizontal form, the space allocation for the label is still preserved</p>
</x-larastrap::field>

<x-larastrap::field label="Name" do_label="squeeze">
    <img src="https://picsum.photos/100">
    <p>No label nor wrapping field (.row and .col divs)</p>
</x-larastrap::field>

<div class="row mb-3">
  <label for="field-56f608369a83d6abdb9519b9256edfba" class="col-4 col-form-label">Normal Label</label>
  <div class="col-8">
    <img src="https://picsum.photos/100">
    <p>
      Normal behavior
    </p>
  </div>
</div>
<div class="row mb-3">
  <div class="col-8">
    <img src="https://picsum.photos/100">
    <p>
      Hidden label: in a horizontal form, the content is shifted to the left due the missing node
    </p>
  </div>
</div>
<div class="row mb-3">
  <div class="col-8">
    <img src="https://picsum.photos/100">
    <p>
      Empty label: in a horizontal form, the space allocation for the label is still preserved
    </p>
  </div>
</div><img src="https://picsum.photos/100">
<p>
  No label nor wrapping field (.row and .col divs)
</p>

Here a more exaustive example, using a x-larastrap::text as a reference.

Test 1

<x-larastrap::text placeholder="Normal field, input + label" label="Test 1" />
<x-larastrap::text placeholder="Label is hidden, input has the same width" label="Test 2" do_label="hide" />
<x-larastrap::text placeholder="Label is blank, but has allocated width" label="Test 3" do_label="empty" />
<x-larastrap::text placeholder="No label at all, full width input" label="Test 4" do_label="squeeze" />

<div class="row mb-3">
  <label for="input-f71284644d44f0fba0729e82aa91e0fc" class="col-4 col-form-label">Test 1</label>
  <div class="col-8">
    <input id="input-f71284644d44f0fba0729e82aa91e0fc" type="text" class="form-control" name="3xzCfxnlce" value="" placeholder="Normal field, input + label">
  </div>
</div>
<div class="row mb-3">
  <div class="col-8">
    <input id="input-80c3fa7cf9d8192b41e77e792485222c" type="text" class="form-control" name="PKWWWMJZXy" value="" placeholder="Label is hidden, input has the same width">
  </div>
</div>
<div class="row mb-3">
  <div class="col-8">
    <input id="input-35272f527fbd3f8f3ef9d15e2cbf0aed" type="text" class="form-control" name="wz3mdKs3s4" value="" placeholder="Label is blank, but has allocated width">
  </div>
</div><input id="input-4945ff21109e426aaf58e7f820b99689" type="text" class="form-control" name="2PAwRyaruD" value="" placeholder="No label at all, full width input">

squeeze

squeeze parameter is just a convenient shorthand for do_label="squeeze" .

This is rendered without a wrapping field.

<x-larastrap::field squeeze>
    <p>
        This is rendered without a wrapping field.
    </p>
</x-larastrap::field>

<p>
  This is rendered without a wrapping field.
</p>

This is mostly intended for usage within an actual input, and setup it to omit the field when a label is not required (e.g. within a table).

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

<table class="table">
  <tbody>
    <tr>
      <td>
        <input id="input-669a52f9eb2f2b7ee7775f738e058371" type="text" class="form-control" name="name" value="Jules Wunsch">
      </td>
      <td>
        <input id="input-848bf948bacd777b4a3a2e653ce8a0f8" type="text" class="form-control" name="email" value="daniel.arlie@example.net">
      </td>
    </tr>
    <tr>
      <td>
        <input id="input-85943e0a739ef187c4adfd1f9e7e6a54" type="text" class="form-control" name="name" value="Ebba Olson I">
      </td>
      <td>
        <input id="input-fe7a671540309e109c5ffc983856ae19" type="text" class="form-control" name="email" value="ebert.jeremy@example.net">
      </td>
    </tr>
    <tr>
      <td>
        <input id="input-cedc2109a423a0ea38c86e41dc7ffdb2" type="text" class="form-control" name="name" value="Jessyca Goyette">
      </td>
      <td>
        <input id="input-3a681107ecd7904a76bbc310cc745452" type="text" class="form-control" name="email" value="casper.lorine@example.net">
      </td>
    </tr>
  </tbody>
</table>

Intro

Components

Forms

Containers

Custom Elements

More

About

Fields

label

label_class

label_html

label / input width

margins

help

pophelp

do_label

squeeze