Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Help us to keep this project alive

Just a donation of $5 will enable LBC to continue its successful development and improvement in the future. Did LBC help you with your project and give you $5 worth of time? Then please take a short moment and give something back. Thanks a lot!

Form controls

Email Address We'll never share your email with anyone else.

Password

Check me out

Example select

Example textarea

Show code

  <x-input
    name="email1"
    type="email"
    placeholder="Enter email"
    required
    :label="[
      'text' => 'Email Address',
    ]"
    help="We'll never share your email with anyone else."
  />

  <x-input
    type="password"
    placeholder="Password"
    required
    :label="[
        'text' => 'Password',
    ]"
  />

  <x-checkbox
    name="checkobox1"
    :label="[
        'text' => 'Check me out',
    ]"
  />

  <x-select
    name="select4"
    :label="[
        'text' => 'Example select',
    ]"
    :options="[1,2,3,4]"
  />

  <x-textarea
    name="textarea1"
    rows="3"
    :label="[
        'text' => 'Example textarea',
    ]"
  />

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

Show code

  <x-input
    name="exmple6"
    class="form-control-lg"
    placeholder=".form-control-lg"
  />

  <x-input
    name="exmple7"
    placeholder=".form-control (default)"
  />

  <x-input
    name="exmple8"
    class="form-control-sm"
    placeholder=".form-control-sm"
  />

  <x-select
    name="exmple9"
    class="form-control-lg"
    :options="['.form-control-lg']"
  />

  <x-select
    name="exmple10"
    :options="['.form-control (default)']"
  />

  <x-select
    name="exmple11"
    class="form-control-sm"
    :options="['.form-control-sm']"
  />

Horizontal form label sizing

Email Address

Show code

  <x-input
    class="form-control-sm"
    name="email12"
    type="email"
    placeholder=".col-form-label-sm"
    required
    :label="[
      'text' => 'Email Address',
    ]"
    :grid="['col-sm-3 col-form-label-sm', 'col-sm-9']"
  />

  <x-input
    name="email13"
    type="email"
    placeholder="default"
    required
    :label="[
      'text' => 'Email Address',
    ]"
    :grid="['col-sm-3', 'col-sm-9']"
  />

  <x-input
    class="form-control-lg"
    name="email14"
    type="email"
    placeholder=".col-form-label-lg"
    required
    :label="[
      'text' => 'Email Address',
    ]"
    :grid="['col-sm-3 col-form-label-lg', 'col-sm-9']"
  />

Readonly

Show code

  <x-input
    name="exmple15"
    placeholder="Readonly input here..."
    readonly
  />

Readonly plain text

Email Address

Password

Show code

  <x-input
    class="form-control-plaintext"
    name="exmple16"
    :label="[
      'text' => 'Email Address',
    ]"
    placeholder="Readonly input here..."
    readonly
    :grid="['col-sm-3', 'col-sm-9']"
  />

  <x-input
    name="password17"
    type="password"
    :label="[
      'text' => 'Password',
    ]"
    placeholder="Password"
    readonly
    :grid="['col-sm-3', 'col-sm-9']"
  />

Form groups

Example label

Another label

Show code

  <x-input
    name="example18"
    :label="[
      'text' => 'Example label',
    ]"
    placeholder="Example input"
  />

  <x-input
    name="example19"
    :label="[
      'text' => 'Another label',
    ]"
    placeholder="Another input"
  />

Form grid

Example label

Another label

Show code

  <div class="row">
    <div class="col">
      <x-input
        name="example20"
        :label="[
          'text' => 'Example label',
        ]"
        placeholder="Example input"
      />
    </div>

    <div class="col">
      <x-input
        name="example21"
        :label="[
          'text' => 'Another label',
        ]"
        placeholder="Another input"
      />
    </div>
  </div>

Form row

Example label

Another label

Show code

  <div class="form-row">
    <div class="col">
      <x-input
        name="example22"
        :label="[
          'text' => 'Example label',
        ]"
        placeholder="Example input"
      />
    </div>

    <div class="col">
      <x-input
        name="example23"
        :label="[
          'text' => 'Another label',
        ]"
        placeholder="Another input"
      />
    </div>
  </div>

Horizontal form

Email address

We'll never share your email with anyone else.

Password

Check me out

Toggle this switch element

Toggle this custom radio

Or toggle this custom radio

Example select

Example multiple select

Show code

  <x-input
    name="email24"
    type="email"
    :label="[
      'text' => 'Email address',
    ]"
    placeholder="Enter email"
    :grid="['col-sm-3', 'col-sm-9']"
    help="We'll never share your email with anyone else."
  />

  <x-input
    name="password25"
    type="password"
    :label="[
      'text' => 'Password',
    ]"
    placeholder="Password"
    :grid="['col-sm-3', 'col-sm-9']"
  />

  <x-checkbox
    name="checkmeout26"
    :label="[
      'text' => 'Check me out',
    ]"
    :grid="['offset-sm-3 col-sm-9']"
  />

  <x-switches
    name="switch"
    :label="[
      'text' => 'Toggle this switch element',
    ]"
    :grid="['offset-sm-3 col-sm-9']"
  />

  <x-radio
    name="radio1"
    id="customRadioInline1"
    :label="[
      'text' => 'Toggle this custom radio',
    ]"
    :grid="['offset-sm-3 col-sm-9']"
  />

  <x-radio
    name="radio1"
    id="customRadioInline2"
    :label="[
      'text' => 'Or toggle this custom radio',
    ]"
    :grid="['offset-sm-3 col-sm-9']"
  />

  <x-select
    name="multipleSelect27"
    :options="[1,2,3,4]"
    :label="[
      'text' => 'Example select',
    ]"
    :grid="['col-sm-3', 'col-sm-9']"
  />

  <x-select
    name="multipleSelect28"
    multiple
    :options="[1,2,3,4]"
    :label="[
      'text' => 'Example multiple select',
    ]"
    :grid="['col-sm-3', 'col-sm-9']"
  />

Server side validation

The server validation of Laravel is integrated in the components with the standard bootstrap markup:
Bootstrap forms validation

File Browse

File upload

Browse

Show code

  <x-upload
    type="file"
    name="upload"
    :label="[
      'text' => 'File upload',
    ]"
  />

Blade-Component informations

Path

Path components/forms/(input, textarea, upload, select, switches).blade.php

Name	Type	Description
all	array	Submit all data.
class	string	Classes can be added, all other attributes can also be set.
grid	array	For horizontal form
help	string	Information text

For more information about forms read the bootstrap documention Forms

Components

EXAMPLES Example templates from Bootstrap Dokumention.

Themes

Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Help us to keep this project alive

Form controls

Sizing

Horizontal form label sizing

Readonly

Readonly plain text

Form groups

Form grid

Form row

Horizontal form

Server side validation

File Browse

Blade-Component informations

EXAMPLES
Example templates from Bootstrap Dokumention.