Skip to content

Basic Forms Components

Jump to bottom
Diego Smania edited this page Aug 21, 2021 · 25 revisions

These components are expected to be used within a form element. They can be used to generate formularies with styled input fields. At next you can see the list of available components:

Components
InputGroup, Button, Input, InputFile, Options, Select, Select2, Textarea

Input Group Component

Represents an empty input group to easily extend form controls by adding text, icons, or buttons on either side of textual inputs, custom selects, and custom file inputs. This component is not intended to be used, but provides a base layout and some properties that other components will extend. The component yields an input_group_item section that other components (like an input, select or textarea) may use to extend the layout. At next, you can see the list of supported attributes:

Attribute Description Type Default Required
disable-feedback Disables the invalid feedback notification for the input group any null no
error-key The lookup key to use when searching for validation errors string null no
fgroup-class Additional classes for the form-group container (to customize the main container) string null no
id The id attribute for the underlying input group item string null no
igroup-class Additional classes for the input-group container string null no
igroup-size The input group size (you can specify sm or lg values only) string null no
label The label for the input group string null no
label-class Classes for the label container (to customize the label) string null no
name The name and default id attribute for the underlying input group item string - yes

The name attribute is the only required property and will be used as the default id property when no other is provided. Also, the lookup key for validation errors will be automatically generated from the name property if no error-key is specified. For example, when you want to submit multiple files from a file input field, you can setup name property as files[] in order to submit the file names inside an array called files, in this case the autogenerated lookup key for validation errors will be files.

You should note that all the components that extends from this one will have the previous attributes available on they interface. This component also defines two slots that can be used to push the input group add-ons:

Slots

  • prependSlot: Use this slot to prepend an add-on in the input group item.
  • appendSlot: Use this slot to append an add-on in the input group item.

Button

Represents an AdminLTE styled button. The following attributes are available:

Attribute Description Type Default Required
icon A fontawesome icon for the button string null no
label The visible label (text) for the button string null no
theme The AdminLTE button style theme: primary, info, danger, etc. string 'default' no
type The button type (button, submit or reset) string 'button' no

Any other attribute you define will be directly inserted into the underlying button tag. You can, for example, define a class, onclick, title or any other attribute you may need.

Examples

{{-- Minimal --}}
<x-adminlte-button label="Button"/>

{{-- Disabled --}}
<x-adminlte-button label="Disabled" theme="dark" disabled/>

{{-- Themes + icons --}}
<x-adminlte-button label="Primary" theme="primary" icon="fas fa-key"/>
<x-adminlte-button label="Secondary" theme="secondary" icon="fas fa-hashtag"/>
<x-adminlte-button label="Info" theme="info" icon="fas fa-info-circle"/>
<x-adminlte-button label="Warning" theme="warning" icon="fas fa-exclamation-triangle"/>
<x-adminlte-button label="Danger" theme="danger" icon="fas fa-ban"/>
<x-adminlte-button label="Success" theme="success" icon="fas fa-thumbs-up"/>
<x-adminlte-button label="Dark" theme="dark" icon="fas fa-adjust"/>

{{-- Types --}}
<x-adminlte-button class="btn-flat" type="submit" label="Submit" theme="success" icon="fas fa-lg fa-save"/>
<x-adminlte-button class="btn-lg" type="reset" label="Reset" theme="outline-danger" icon="fas fa-lg fa-trash"/>
<x-adminlte-button class="btn-sm bg-gradient-info" type="button" label="Help" icon="fas fa-lg fa-question"/>

{{-- Icons Only --}}
<x-adminlte-button theme="primary" icon="fab fa-fw fa-lg fa-facebook-f"/>
<x-adminlte-button theme="info" icon="fab fa-fw fa-lg fa-twitter"/>

Button Component

Input

Represents an input element. This component extends from the Input Group Component, so all the attributes from it will be inherited. There are no extra attributes defined for this component, but you are able to set any attribute you usually will use on an input html element without any problem.

Examples

{{-- Minimal --}}
<x-adminlte-input name="iBasic"/>

{{-- Email type --}}
<x-adminlte-input name="iMail" type="email" placeholder="mail@example.com"/>

{{-- With label, invalid feedback disabled and form group class --}}
<div class="row">
    <x-adminlte-input name="iLabel" label="Label" placeholder="placeholder"
        fgroup-class="col-md-6" disable-feedback/>
</div>

{{-- With prepend slot --}}
<x-adminlte-input name="iUser" label="User" placeholder="username" label-class="text-lightblue">
    <x-slot name="prependSlot">
        <div class="input-group-text">
            <i class="fas fa-user text-lightblue"></i>
        </div>
    </x-slot>
</x-adminlte-input>

