christhompsontldr/collective-input

A Laravel Collective form component for building Bootstrap 4 friendly form elements.

v3.0.60 2022-06-01 17:32 UTC

Requires

• laravelcollective/html: ^6.0

MIT

• Chris Thompson

• bootstrap
• Forms
• laravel
• collective

README

This package extends Laravel Collective and adds a new method to help build a Bootstrap 4 inputs.

Laravel 5+

{{ Form::bs('first_name') }}

Laravel 7

Laravel's new Component markup is supported.

<x-form-bs name="first_name"/>

Generated DOM

<div class="form-group">
    <label for="first_name">First Name</label>
    <input type="text" class="form-control" id="first_name">
</div>

Usage

Attributes and Options

Configuration of the HTML inputs can be accomplished with either attributes or via an "options" array.

Attributes

Mixed

The following are attributes can be boolean or a string: label and placeholder

If false is set as th value, the label or placeholder will be disabled/not displayed.

<x-form-bs name="first_name" label="Your First Name"/>

<x-form-bs name="first_name" :label="false"/>

Boolean

The following are attributes can be boolean: checked, placeholder, selected and required

<x-form-bs name="terms_of_service" type="checkbox" checked label="I agree to the Terms of Service"/>

The placeholder options, when used as a boolean, will attempt to intelligently create a placeholder.

Options

Or if you find it easier to use a large array of options, that works as well

<x-form-bs name="email" type="email" :options="['label' => 'Your Email', 'required']"/>

Shorthand Options

A few options can be passed as a value to make setting them easier. These include: required, livewire, checked, wireLazy, wireDefer

The following generate the same DOM:

<x-form-bs name="first_name" required/>

<x-form-bs name="first_name" :options="['required']"/>

<x-form-bs name="first_name" :options="['required' => true]"/>

{{ Form::bs('first_name', 'text', ['required']) }}

{{ Form::bs('first_name', 'text', ['required' => true]) }}

Dot Syntax

Dot syntax will be automatically converted as needed.

<x-form-bs name="user.first_name"/>

<x-form-bs name="user[first_name]"/>

Both will create the same DOM.

<div class="form-group">
    <label for="user[first_name]">First Name</label>
    <input type="text" class="form-control" id="user-first_name" name="user[first_name]">
</div>

Field Types

All field types are supported, not just the following list.

Text

Text will be used by default if the type is not specified.

Email

If the name attribute is email, the email input type will automatically be used.

<x-form-bs name="email"/>

generates

<div class="form-group">
    <label for="email">Email</label>
    <input type="email" class="form-control" id="email" name="email">
</div>

Select

Notice in the following example that type is not set. It will automatically be determined because select_options is set.

<x-form-bs name="timezone" :select_options="$timezones" required placeholder/>

WYSIWYG Editor

If the type is set to html, the input will be converted to a Summernote editor.

<x-form-bs name="description" type="html"/>

The height option needs to be entered as an integer.

Markdown Editor

If the type is set to markdown, the input will be converted to a SimpleMDE editor.

<x-form-bs name="description" type="markdown"/>

File

If the type is file, the input will be converted to a bs-custom-file-input.

The generated DOM will be Bootstrap's markup.

Datetime

The datetime picker utilizes tempusdominus/bootstrap-4 and assumes that you have FontAwesome 5 loaded.

Form Group

Remove

It is possible to remove the wrapper div.

<x-form-bs name="first_name" :form-group="false"/>

Class

Add a class to the wrapper div. Make sure to include Bootstrap's default.

<x-form-bs name="first_name" group-class="form-group custom-class"/>

Labels

Automatic

<x-form-bs name="role_id"/>
...
<div class="form-group">
    <label for="role_id">Role</label>
    <input type="text" class="form-control" id="role_id" name="role_id">
</div>

or

<x-form-bs name="user[first_name]"/>
...
<div class="form-group">
    <label for="user-first_name">User First Name</label>
    <input type="text" class="form-control" id="user-first_name" name="user[first_name]">
</div>

You can specify the label if you want.

<x-form-bs name="role_id" label="Pick a role"/>
...
<div class="form-group">
    <label for="role_id">Pick a role</label>
    <input type="text" class="form-control" id="role_id" name="role_id">
</div>

This package will auto generate a human readable <label> or you can set your own.

Remove

It is possible to remove the label.

<x-form-bs name="first_name" :label="false"/>

Class

Add a class to the label.

<x-form-bs name="first_name" label-class="custom-class"/>

Helper

Utilize the helper attribute to add a input help block below the input.

<x-form-bs name="first_name" helper="Please enter your first name.">

Optional Second Parameter

If using the Form class, the second parameter is optional.

{{ Form::bs('first_name', ['required']) }}

{{ Form::bs('first_name', 'text', ['required']) }}

Dusk

Dusk selectors are enabled by default in any environment other than production. This can by changed in config/form.php

Slots

Because every parameter can also be a slot, if you have a more complex need for passing DOM into part of this component, Blade slots can be used.

<x-form-bs name="tos" type="checkbox">
    <x-slot name="label">
        I agree to the <a href="#" x-on:click.prevent="openModal('cancellationTermsModal')">cancellation terms</a>
    </x-slot>
</x-form-bs>

This package provides two Blade slots for injecting DOM before and after the input.

Before

<x-form-bs name="first_name">
    <x-slot name="before">
        <p>Please enter your full first name.</p>
    </x-slot>
</x-form-bs>

will generate

<div class="form-group">
    <p>Please enter your full first name.</p>
    <label for="first_name">First Name</label>
    <input type="text" class="form-control" id="first_name" name="first_name">
</div>

After

<x-form-bs name="last_name">
    <x-slot name="after">
        <p>Please enter your full last name.</p>
    </x-slot>
</x-form-bs>

will generate

<div class="form-group">
    <label for="last_name">Last Name</label>
    <input type="text" class="form-control" id="last_name" name="last_name">
    <p>Please enter your full last name.</p>
</div>

Assets

If you use markdown, html, file or datetime types, you will need to include the following stacks in your layouts.

    ...
    @stack('after-styles')
</head>
<body>
    ...
    @stack('after-scripts')
</body>

The names of these slots can be configured as part of this package. Because of the way Laravel Blade/View caching works, you will need to run php artisan view:clear if you change these config parameters.