Basic Forms Components

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, 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
input-group-class	Additional classes for the input-group container	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 id attribute for the input group item	string	-	yes
size	The input group size (you can specify sm or lg values only)	string	null	no
top-class	Classes for the form-group container (to customize the main container)	string	null	no

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. Some 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"/>

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. Some examples:

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

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

{{-- With label and main class --}}
<x-adminlte-input name="iLabel" label="Label" placeholder="placeholder" top-class="col-md-6"/>

{{-- 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"
    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, lg size and feedback disabled --}}
<x-adminlte-input name="iSearch" label="Search" placeholder="search" size="lg" disable-feedback>
    <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>

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). Some examples:

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

{{-- Placeholder, sm size and prepend icon --}}
<x-adminlte-input-file name="ifPholder" 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 slot, multiple files and other customizations --}}
<x-adminlte-input-file name="ifMultiple" label="Upload files" placeholder="Choose multiple files..."
    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>

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.

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. Some 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" 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 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>

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. Some examples:

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

{{-- 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"
    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 name="sel2Category" label="Categories" label-class="text-danger"
    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>

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. Some 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"
    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 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>