{{-- With append slot, number type and sm size --}}
<x-adminlte-input name="iNum" label="Number" placeholder="number" type="number"
    igroup-size="sm" min=1 max=10>
    <x-slot name="appendSlot">
        <div class="input-group-text bg-dark">
            <i class="fas fa-hashtag"></i>
        </div>
    </x-slot>
</x-adminlte-input>

{{-- With multiple slots and lg size --}}
<x-adminlte-input name="iSearch" label="Search" placeholder="search" igroup-size="lg">
    <x-slot name="appendSlot">
        <x-adminlte-button theme="outline-danger" label="Go!"/>
    </x-slot>
    <x-slot name="prependSlot">
        <div class="input-group-text text-danger">
            <i class="fas fa-search"></i>
        </div>
    </x-slot>
</x-adminlte-input>

Input Component

InputFile

Important: This component requires the bs-custom-file-input plugin, so be sure to first enable it on the package configuration file. Read more on the plugins configuration section. The plugin can be installed locally using php artisan adminlte:plugins install --plugin=bsCustomFileInput command.

Represents a file input element. This component extends from the Input Group Component, so all the attributes from it will be inherited. The component also defines next additional attributes:

Attribute Description Type Default Required
legend A legend to replace the default Browse text string null no
placeholder The placeholder for the input file box string '' no

All other attributes you define will be inserted directly on the underlying input[type='file'] element, so you can use the standard attributes too (like accept or multiple).

Examples

{{-- Minimal --}}
<x-adminlte-input-file name="ifMin"/>

{{-- Placeholder, sm size and prepend icon --}}
<x-adminlte-input-file name="ifPholder" igroup-size="sm" placeholder="Choose a file...">
    <x-slot name="prependSlot">
        <div class="input-group-text bg-lightblue">
            <i class="fas fa-upload"></i>
        </div>
    </x-slot>
</x-adminlte-input-file>

{{-- With label and feedback disabled --}}
<x-adminlte-input-file name="ifLabel" label="Upload file" placeholder="Choose a file..."
    disable-feedback/>

{{-- With multiple slots and multiple files --}}
<x-adminlte-input-file id="ifMultiple" name="ifMultiple[]" label="Upload files"
    placeholder="Choose multiple files..." igroup-size="lg" legend="Choose" multiple>
    <x-slot name="appendSlot">
        <x-adminlte-button theme="primary" label="Upload"/>
    </x-slot>
    <x-slot name="prependSlot">
        <div class="input-group-text text-primary">
            <i class="fas fa-file-upload"></i>
        </div>
    </x-slot>
</x-adminlte-input-file>

Input File Component

Required Plugin Configuration

To use this component you need to install and enable the required bs-custom-file-input plugin. You can install the plugin locally using the next command:

php artisan adminlte:plugins install --plugin=bsCustomFileInput

After installed, you can use the next plugin configuration as a reference:

'plugins' => [
    ...
    'BsCustomFileInput' => [
        'active' => false,
        'files' => [
            [
                'type' => 'js',
                'asset' => true,
                'location' => 'vendor/bs-custom-file-input/bs-custom-file-input.min.js',
            ],
        ],
    ],
    ...
],

Finally, you need to use the @section('plugins.BsCustomFileInput', true) sentence on the blade file where you expect to use the component. Also, you can choose to use files from a CDN instead of installing it locally.

Options

Important: This component is available from package version >= 3.7.0.

Represents a set of option tags. It can be used with Select, Select2 or SelectBs components. The following attributes are available:

Attribute Description Type Default Required
disabled A list of disabled option keys array null no
empty-option Whether to add a selectable empty option to the list. If the value is a string, it will be used as the option label, otherwise no label will be available bool/string false no
options The list of options as key => value pairs array - yes
placeholder Whether to add a placeholder (non selectable hidden option) to the list. If the value is a string, it will be used as the placeholder label, otherwise no label will be available bool/string false no
selected A list of selected option keys array null no
strict Whether to use strict comparison between option's key and the keys of selected/disabled options bool false no

The intention of the empty-option attribute is to represent a selectable option that will submit a null value for a selection component. On the other hand, the placeholder adds a non selectable (hidden option) to the list of options that will acts as a placeholder for the selection component. As an example, the nexts components definition:

{{-- Options with empty option --}}
<x-adminlte-options :options="['Option 1', 'Option 2', 'Option 3']"
        disabled="1" empty-option="Select an option..."/>

{{-- Options with placeholder --}}
<x-adminlte-options :options="['Option 1', 'Option 2', 'Option 3']"
        disabled="1" placeholder="Select an option..."/>

will be rendered as:

{{-- Options with empty option --}}
<option value="">Select an option...</option>
<option value="0">Option 1</option>
<option value="1" disabled="">Option 2</option>
<option value="2">Option 3</option>

{{-- Options with placeholder --}}
<option class="d-none" value="">Select an option...</option>
<option value="0">Option 1</option>
<option value="1" disabled="">Option 2</option>
<option value="2">Option 3</option>

Other examples

{{-- Example with empty option (for Select) --}}
<x-adminlte-select name="optionsTest1">
    <x-adminlte-options :options="['Option 1', 'Option 2', 'Option 3']" disabled="1"
        empty-option="Select an option..."/>
</x-adminlte-select>

{{-- Example with placeholder (for Select) --}}
<x-adminlte-select name="optionsTest2">
    <x-adminlte-options :options="['Option 1', 'Option 2', 'Option 3']" disabled="1"
        placeholder="Select an option..."/>
</x-adminlte-select>

{{-- Example with empty option (for Select2) --}}
<x-adminlte-select2 name="optionsVehicles" igroup-size="lg" label-class="text-lightblue"
    data-placeholder="Select an option...">
    <x-slot name="prependSlot">
        <div class="input-group-text bg-gradient-info">
            <i class="fas fa-car-side"></i>
        </div>
    </x-slot>
    <x-adminlte-options :options="['Car', 'Truck', 'Motorcycle']" empty-option/>
</x-adminlte-select2>

{{-- Example with multiple selections (for Select) --}}
@php
    $options = ['s' => 'Spanish', 'e' => 'English', 'p' => 'Portuguese'];
    $selected = ['s','e'];
@endphp
<x-adminlte-select id="optionsLangs" name="optionsLangs[]" label="Languages"
    label-class="text-danger" multiple>
    <x-slot name="prependSlot">
        <div class="input-group-text bg-gradient-red">
            <i class="fas fa-lg fa-language"></i>
        </div>
    </x-slot>
    <x-adminlte-options :options="$options" :selected="$selected"/>
</x-adminlte-select>

{{-- Example with multiple selections (for SelectBs) --}}
@php
    $config = [
        "title" => "Select multiple options...",
        "liveSearch" => true,
        "liveSearchPlaceholder" => "Search...",
        "showTick" => true,
        "actionsBox" => true,
    ];
@endphp
<x-adminlte-select-bs id="optionsCategory" name="optionsCategory[]" label="Categories"
    label-class="text-danger" :config="$config" multiple>
    <x-slot name="prependSlot">
        <div class="input-group-text bg-gradient-red">
            <i class="fas fa-tag"></i>
        </div>
    </x-slot>
    <x-adminlte-options :options="['News', 'Sports', 'Science', 'Games']"/>
</x-adminlte-select-bs>

Options Component

Select

Represents an option selection element. This component extends from the Input Group Component, so all the attributes from it will be inherited. There are no extra attributes defined for this component, but you are able to set any attribute you usually will use on a select html element without any problem.

Examples

{{-- Minimal --}}
<x-adminlte-select name="selBasic">
    <option>Option 1</option>
    <option disabled>Option 2</option>
    <option selected>Option 3</option>
</x-adminlte-select>

{{-- Disabled --}}
<x-adminlte-select name="selDisabled" disabled>
    <option>Option 1</option>
    <option>Option 2</option>
</x-adminlte-select>

{{-- With prepend slot, lg size, and label --}}
<x-adminlte-select name="selVehicle" label="Vehicle" label-class="text-lightblue"
    igroup-size="lg">
    <x-slot name="prependSlot">
        <div class="input-group-text bg-gradient-info">
            <i class="fas fa-car-side"></i>
        </div>
    </x-slot>
    <option>Vehicle 1</option>
    <option>Vehicle 2</option>
</x-adminlte-select>

{{-- With multiple slots and multiple options --}}
<x-adminlte-select id="selUser" name="selUser[]" label="User" label-class="text-danger" multiple>
    <x-slot name="prependSlot">
        <div class="input-group-text bg-gradient-red">
            <i class="fas fa-lg fa-user"></i>
        </div>
    </x-slot>
    <x-slot name="appendSlot">
        <x-adminlte-button theme="outline-dark" label="Clear" icon="fas fa-lg fa-ban text-danger"/>
    </x-slot>
    <option>Admin</option>
    <option>Guest</option>
</x-adminlte-select>

Select Component

Select2

Important: This component requires the select2 and select2-bootstrap4-theme plugins, so be sure to first enable these plugins on the package configuration file. Read more on the plugins configuration section. Both plugins can be installed locally using php artisan adminlte:plugins install --plugin=select2 command, after that you will need to include the plugins files on the configuration file.

Represents a select2 option selector. The plugin includes features like option search and placeholder. This component extends from the Input Group Component, so all the attributes from it will be inherited. The component also defines next additional attributes:

Attribute Description Type Default Required
config Array with the plugin configuration parameters array [] no

The available configuration are those explained on the plugin documentation. All other attributes you define will be inserted directly on the underlying select element, so you can also use the data-* attributes to configure the plugin.

Note: You can always make all the configuration from Javascript/jQuery using the id or name property of the component as the selector for the id attribute, instead of using the config property of the component.

Examples

{{-- Minimal --}}
<x-adminlte-select2 name="sel2Basic">
    <option>Option 1</option>
    <option disabled>Option 2</option>
    <option selected>Option 3</option>
</x-adminlte-select2>

{{-- Disabled --}}
<x-adminlte-select2 name="sel2Disabled" disabled>
    <option>Option 1</option>
    <option>Option 2</option>
</x-adminlte-select2>

{{-- With prepend slot, label and data-placeholder config --}}
<x-adminlte-select2 name="sel2Vehicle" label="Vehicle" label-class="text-lightblue"
    igroup-size="lg" data-placeholder="Select an option...">
    <x-slot name="prependSlot">
        <div class="input-group-text bg-gradient-info">
            <i class="fas fa-car-side"></i>
        </div>
    </x-slot>
    <option/>
    <option>Vehicle 1</option>
    <option>Vehicle 2</option>
</x-adminlte-select2>

{{-- With multiple slots, and plugin config parameter --}}
@php
    $config = [
        "placeholder" => "Select multiple options...",
        "allowClear" => true,
    ];
@endphp
<x-adminlte-select2 id="sel2Category" name="sel2Category[]" label="Categories"
    label-class="text-danger" igroup-size="sm" :config="$config" multiple>
    <x-slot name="prependSlot">
        <div class="input-group-text bg-gradient-red">
            <i class="fas fa-tag"></i>
        </div>
    </x-slot>
    <x-slot name="appendSlot">
        <x-adminlte-button theme="outline-dark" label="Clear" icon="fas fa-lg fa-ban text-danger"/>
    </x-slot>
    <option>Sports</option>
    <option>News</option>
    <option>Games</option>
    <option>Science</option>
    <option>Maths</option>
</x-adminlte-select2>

Select2 Component

Required Plugin Configuration

To use this component you need to install and enable the required select2 and select2-bootstrap4-theme plugins. You can install both plugins locally using the next command:

php artisan adminlte:plugins install --plugin=select2

After installed, you can use the next plugin configuration as a reference:

'plugins' => [
    ...
    'Select2' => [
        'active' => false,
        'files' => [
            [
                'type' => 'js',
                'asset' => true,
                'location' => 'vendor/select2/js/select2.full.min.js',
            ],
            [
                'type' => 'css',
                'asset' => true,
                'location' => 'vendor/select2/css/select2.min.css',
            ],
            [
                'type' => 'css',
                'asset' => true,
                'location' => 'vendor/select2-bootstrap4-theme/select2-bootstrap4.min.css',
            ],
        ],
    ],
    ...
],

Finally, you need to use the @section('plugins.Select2', true) sentence on the blade file where you expect to use the component. Also, you can choose to use files from a CDN instead of installing it locally.

Textarea

Represents a textarea element. This component extends from the Input Group Component, so all the attributes from it will be inherited. There are no extra attributes defined for this component, but you are able to set any attribute you usually will use on a textarea html element without any problem.

Examples

{{-- Minimal with placeholder --}}
<x-adminlte-textarea name="taBasic" placeholder="Insert description..."/>

{{-- Disabled --}}
<x-adminlte-textarea name="taDisabled" disabled>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis nibh massa.
</x-adminlte-textarea>

{{-- With prepend slot, sm size and label --}}
<x-adminlte-textarea name="taDesc" label="Description" rows=5 label-class="text-warning"
    igroup-size="sm" placeholder="Insert description...">
    <x-slot name="prependSlot">
        <div class="input-group-text bg-dark">
            <i class="fas fa-lg fa-file-alt text-warning"></i>
        </div>
    </x-slot>
</x-adminlte-textarea>

{{-- With slots, sm size and feedback disabled --}}
<x-adminlte-textarea name="taMsg" label="Message" rows=5 igroup-size="sm"
    label-class="text-primary" placeholder="Write your message..." disable-feedback>
    <x-slot name="prependSlot">
        <div class="input-group-text">
            <i class="fas fa-lg fa-comment-dots text-primary"></i>
        </div>
    </x-slot>
    <x-slot name="appendSlot">
        <x-adminlte-button theme="primary" icon="fas fa-paper-plane" label="Send"/>
    </x-slot>
</x-adminlte-textarea>

Textarea Component

Home | Installation | Updating | Usage | Basic Config | Layout Config | Menu Config | Plugins Config | Blade X-Components - Laravel-AdminTE

Overview

Configuration

Components

Contribution & Extras

Clone this wiki locally