Bootstrap 4 forms builder for Laravel 5.8+

GitHub license Maintenance GitHub release (latest by date) GitHub stars Packagist

This package uses in background Laravel Collective HTML to simplify Bootstrap 4 forms creation into Laravel applications.
Model form binding and automatic error display are supported, as well as most of Bootstrap forms features : form layouts, custom fields, input groups, ...

This package was mainly inspired by Dwight Watson's and Michael Burgin's awesome work.
Credits and many thanks to them :-)

Any contribution or feedback is highly welcomed, please feel free to create a pull request or submit a new issue.

Installation

Simply install the package using Composer: 

composer require bgaze/bootstrap-form

There are a various configuration options available, publish the configuration file to customize them: 

php artisan vendor:publish --provider="Bgaze\BootstrapForm\BootstrapFormServiceProvider"

That's it, you can start to build forms.
But if you use PhpStorm IDE, you can also check this gist to easily configure syntax highlighting and live templates for this package's custom Blade directives.

Quick start

The BF facade provides many methods to create forms and form inputs.
All of them have a Blade directive alias.

In this doc, we'll mainly use blade directives as it is probably the most common way to use BF.

Blate template:

@open(['novalidate' => true])
    @text('login')
    @email('email')
    @checkbox('remember_me', null, 1, null, ['switch' => true, 'inline' => true])
    @submit('Login')
@close

PHP code:

echo BF::open(['novalidate' => true])
echo BF::text('login')
echo BF::email('email')
echo BF::checkbox('remember_me', null, 1, null, ['switch' => true, 'inline' => true])
echo BF::submit('Login')
echo BF::close()

Submit the form with errors to test automatic errors management ;-) 

<form method="POST" action="https://packages.bgaze.fr/bootstrap-form" accept-charset="UTF-8" role="form" novalidate>
    <input name="_token" type="hidden" value="W0o8eytKBerR8IaDkAMTZEI6vWwFaCu037EymZ2c">
    <div id="login_group" class="form-group">
        <label for="login">Login</label>
        <div>
            <input id="login" class="form-control" name="login" type="text">
        </div>
    </div>
    <div id="email_group" class="form-group">
        <label for="email">Email</label>
        <div>
            <input id="email" class="form-control" name="email" type="email">
        </div>
    </div>
    <div id="remember_me_group" class="form-group">
        <div>
            <div class="custom-control custom-control-inline custom-switch">
                <input id="remember_me" class="custom-control-input" name="remember_me" type="checkbox" value="1">
                <label for="remember_me" class="custom-control-label">Remember me</label>
            </div>
        </div>
    </div>
    <input class="btn btn-primary" type="submit" value="Login">
</form>

Forms

Creating forms

Open a form using BF::open() method, or @open() directive, wich accepts an array of options as argument.
By default, a POST method will be assumed. However, you are free to specify another method.

Close the form using BF::close() method or @close directive. 

@open(['route' => 'users.index', 'method' => 'GET', 'id' => 'users-search-form'])
    <!-- Add your fields -->
@close

There is three ways to set the form action, priority order is: url > route > action 

<!-- Using an url -->
@open(['url' => 'foo/bar'])

<!-- Using a named route -->
@open(['route' => 'route.name'])

<!-- Using a controller action -->
@open(['action' => 'Controller@method'])

<!-- You may pass in parameters too -->
@open(['route' => ['route.name', $id]])
@open(['action' => ['Controller@method', $id]])

If your form is going to accept file uploads, add a files option to your array: 

@open(['url' => 'foo/bar', 'files' => true])

Form options

Please find below available form options.
=> Any key that is not in form's options list will be used as HTML attribute.
=> Options take precedence on attributes. To use an option key as HTML attribute, prefix it with a ~.

Option Default value Accepted values Description
files null null / true Configure form enctype for file upload
url null string An url to use as form action
Example: /foo/bar
route null string / array A route to use as form action
Example: users.update
action null string / array A controller action to use as form action
Example: UserController@update
store null string / array The store action when using model binding
update null string / array The update action when using model binding
model null Illuminate\Database\Eloquent\Model A model to bind to the form
error_bag 'default' string The error bag to use for the form errors, useful when multiple forms exists on the same page.
layout Inherited 1 vertical / horizontal / inline The Bootstrap layout of the form (doc)
group Inherited 1 false / array A set of HTML attributes for all the form groups (extends group package configuration)
custom Inherited 1 bool Use Bootstrap custom style by default when available
show_all_errors Inherited 1 bool Show all the errors of an input or just the first one
pull_right 2 Inherited 1 false / HTML class Add an empty left column to checkboxes, radios and fields without label to preserve fields alignment
left_class 2 Inherited 1 string The default width of left column
right_class 2 Inherited 1 string The default width of right column
lspace 3 Inherited 1 false / HTML class The horizontal blank space between labels and fields, doesn't apply to checkboxes and radios (CSS needed)
hspace 3 Inherited 1 false / HTML class The horizontal blank space between fields
vspace 3 Inherited 1 false / HTML class The vertical blank space between fields

1: Inherited from package configuration.
2: Horizontal layout only.
3: Inline layout only.

Form variations

BF support the three Bootstrap form layouts: vertical, horizontal, inline.
The form layout can be set when opening form using the layout option.

BF provide helpers to open a form with a specific layout:

  • BF::vertical() / @vertical()
  • BF::horizontal() / @horizontal()
  • BF::inline() / @inline()

They work exactly the same than BF::open() / @open() with the layout option forced.
Several options allow to adjuts horizontal and inline layouts. 

@vertical(['url' => 'some-url'])
    @email('email')
    @password('password')
    @checkbox('remember_me', null, 1, null, ['switch' => true])
    @submit('Login')
@close
<form method="POST" action="https://packages.bgaze.fr/some-url" accept-charset="UTF-8" role="form">
    <input name="_token" type="hidden" value="W0o8eytKBerR8IaDkAMTZEI6vWwFaCu037EymZ2c">
    <div id="email_group" class="form-group">
        <label for="email">Email</label>
        <div>
            <input id="email" class="form-control" name="email" type="email">
        </div>
    </div>
    <div id="password_group" class="form-group">
        <label for="password">Password</label>
        <div>
            <input id="password" class="form-control" name="password" type="password" value="">
        </div>
    </div>
    <div id="remember_me_group" class="form-group">
        <div>
            <div class="custom-control custom-switch">
                <input id="remember_me" class="custom-control-input" name="remember_me" type="checkbox" value="1">
                <label for="remember_me" class="custom-control-label">Remember me</label>
            </div>
        </div>
    </div>
    <input class="btn btn-primary" type="submit" value="Login">
</form>
@horizontal(['url' => 'some-url'])
    @email('email')
    @password('password')
    @checkbox('remember_me', null, 1, null, ['switch' => true])
    @submit('Login')
@close
<form method="POST" action="https://packages.bgaze.fr/some-url" accept-charset="UTF-8" role="form" class="form-horizontal">
    <input name="_token" type="hidden" value="W0o8eytKBerR8IaDkAMTZEI6vWwFaCu037EymZ2c">
    <div id="email_group" class="form-group row">
        <label for="email" class="col-form-label col-lg-2 col-xl-3">Email</label>
        <div class="col">
            <input id="email" class="form-control" name="email" type="email">
        </div>
    </div>
    <div id="password_group" class="form-group row">
        <label for="password" class="col-form-label col-lg-2 col-xl-3">Password</label>
        <div class="col">
            <input id="password" class="form-control" name="password" type="password" value="">
        </div>
    </div>
    <div id="remember_me_group" class="form-group row">
        <div class="col-lg-2 col-xl-3"></div>
        <div class="col">
            <div class="custom-control custom-switch">
                <input id="remember_me" class="custom-control-input" name="remember_me" type="checkbox" value="1">
                <label for="remember_me" class="custom-control-label">Remember me</label>
            </div>
        </div>
    </div>
    <input class="btn btn-primary" type="submit" value="Login">
</form>
@horizontal(['url' => 'some-url', 'pull_right' => false, 'left_class' => 'col-5', 'right_class' => 'col-7'])
    @email('email')
    @password('password')
    @checkbox('remember_me', null, 1, null, ['switch' => true])
    @submit('Login')
@close
<form method="POST" action="https://packages.bgaze.fr/some-url" accept-charset="UTF-8" role="form" class="form-horizontal">
    <input name="_token" type="hidden" value="W0o8eytKBerR8IaDkAMTZEI6vWwFaCu037EymZ2c">
    <div id="email_group" class="form-group row">
        <label for="email" class="col-form-label col-5">Email</label>
        <div class="col-7">
            <input id="email" class="form-control" name="email" type="email">
        </div>
    </div>
    <div id="password_group" class="form-group row">
        <label for="password" class="col-form-label col-5">Password</label>
        <div class="col-7">
            <input id="password" class="form-control" name="password" type="password" value="">
        </div>
    </div>
    <div id="remember_me_group" class="form-group row">
        <div class="col-7">
            <div class="custom-control custom-switch">
                <input id="remember_me" class="custom-control-input" name="remember_me" type="checkbox" value="1">
                <label for="remember_me" class="custom-control-label">Remember me</label>
            </div>
        </div>
    </div>
    <input class="btn btn-primary" type="submit" value="Login">
</form>
@inline(['url' => 'some-url'])
    @email('email')
    @password('password')
    @checkbox('remember_me', null, 1, null, ['switch' => true])
    @submit('Login')
@close
<form method="POST" action="https://packages.bgaze.fr/some-url" accept-charset="UTF-8" role="form" class="form-inline">
    <input name="_token" type="hidden" value="W0o8eytKBerR8IaDkAMTZEI6vWwFaCu037EymZ2c">
    <div id="email_group" class="form-group mr-3 my-1">
        <label for="email" class="mr-2">Email</label>
        <div>
            <input id="email" class="form-control" name="email" type="email">
        </div>
    </div>
    <div id="password_group" class="form-group mr-3 my-1">
        <label for="password" class="mr-2">Password</label>
        <div>
            <input id="password" class="form-control" name="password" type="password" value="">
        </div>
    </div>
    <div id="remember_me_group" class="form-group mr-3 my-1">
        <div>
            <div class="custom-control custom-switch">
                <input id="remember_me" class="custom-control-input" name="remember_me" type="checkbox" value="1">
                <label for="remember_me" class="custom-control-label">Remember me</label>
            </div>
        </div>
    </div>
    <input class="mr-3 my-1 btn btn-primary" type="submit" value="Login">
</form>
@inline(['url' => 'some-url', 'lspace' => 'mr-3', 'hspace' => 'mr-5', 'vspace' => 'my-4'])
    @email('email')
    @password('password')
    @checkbox('remember_me', null, 1, null, ['switch' => true])
    @submit('Login')
@close
<form method="POST" action="https://packages.bgaze.fr/some-url" accept-charset="UTF-8" role="form" class="form-inline">
    <input name="_token" type="hidden" value="W0o8eytKBerR8IaDkAMTZEI6vWwFaCu037EymZ2c">
    <div id="email_group" class="form-group mr-5 my-4">
        <label for="email" class="mr-3">Email</label>
        <div>
            <input id="email" class="form-control" name="email" type="email">
        </div>
    </div>
    <div id="password_group" class="form-group mr-5 my-4">
        <label for="password" class="mr-3">Password</label>
        <div>
            <input id="password" class="form-control" name="password" type="password" value="">
        </div>
    </div>
    <div id="remember_me_group" class="form-group mr-5 my-4">
        <div>
            <div class="custom-control custom-switch">
                <input id="remember_me" class="custom-control-input" name="remember_me" type="checkbox" value="1">
                <label for="remember_me" class="custom-control-label">Remember me</label>
            </div>
        </div>
    </div>
    <input class="mr-5 my-4 btn btn-primary" type="submit" value="Login">
</form>

Model binding

Model binding allows to populate a form based on a model attributes.
Fields will be populated with this priority: Session (Old Input) > Explicit value > Model attribute.

To open a model binded form, use the model option.
Passed value must be an instance of Illuminate\Database\Eloquent\Model otherwise it will be ignored. 

<!-- Using an url -->
@open(['model' => $user, 'url' => url('users/store')])

<!-- Using a named route -->
@open(['model' => $user, 'route' => 'users.store'])
@open(['model' => $user, 'route' => ['users.update', $user->id]])

<!-- Using a controller action -->
@open(['model' => $user, 'action' => 'UserController@store'])
@open(['model' => $user, 'action' => ['UserController@update', $user->id]])

If you provide store and update options, BF will automatically set form action and method based on model existance.
For update action, model route key will be automatically populated. 

<!-- Using named routes -->
@open(['model' => $user, 'store' => 'users.store', 'update' => 'users.update'])

<!-- Using controller actions -->
@open(['model' => $user, 'store' => 'UserController@store', 'update' => 'UserController@update'])

<!-- You may pass parameters too, but remember that model route key will be added in last position -->
@open(['model' => $user, 'store' => ['users.store', $routeParameter], 'update' => ['users.update', $routeParameter]])
@open(['model' => $user, 'store' => ['UserController@store', $routeParameter], 'update' => ['UserController@update', $routeParameter]])

Form inputs

Creating inputs

Most of form input functions accept following four arguments:

name
The name of the field.
Unless they are explicitly provided, name will also be used as id attribute and as base for the form group id attribute.
label
The label of the field.
Please note that HTML escaping is disabled on labels to ease complex label creation.
If label is null, it will be generated based on name value.
If label is false, no label will be inserted.
value
The value of the field.
Field value is automatically evaluated with this priority:
Session (Old Input) > Explicit value > Model attribute (model binded forms only).
Most of times, you just need to set null as value.
options
An array of options.
Any value passed that is not in field options list will be used as HTML attribute.
Options take precedence on attributes, to use an option key as HTML attribute, prefix it with a ~. 

<!-- Simple -->
@text('simple')

<!-- Disabled -->
@text('disabled', null, 'custom value', ['disabled' => true])

<!-- Custom -->
@text('custom', 'Custom', null, ['id' => 'custom-id', 'placeholder' => 'Enter a value'])

<!-- Help text -->
@text('help_text', 'Field with help text', null, ['help' => 'This is a help text'])

<!-- Custom form group -->
@text('custom_group', 'Custom form group', null, [
    'group' => [
        'id' => 'custom-group-id',
        'class' => 'p-2',
        'style' => 'border: 1px solid #ccc;'
    ]
])

<!-- No form group -->
@text('no_form_group', 'No form group', null, ['group' => false])
This is a help text 
<!-- Simple -->
<div id="simple_group" class="form-group">
    <label for="simple">Simple</label>
    <div>
        <input id="simple" class="form-control" name="simple" type="text">
    </div>
</div>
<!-- Disabled -->
<div id="disabled_group" class="form-group">
    <label for="disabled">Disabled</label>
    <div>
        <input disabled id="disabled" class="form-control" name="disabled" type="text" value="custom value">
    </div>
</div>
<!-- Custom -->
<div id="custom_group" class="form-group">
    <label for="custom-id">Custom</label>
    <div>
        <input id="custom-id" placeholder="Enter a value" class="form-control" name="custom" type="text">
    </div>
</div>
<!-- Help text -->
<div id="help_text_group" class="form-group">
    <label for="help_text">Field with help text</label>
    <div>
        <input id="help_text" class="form-control" name="help_text" type="text">
        <small class="form-text">This is a help text</small>
    </div>
</div>
<!-- Custom form group -->
<div id="custom-group-id" class="p-2 form-group" style="border: 1px solid #ccc;">
    <label for="custom_group">Custom form group</label>
    <div>
        <input id="custom_group" class="form-control" name="custom_group" type="text">
    </div>
</div>
<!-- No form group -->
<input id="no_form_group" class="form-control" name="no_form_group" type="text">

Common options

All input functions accept following options in addition to their specific ones:

Option Default value Accepted values Description
help false false / string Display a help text under the field (see doc)
group Inherited 1 null / false / array array: a set of HTML attributes for the form-group element (extends group form option).
false: return the input element only.
layout 2 Inherited 1 vertical / horizontal / inline The Bootstrap layout of the field
show_all_errors Inherited 1 bool Show all the errors of an input or just the first one
pull_right 3 Inherited 1 false / HTML class Add an empty left column to checkboxes, radios and fields without label to preserve fields alignment
left_class 3 Inherited 1 string The default width of left column
right_class 3 Inherited 1 string The default width of right column
lspace 4 Inherited 1 false / HTML class The horizontal blank space between label and field, doesn't apply to checkboxes and radios (CSS needed)
hspace 4 Inherited 1 false / HTML class The horizontal blank space between fields
vspace 4 Inherited 1 false / HTML class The vertical blank space between fields

1: Inherited from current form options, or package configuration if no opened form.
2: The layout option allows to override the current context layout. For instance, you can add a horizontal form group into a vertical form. As this is not a planned Bootstrap feature, you'll probably need to adapt CSS accordingly.
3: Horizontal layout only.
4: Inline layout only.

Text inputs

Text inputs funtions are:

  • BF::text() / @text()
  • BF::email() / @email()
  • BF::url() / @url()
  • BF::tel() / @tel()
  • BF::number() / @number()
  • BF::date() / @date()
  • BF::time() / @time()
  • BF::color() / @color()
  • BF::textarea() / @textarea()
  • BF::password() / @password()

Signature:

All these functions signature is the same, except password input that doesn't accept a value:

BF::text($name, $label = null, $value = null, array $options = [])
@text($name, $label = null, $value = null, array $options = [])

BF::password($name, $label = null, array $options = [])
@password($name, $label = null, array $options = [])

<!-- Small input -->
@date('small_date_input', null, null, ['size' => 'sm'])

<!-- Large input -->
@tel('large_tel_input', null, null, ['size' => 'lg', 'placeholder' => 'Phone'])

<!-- Input groups -->
@email('email_input_group', null, null, ['prepend' => '<span class="input-group-text">@</span>', 'placeholder' => 'Email'])
@number('number_input_group', null, null, ['append' => '<span class="input-group-text">$</span>', 'placeholder' => 'Price'])
@
$
<!-- Small input -->
<div id="small_date_input_group" class="form-group">
    <label for="small_date_input">Small date input</label>
    <div>
        <input id="small_date_input" class="form-control form-control-sm" name="small_date_input" type="date">
    </div>
</div>
<!-- Large input -->
<div id="large_tel_input_group" class="form-group">
    <label for="large_tel_input">Large tel input</label>
    <div>
        <input placeholder="Phone" id="large_tel_input" class="form-control form-control-lg" name="large_tel_input" type="tel">
    </div>
</div>
<!-- Input groups -->
<div id="email_input_group_group" class="form-group">
    <label for="email_input_group">Email input group</label>
    <div>
        <div class="input-group">
            <div class="input-group-prepend"><span class="input-group-text">@</span></div>
            <input placeholder="Email" id="email_input_group" class="form-control" name="email_input_group" type="email">
        </div>
    </div>
</div>
<div id="number_input_group_group" class="form-group">
    <label for="number_input_group">Number input group</label>
    <div>
        <div class="input-group">
            <input placeholder="Price" id="number_input_group" class="form-control" name="number_input_group" type="number">
            <div class="input-group-append"><span class="input-group-text">$</span></div>
        </div>
    </div>
</div>

Options:

In addition to common options, following ones are accepted:

Option Default value Accepted values Description
size null null / sm / lg The size of the field (see doc)
append false false / string / array An input group prefix (see Input groups for details)
prepend false false / string / array An input group suffix (see Input groups for details)

Checkbox & radio

Single input:

Pass a boolean into checked argument to force input's checked state.

BF::checkbox($name, $label = null, $value = 1, $checked = null, array $options = [])
@checkbox($name, $label = null, $value = 1, $checked = null, array $options = [])

BF::radio($name, $label = null, $value = 1, $checked = null, array $options = [])
@radio($name, $label = null, $value = 1, $checked = null, array $options = [])

<!-- Standards -->
@radio('radio')
@radio('radio_without_label', false)
<p>
    @radio('inline_1', null, null, null, ['inline' => true, 'group' => false])
    @radio('inline_2', null, null, null, ['inline' => true, 'group' => false])
</p>

<!-- Customs -->
@radio('custom_radio', null, null, null, ['custom' => true])
@radio('custom_radio_without_label', false, null, null, ['custom' => true])
<p>
    @radio('inline_1', null, null, null, ['custom' => true, 'inline' => true, 'group' => false])
    @radio('inline_2', null, null, null, ['custom' => true, 'inline' => true, 'group' => false])
</p>

<!-- Standards -->
<div id="radio_group" class="form-group">
    <div>
        <div class="form-check">
            <input id="radio" class="form-check-input" name="radio" type="radio" value="radio">
            <label for="radio" class="form-check-label">Radio</label>
        </div>
    </div>
</div>
<div id="radio_without_label_group" class="form-group">
    <div>
        <div class="form-check">
            <input id="radio_without_label" class="form-check-input position-static" name="radio_without_label" type="radio" value="radio_without_label">
        </div>
    </div>
</div>
<p>
    <div class="form-check form-check-inline">
        <input id="inline_1" class="form-check-input" name="inline_1" type="radio" value="inline_1">
        <label for="inline_1" class="form-check-label">Inline 1</label>
    </div>
    <div class="form-check form-check-inline">
        <input id="inline_2" class="form-check-input" name="inline_2" type="radio" value="inline_2">
        <label for="inline_2" class="form-check-label">Inline 2</label>
    </div>
</p>
<!-- Customs -->
<div id="custom_radio_group" class="form-group">
    <div>
        <div class="custom-control custom-radio">
            <input id="custom_radio" class="custom-control-input" name="custom_radio" type="radio" value="custom_radio">
            <label for="custom_radio" class="custom-control-label">Custom radio</label>
        </div>
    </div>
</div>
<div id="custom_radio_without_label_group" class="form-group">
    <div>
        <div class="custom-control custom-radio">
            <input id="custom_radio_without_label" class="custom-control-input" name="custom_radio_without_label" type="radio" value="custom_radio_without_label">
            <label for="custom_radio_without_label" class="custom-control-label"></label>
        </div>
    </div>
</div>
<p>
    <div class="custom-control custom-control-inline custom-radio">
        <input id="inline_1" class="custom-control-input" name="inline_1" type="radio" value="inline_1">
        <label for="inline_1" class="custom-control-label">Inline 1</label>
    </div>
    <div class="custom-control custom-control-inline custom-radio">
        <input id="inline_2" class="custom-control-input" name="inline_2" type="radio" value="inline_2">
        <label for="inline_2" class="custom-control-label">Inline 2</label>
    </div>
</p>
<!-- Standards -->
@checkbox('checkbox')
@checkbox('checkbox_without_label', false)
<p>
    @checkbox('inline_1', null, null, null, ['inline' => true, 'group' => false])
    @checkbox('inline_2', null, null, null, ['inline' => true, 'group' => false])
</p>

<!-- Customs -->
@checkbox('custom_checkbox', null, null, null, ['custom' => true])
@checkbox('custom_checkbox_without_label', false, null, null, ['custom' => true])
<p>
    @checkbox('inline_1', null, null, null, ['custom' => true, 'inline' => true, 'group' => false])
    @checkbox('inline_2', null, null, null, ['custom' => true, 'inline' => true, 'group' => false])
</p>

<!-- Switches -->
@checkbox('custom_switch', null, null, null, ['switch' => true])
@checkbox('custom_switch_without_label', false, null, null, ['switch' => true])
<p>
    @checkbox('inline_1', null, null, null, ['switch' => true, 'inline' => true, 'group' => false])
    @checkbox('inline_2', null, null, null, ['switch' => true, 'inline' => true, 'group' => false])
</p>

<!-- Standards -->
<div id="checkbox_group" class="form-group">
    <div>
        <div class="form-check">
            <input id="checkbox" class="form-check-input" name="checkbox" type="checkbox" value="1">
            <label for="checkbox" class="form-check-label">Checkbox</label>
        </div>
    </div>
</div>
<div id="checkbox_without_label_group" class="form-group">
    <div>
        <div class="form-check">
            <input id="checkbox_without_label" class="form-check-input position-static" name="checkbox_without_label" type="checkbox" value="1">
        </div>
    </div>
</div>
<p>
    <div class="form-check form-check-inline">
        <input id="inline_1" class="form-check-input" name="inline_1" type="checkbox">
        <label for="inline_1" class="form-check-label">Inline 1</label>
    </div>
    <div class="form-check form-check-inline">
        <input id="inline_2" class="form-check-input" name="inline_2" type="checkbox">
        <label for="inline_2" class="form-check-label">Inline 2</label>
    </div>
</p>
<!-- Customs -->
<div id="custom_checkbox_group" class="form-group">
    <div>
        <div class="custom-control custom-checkbox">
            <input id="custom_checkbox" class="custom-control-input" name="custom_checkbox" type="checkbox">
            <label for="custom_checkbox" class="custom-control-label">Custom checkbox</label>
        </div>
    </div>
</div>
<div id="custom_checkbox_without_label_group" class="form-group">
    <div>
        <div class="custom-control custom-checkbox">
            <input id="custom_checkbox_without_label" class="custom-control-input" name="custom_checkbox_without_label" type="checkbox">
            <label for="custom_checkbox_without_label" class="custom-control-label"></label>
        </div>
    </div>
</div>
<p>
    <div class="custom-control custom-control-inline custom-checkbox">
        <input id="inline_1" class="custom-control-input" name="inline_1" type="checkbox">
        <label for="inline_1" class="custom-control-label">Inline 1</label>
    </div>
    <div class="custom-control custom-control-inline custom-checkbox">
        <input id="inline_2" class="custom-control-input" name="inline_2" type="checkbox">
        <label for="inline_2" class="custom-control-label">Inline 2</label>
    </div>
</p>
<!-- Switches -->
<div id="custom_switch_group" class="form-group">
    <div>
        <div class="custom-control custom-switch">
            <input id="custom_switch" class="custom-control-input" name="custom_switch" type="checkbox">
            <label for="custom_switch" class="custom-control-label">Custom switch</label>
        </div>
    </div>
</div>
<div id="custom_switch_without_label_group" class="form-group">
    <div>
        <div class="custom-control custom-switch">
            <input id="custom_switch_without_label" class="custom-control-input" name="custom_switch_without_label" type="checkbox">
            <label for="custom_switch_without_label" class="custom-control-label"></label>
        </div>
    </div>
</div>
<p>
    <div class="custom-control custom-control-inline custom-switch">
        <input id="inline_1" class="custom-control-input" name="inline_1" type="checkbox">
        <label for="inline_1" class="custom-control-label">Inline 1</label>
    </div>
    <div class="custom-control custom-control-inline custom-switch">
        <input id="inline_2" class="custom-control-input" name="inline_2" type="checkbox">
        <label for="inline_2" class="custom-control-label">Inline 2</label>
    </div>
</p>

Inputs group:

choices
A value => label associative array defining group's inputs.
Example: [1 => 'Yes', 0 => 'No']
checked
An array containing the value(s) of checked input(s).
If only one input is checked, you can pass its value directly. 
BF::checkboxes($name, $label = null, array $choices = [], $checked = null, array $options = [])
@checkboxes($name, $label = null, array $choices = [], $checked = null, array $options = [])

BF::radios($name, $label = null, array $choices = [], $checked = null, array $options = [])
@radios($name, $label = null, array $choices = [], $checked = null, array $options = [])

@php($options = ['foo' => 'Foo', 'bar' => 'Bar', 'baz' => 'Baz'])

<!-- Standards -->
@radios('radios_group', null, $options)
@radios('inline_radios_group', null, $options, 'bar', ['inline' => true])

<!-- Customs -->
@radios('custom_radios_group', null, $options, 'foo', ['custom' => true])
@radios('custom_inline_radios_group', null, $options, 'baz', ['custom' => true, 'inline' => true])
<!-- Standards -->
<div id="radios_group_group" class="form-group">
    <label for="radios_group">Radios group</label>
    <div>
        <div class="form-check">
            <input id="radios_group_foo" class="form-check-input" name="radios_group" type="radio" value="foo">
            <label for="radios_group_foo" class="form-check-label">Foo</label>
        </div>
        <div class="form-check">
            <input id="radios_group_bar" class="form-check-input" name="radios_group" type="radio" value="bar">
            <label for="radios_group_bar" class="form-check-label">Bar</label>
        </div>
        <div class="form-check">
            <input id="radios_group_baz" class="form-check-input" name="radios_group" type="radio" value="baz">
            <label for="radios_group_baz" class="form-check-label">Baz</label>
        </div>
    </div>
</div>
<div id="inline_radios_group_group" class="form-group">
    <label for="inline_radios_group">Inline radios group</label>
    <div>
        <div class="form-check form-check-inline">
            <input id="inline_radios_group_foo" class="form-check-input" name="inline_radios_group" type="radio" value="foo">
            <label for="inline_radios_group_foo" class="form-check-label">Foo</label>
        </div>
        <div class="form-check form-check-inline">
            <input id="inline_radios_group_bar" class="form-check-input" checked="checked" name="inline_radios_group" type="radio" value="bar">
            <label for="inline_radios_group_bar" class="form-check-label">Bar</label>
        </div>
        <div class="form-check form-check-inline">
            <input id="inline_radios_group_baz" class="form-check-input" name="inline_radios_group" type="radio" value="baz">
            <label for="inline_radios_group_baz" class="form-check-label">Baz</label>
        </div>
    </div>
</div>
<!-- Customs -->
<div id="custom_radios_group_group" class="form-group">
    <label for="custom_radios_group">Custom radios group</label>
    <div>
        <div class="custom-control custom-radio">
            <input id="custom_radios_group_foo" class="custom-control-input" checked="checked" name="custom_radios_group" type="radio" value="foo">
            <label for="custom_radios_group_foo" class="custom-control-label">Foo</label>
        </div>
        <div class="custom-control custom-radio">
            <input id="custom_radios_group_bar" class="custom-control-input" name="custom_radios_group" type="radio" value="bar">
            <label for="custom_radios_group_bar" class="custom-control-label">Bar</label>
        </div>
        <div class="custom-control custom-radio">
            <input id="custom_radios_group_baz" class="custom-control-input" name="custom_radios_group" type="radio" value="baz">
            <label for="custom_radios_group_baz" class="custom-control-label">Baz</label>
        </div>
    </div>
</div>
<div id="custom_inline_radios_group_group" class="form-group">
    <label for="custom_inline_radios_group">Custom inline radios group</label>
    <div>
        <div class="custom-control custom-control-inline custom-radio">
            <input id="custom_inline_radios_group_foo" class="custom-control-input" name="custom_inline_radios_group" type="radio" value="foo">
            <label for="custom_inline_radios_group_foo" class="custom-control-label">Foo</label>
        </div>
        <div class="custom-control custom-control-inline custom-radio">
            <input id="custom_inline_radios_group_bar" class="custom-control-input" name="custom_inline_radios_group" type="radio" value="bar">
            <label for="custom_inline_radios_group_bar" class="custom-control-label">Bar</label>
        </div>
        <div class="custom-control custom-control-inline custom-radio">
            <input id="custom_inline_radios_group_baz" class="custom-control-input" checked="checked" name="custom_inline_radios_group" type="radio" value="baz">
            <label for="custom_inline_radios_group_baz" class="custom-control-label">Baz</label>
        </div>
    </div>
</div>
@php($options = ['foo' => 'Foo', 'bar' => 'Bar', 'baz' => 'Baz'])

<!-- Standards -->
@checkboxes('checkboxes_group', null, $options)
@checkboxes('inline_checkboxes_group', null, $options, ['bar', 'baz'], ['inline' => true])

<!-- Customs -->
@checkboxes('custom_checkboxes_group', null, $options, 'foo', ['custom' => true])
@checkboxes('custom_inline_checkboxes_group', null, $options, ['foo', 'baz'], ['custom' => true, 'inline' => true])

<!-- Switches -->
@checkboxes('switches_group', null, $options, 'baz', ['switch' => true])
@checkboxes('inline_switches_group', null, $options, ['foo', 'bar'], ['switch' => true, 'inline' => true])
<!-- Standards -->
<div id="checkboxes_group_group" class="form-group">
    <label for="checkboxes_group">Checkboxes group</label>
    <div>
        <div class="form-check">
            <input id="checkboxes_group_foo" class="form-check-input" name="checkboxes_group" type="checkbox" value="foo">
            <label for="checkboxes_group_foo" class="form-check-label">Foo</label>
        </div>
        <div class="form-check">
            <input id="checkboxes_group_bar" class="form-check-input" name="checkboxes_group" type="checkbox" value="bar">
            <label for="checkboxes_group_bar" class="form-check-label">Bar</label>
        </div>
        <div class="form-check">
            <input id="checkboxes_group_baz" class="form-check-input" name="checkboxes_group" type="checkbox" value="baz">
            <label for="checkboxes_group_baz" class="form-check-label">Baz</label>
        </div>
    </div>
</div>
<div id="inline_checkboxes_group_group" class="form-group">
    <label for="inline_checkboxes_group">Inline checkboxes group</label>
    <div>
        <div class="form-check form-check-inline">
            <input id="inline_checkboxes_group_foo" class="form-check-input" name="inline_checkboxes_group" type="checkbox" value="foo">
            <label for="inline_checkboxes_group_foo" class="form-check-label">Foo</label>
        </div>
        <div class="form-check form-check-inline">
            <input id="inline_checkboxes_group_bar" class="form-check-input" checked="checked" name="inline_checkboxes_group" type="checkbox" value="bar">
            <label for="inline_checkboxes_group_bar" class="form-check-label">Bar</label>
        </div>
        <div class="form-check form-check-inline">
            <input id="inline_checkboxes_group_baz" class="form-check-input" checked="checked" name="inline_checkboxes_group" type="checkbox" value="baz">
            <label for="inline_checkboxes_group_baz" class="form-check-label">Baz</label>
        </div>
    </div>
</div>
<!-- Customs -->
<div id="custom_checkboxes_group_group" class="form-group">
    <label for="custom_checkboxes_group">Custom checkboxes group</label>
    <div>
        <div class="custom-control custom-checkbox">
            <input id="custom_checkboxes_group_foo" class="custom-control-input" checked="checked" name="custom_checkboxes_group" type="checkbox" value="foo">
            <label for="custom_checkboxes_group_foo" class="custom-control-label">Foo</label>
        </div>
        <div class="custom-control custom-checkbox">
            <input id="custom_checkboxes_group_bar" class="custom-control-input" name="custom_checkboxes_group" type="checkbox" value="bar">
            <label for="custom_checkboxes_group_bar" class="custom-control-label">Bar</label>
        </div>
        <div class="custom-control custom-checkbox">
            <input id="custom_checkboxes_group_baz" class="custom-control-input" name="custom_checkboxes_group" type="checkbox" value="baz">
            <label for="custom_checkboxes_group_baz" class="custom-control-label">Baz</label>
        </div>
    </div>
</div>
<div id="custom_inline_checkboxes_group_group" class="form-group">
    <label for="custom_inline_checkboxes_group">Custom inline checkboxes group</label>
    <div>
        <div class="custom-control custom-control-inline custom-checkbox">
            <input id="custom_inline_checkboxes_group_foo" class="custom-control-input" checked="checked" name="custom_inline_checkboxes_group" type="checkbox" value="foo">
            <label for="custom_inline_checkboxes_group_foo" class="custom-control-label">Foo</label>
        </div>
        <div class="custom-control custom-control-inline custom-checkbox">
            <input id="custom_inline_checkboxes_group_bar" class="custom-control-input" name="custom_inline_checkboxes_group" type="checkbox" value="bar">
            <label for="custom_inline_checkboxes_group_bar" class="custom-control-label">Bar</label>
        </div>
        <div class="custom-control custom-control-inline custom-checkbox">
            <input id="custom_inline_checkboxes_group_baz" class="custom-control-input" checked="checked" name="custom_inline_checkboxes_group" type="checkbox" value="baz">
            <label for="custom_inline_checkboxes_group_baz" class="custom-control-label">Baz</label>
        </div>
    </div>
</div>
<!-- Switches -->
<div id="switches_group_group" class="form-group">
    <label for="switches_group">Switches group</label>
    <div>
        <div class="custom-control custom-switch">
            <input id="switches_group_foo" class="custom-control-input" name="switches_group" type="checkbox" value="foo">
            <label for="switches_group_foo" class="custom-control-label">Foo</label>
        </div>
        <div class="custom-control custom-switch">
            <input id="switches_group_bar" class="custom-control-input" name="switches_group" type="checkbox" value="bar">
            <label for="switches_group_bar" class="custom-control-label">Bar</label>
        </div>
        <div class="custom-control custom-switch">
            <input id="switches_group_baz" class="custom-control-input" checked="checked" name="switches_group" type="checkbox" value="baz">
            <label for="switches_group_baz" class="custom-control-label">Baz</label>
        </div>
    </div>
</div>
<div id="inline_switches_group_group" class="form-group">
    <label for="inline_switches_group">Inline switches group</label>
    <div>
        <div class="custom-control custom-control-inline custom-switch">
            <input id="inline_switches_group_foo" class="custom-control-input" checked="checked" name="inline_switches_group" type="checkbox" value="foo">
            <label for="inline_switches_group_foo" class="custom-control-label">Foo</label>
        </div>
        <div class="custom-control custom-control-inline custom-switch">
            <input id="inline_switches_group_bar" class="custom-control-input" checked="checked" name="inline_switches_group" type="checkbox" value="bar">
            <label for="inline_switches_group_bar" class="custom-control-label">Bar</label>
        </div>
        <div class="custom-control custom-control-inline custom-switch">
            <input id="inline_switches_group_baz" class="custom-control-input" name="inline_switches_group" type="checkbox" value="baz">
            <label for="inline_switches_group_baz" class="custom-control-label">Baz</label>
        </div>
    </div>
</div>

Options:

In addition to common options, following ones are accepted:

Option Default value Accepted values Description
inline false bool Create inline input(s) (doc)
custom Inherited 1 bool Create custom input(s) (doc)
switch 2 false bool Create switch custom input(s) (doc)

1: Inherited from current form options, or package configuration if no opened form.
2: Checkbox inputs and groups only.

Select input

Signature:

choices
The input options as a value => label associative array: ['L' => 'Large', 'S' => 'Small'].
Options groups can be created using nested array: ['Cats' => ['leopard' => 'Leopard'],'Dogs' => ['spaniel' => 'Spaniel']]
checked
An array of selected option(s) value(s).
If only one option is selected, you can pass its value directly. 
BF::select($name, $label = null, $choices = [], $selected = null, array $options = [])
@select($name, $label = null, $choices = [], $selected = null, array $options = [])

@php($options = ['foo' => 'Foo', 'bar' => 'Bar', 'baz' => 'Baz'])

<!-- Simple input -->
@select('select', null, $options)

<!-- Small input -->
@select('small', null, $options, 'foo', ['size' => 'sm'])

<!-- Large input -->
@select('large', null, $options, 'bar', ['size' => 'lg'])

<!-- Input groups -->
@select('with_prepend', null, $options, 'baz', ['prepend' => '<span class="input-group-text">@</span>'])
@select('with_append', null, $options, 'baz', ['append' => '<span class="input-group-text">@</span>'])

<!-- Option groups -->
@select('options_groups', null, ['Cats' => ['leopard' => 'Leopard'], 'Dogs' => ['spaniel' => 'Spaniel']])

<!-- Multiple -->
@select('multiple', null, $options, ['foo', 'baz'], ['multiple' => true])
@
@
<!-- Simple input -->
<div id="select_group" class="form-group">
    <label for="select">Select</label>
    <div>
        <select id="select" class="form-control" name="select">
            <option value="foo">Foo</option>
            <option value="bar">Bar</option>
            <option value="baz">Baz</option>
        </select>
    </div>
</div>
<!-- Small input -->
<div id="small_group" class="form-group">
    <label for="small">Small</label>
    <div>
        <select id="small" class="form-control form-control-sm" name="small">
            <option value="foo" selected="selected">Foo</option>
            <option value="bar">Bar</option>
            <option value="baz">Baz</option>
        </select>
    </div>
</div>
<!-- Large input -->
<div id="large_group" class="form-group">
    <label for="large">Large</label>
    <div>
        <select id="large" class="form-control form-control-lg" name="large">
            <option value="foo">Foo</option>
            <option value="bar" selected="selected">Bar</option>
            <option value="baz">Baz</option>
        </select>
    </div>
</div>
<!-- Input groups -->
<div id="with_prepend_group" class="form-group">
    <label for="with_prepend">With prepend</label>
    <div>
        <div class="input-group">
            <div class="input-group-prepend"><span class="input-group-text">@</span></div>
            <select id="with_prepend" class="form-control" name="with_prepend">
                <option value="foo">Foo</option>
                <option value="bar">Bar</option>
                <option value="baz" selected="selected">Baz</option>
            </select>
        </div>
    </div>
</div>
<div id="with_append_group" class="form-group">
    <label for="with_append">With append</label>
    <div>
        <div class="input-group">
            <select id="with_append" class="form-control" name="with_append">
                <option value="foo">Foo</option>
                <option value="bar">Bar</option>
                <option value="baz" selected="selected">Baz</option>
            </select>
            <div class="input-group-append"><span class="input-group-text">@</span></div>
        </div>
    </div>
</div>
<!-- Option groups -->
<div id="options_groups_group" class="form-group">
    <label for="options_groups">Options groups</label>
    <div>
        <select id="options_groups" class="form-control" name="options_groups">
            <optgroup label="Cats">
                <option value="leopard">Leopard</option>
            </optgroup>
            <optgroup label="Dogs">
                <option value="spaniel">Spaniel</option>
            </optgroup>
        </select>
    </div>
</div>
<!-- Multiple -->
<div id="multiple_group" class="form-group">
    <label for="multiple">Multiple</label>
    <div>
        <select multiple id="multiple" class="form-control" name="multiple">
            <option value="foo" selected="selected">Foo</option>
            <option value="bar">Bar</option>
            <option value="baz" selected="selected">Baz</option>
        </select>
    </div>
</div>
@php($options = ['foo' => 'Foo', 'bar' => 'Bar', 'baz' => 'Baz'])

<!-- Simple input -->
@select('select', null, $options, null, ['custom' => true])

<!-- Small input -->
@select('small', null, $options, 'foo', ['custom' => true, 'size' => 'sm'])

<!-- Large input -->
@select('large', null, $options, 'bar', ['custom' => true, 'size' => 'lg'])

<!-- Input groups -->
@select('with_prepend', null, $options, 'baz', ['custom' => true, 'prepend' => '<span class="input-group-text">@</span>'])
@select('with_append', null, $options, 'baz', ['custom' => true, 'append' => '<span class="input-group-text">@</span>'])

<!-- Option groups -->
@select('options_groups', null, ['Cats' => ['leopard' => 'Leopard'], 'Dogs' => ['spaniel' => 'Spaniel']], null, ['custom' => true])

<!-- Multiple -->
@select('multiple', null, $options, ['foo', 'baz'], ['custom' => true, 'multiple' => true])
@
@
<!-- Simple input -->
<div id="select_group" class="form-group">
    <label for="select">Select</label>
    <div>
        <select id="select" class="custom-select" name="select">
            <option value="foo">Foo</option>
            <option value="bar">Bar</option>
            <option value="baz">Baz</option>
        </select>
    </div>
</div>
<!-- Small input -->
<div id="small_group" class="form-group">
    <label for="small">Small</label>
    <div>
        <select id="small" class="custom-select custom-select-sm" name="small">
            <option value="foo" selected="selected">Foo</option>
            <option value="bar">Bar</option>
            <option value="baz">Baz</option>
        </select>
    </div>
</div>
<!-- Large input -->
<div id="large_group" class="form-group">
    <label for="large">Large</label>
    <div>
        <select id="large" class="custom-select custom-select-lg" name="large">
            <option value="foo">Foo</option>
            <option value="bar" selected="selected">Bar</option>
            <option value="baz">Baz</option>
        </select>
    </div>
</div>
<!-- Input groups -->
<div id="with_prepend_group" class="form-group">
    <label for="with_prepend">With prepend</label>
    <div>
        <div class="input-group">
            <div class="input-group-prepend"><span class="input-group-text">@</span></div>
            <select id="with_prepend" class="custom-select" name="with_prepend">
                <option value="foo">Foo</option>
                <option value="bar">Bar</option>
                <option value="baz" selected="selected">Baz</option>
            </select>
        </div>
    </div>
</div>
<div id="with_append_group" class="form-group">
    <label for="with_append">With append</label>
    <div>
        <div class="input-group">
            <select id="with_append" class="custom-select" name="with_append">
                <option value="foo">Foo</option>
                <option value="bar">Bar</option>
                <option value="baz" selected="selected">Baz</option>
            </select>
            <div class="input-group-append"><span class="input-group-text">@</span></div>
        </div>
    </div>
</div>
<!-- Option groups -->
<div id="options_groups_group" class="form-group">
    <label for="options_groups">Options groups</label>
    <div>
        <select id="options_groups" class="custom-select" name="options_groups">
            <optgroup label="Cats">
                <option value="leopard">Leopard</option>
            </optgroup>
            <optgroup label="Dogs">
                <option value="spaniel">Spaniel</option>
            </optgroup>
        </select>
    </div>
</div>
<!-- Multiple -->
<div id="multiple_group" class="form-group">
    <label for="multiple">Multiple</label>
    <div>
        <select multiple id="multiple" class="custom-select" name="multiple">
            <option value="foo" selected="selected">Foo</option>
            <option value="bar">Bar</option>
            <option value="baz" selected="selected">Baz</option>
        </select>
    </div>
</div>

Options:

In addition to common options, following ones are accepted:

Option Default value Accepted values Description
custom Inherited 1 bool Create a custom file input (doc)
size null null / sm / lg The size of the field (doc)
append false false / string / array An input group prefix (see Input groups)
prepend false false / string / array An input group suffix (see Input groups)

1: Inherited from current form options, or package configuration if no opened form.

File input

Custom file input requires additional JavaScript.
The recommended plugin is bs-custom-file-input.

Signature:

BF::file($name, $label = null, array $options = [])
@file($name, $label = null, array $options = [])

<!-- Simple input -->
@file('file_input')

<!-- Custom input -->
@file('custom_file_input', null, ['custom' => true])

<!-- Custom input texts -->
@file('custom_file_input', null, ['custom' => true, 'text' => 'Please choose a file', 'button' => 'Choose'])

<!-- Input groups -->
@file('with_prepend', null, ['custom' => true, 'prepend' => '<span class="input-group-text">@</span>'])
@file('with_append', null, ['custom' => true, 'append' => '<span class="input-group-text">@</span>'])
@
@
<!-- Simple input -->
<div id="file_input_group" class="form-group">
    <label for="file_input">File input</label>
    <div>
        <input id="file_input" name="file_input" type="file">
    </div>
</div>
<!-- Custom input -->
<div id="custom_file_input_group" class="form-group">
    <label for="custom_file_input">Custom file input</label>
    <div>
        <div class="custom-file">
            <input id="custom_file_input" class="custom-file-input" name="custom_file_input" type="file">
            <label for="custom_file_input" class="custom-file-label">Choose file</label>
        </div>
    </div>
</div>
<!-- Custom input texts -->
<div id="custom_file_input_group" class="form-group">
    <label for="custom_file_input">Custom file input</label>
    <div>
        <div class="custom-file">
            <input id="custom_file_input" class="custom-file-input" name="custom_file_input" type="file">
            <label for="custom_file_input" class="custom-file-label" data-browse="Choose">Please choose a file</label>
        </div>
    </div>
</div>
<!-- Input groups -->
<div id="with_prepend_group" class="form-group">
    <label for="with_prepend">With prepend</label>
    <div>
        <div class="input-group">
            <div class="input-group-prepend"><span class="input-group-text">@</span></div>
            <div class="custom-file">
                <input id="with_prepend" class="custom-file-input" name="with_prepend" type="file">
                <label for="with_prepend" class="custom-file-label">Choose file</label>
            </div>
        </div>
    </div>
</div>
<div id="with_append_group" class="form-group">
    <label for="with_append">With append</label>
    <div>
        <div class="input-group">
            <div class="custom-file">
                <input id="with_append" class="custom-file-input" name="with_append" type="file">
                <label for="with_append" class="custom-file-label">Choose file</label>
            </div>
            <div class="input-group-append"><span class="input-group-text">@</span></div>
        </div>
    </div>
</div>

Options:

In addition to common options, following ones are accepted:

Option Default value Accepted values Description
custom Inherited 1 bool Create a custom file input (doc)
text 2 "Choose file" string The placeholder text
button 2 null string The button text
append 2 false false / string / array An input group prefix (see Input groups)
prepend 2 false false / string / array An input group suffix (see Input groups)

1: Inherited from current form options, or package configuration if no opened form.
2: Custom file inputs only.

Range input

See documentation for more details on range inputs usage.

Signature:

BF::range($name, $label = null, $value = null, array $options = [])
@range($name, $label = null, $value = null, array $options = [])

<!-- Simple input -->
@range('range')

<!-- Simple input with options -->
@range('range', null, 4, ['min' => 0, 'max' => 20, 'step' => 2])

<!-- Custom input -->
@range('custom_range', null, null, ['custom' => true])

<!-- Custom input with options -->
@range('custom_range', null, 7, ['custom' => true, 'min' => 0, 'max' => 10, 'step' => 0.5])
<!-- Simple input -->
<div id="range_group" class="form-group">
    <label for="range">Range</label>
    <div>
        <input id="range" class="form-control-range" name="range" type="range">
    </div>
</div>
<!-- Simple input with options -->
<div id="range_group" class="form-group">
    <label for="range">Range</label>
    <div>
        <input min="0" max="20" step="2" id="range" class="form-control-range" name="range" type="range" value="4">
    </div>
</div>
<!-- Custom input -->
<div id="custom_range_group" class="form-group">
    <label for="custom_range">Custom range</label>
    <div>
        <input id="custom_range" class="custom-range" name="custom_range" type="range">
    </div>
</div>
<!-- Custom input with options -->
<div id="custom_range_group" class="form-group">
    <label for="custom_range">Custom range</label>
    <div>
        <input min="0" max="10" step="0.5" id="custom_range" class="custom-range" name="custom_range" type="range" value="7">
    </div>
</div>

Options:

In addition to common options, following option is accepted:

Option Default value Accepted values Description
custom Inherited 1 bool Create a custom range input

1: Inherited from current form options, or package configuration if no opened form.

Misc

Hidden input

This function is an alias to Form Builder function.
As for other inputs, id attribute base on field name will be added if missing 

BF::hidden($name, $value = null, $options = [])
@hidden($name, $value = null, $options = [])

Blate template:

@hidden('hidden1')
@hidden('hidden2', 'some-value', ['id' => 'custom-id'])

Generated HTML:

<input id="hidden1" name="hidden1" type="hidden">
<input id="custom-id" name="hidden2" type="hidden" value="some-value">

Input groups

For compatible input types, set append / prepend options to create a Bootstrap input group.
See documentation for details.

These options accept a HTML string, or an array of HTML strings, so you're free to build your field addons as you want.
Please note that provided HTML is not escaped. 

<!-- Input with prepend -->
@email('input_with_prepend', null, null, [
    'prepend' => '<span class="input-group-text"><i class="fa fa-envelope"></i></span>',
    'placeholder' => 'Email address'
])

<!-- Input with append -->
@text('input_with_append', null, null, [
    'append' => '<button class="btn btn-outline-secondary" type="button">Button</button>'
])

<!-- Input with both -->
@text('input_with_both', null, null, [
    'prepend' => '<span class="input-group-text">Price</span>',
    'append' => '<span class="input-group-text">€</span>'
])

<!-- Input with addons array -->
@text('input_with_addons_array', null, null, [
    'prepend' => ['<span class="input-group-text">Price</span>', '<span class="input-group-text">€</span>'],
    'append' => '<button class="btn btn-outline-secondary" type="button">Button</button>'
])
Price
€
Price€
<!-- Input with prepend -->
<div id="input_with_prepend_group" class="form-group">
    <label for="input_with_prepend">Input with prepend</label>
    <div>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fa fa-envelope"></i></span>
            </div>
            <input placeholder="Email address" id="input_with_prepend" class="form-control" name="input_with_prepend" type="email">
        </div>
    </div>
</div>
<!-- Input with append -->
<div id="input_with_append_group" class="form-group">
    <label for="input_with_append">Input with append</label>
    <div>
        <div class="input-group">
            <input id="input_with_append" class="form-control" name="input_with_append" type="text">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button">Button</button>
            </div>
        </div>
    </div>
</div>
<!-- Input with both -->
<div id="input_with_both_group" class="form-group">
    <label for="input_with_both">Input with both</label>
    <div>
        <div class="input-group">
            <div class="input-group-prepend"><span class="input-group-text">Price</span></div>
            <input id="input_with_both" class="form-control" name="input_with_both" type="text">
            <div class="input-group-append"><span class="input-group-text">€</span></div>
        </div>
    </div>
</div>
<!-- Input with addons array -->
<div id="input_with_addons_array_group" class="form-group">
    <label for="input_with_addons_array">Input with addons array</label>
    <div>
        <div class="input-group">
            <div class="input-group-prepend"><span class="input-group-text">Price</span><span class="input-group-text">€</span></div>
            <input id="input_with_addons_array" class="form-control" name="input_with_addons_array" type="text">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button">Button</button>
            </div>
        </div>
    </div>
</div>

Label

This function is an alias to Form Builder function with escaping HTML disabled by default. 

BF::label($name, $value = null, array $options = [], $escapeHtml = false)
@label($name, $value = null, array $options = [], $escapeHtml = false)

Blate template:

@label('field_name')
@label('field_name', 'Custom label <b>with HTML</b>', ['id' => 'custom-id'])
@label('field_name', 'Custom label <b>with HTML</b>', [], true)

Generated HTML:

<label for="field_name">Field Name</label>
<label for="field_name" id="custom-id">Custom label <b>with HTML</b></label>
<label for="field_name">Custom label &lt;b&gt;with HTML&lt;/b&gt;</label>

Buttons

To create Bootstrap flavoured buttons, BF provides following helpers.

If you pass a string into the options argument, it will be prefixed by btn btn-.
If you pass an array, it will be merge on ['class' => 'btn btn-xxx'], with xxx the default button style.

Submit button:

Default style is primary.

BF::submit($value = null, $options = null)
@submit($value = null, $options = null)

<p>
    @submit()
</p>
<p>
    @submit('Submit form', 'success btn-sm')
</p>
<p>
    @submit(null, ['id' => 'submit-button'])
</p>
<p>
    @submit(null, ['class' => false])
</p>

<p>
    <input class="btn btn-primary" type="submit">
</p>
<p>
    <input class="btn btn-success btn-sm" type="submit" value="Submit form">
</p>
<p>
    <input class="btn btn-primary" id="submit-button" type="submit">
</p>
<p>
    <input type="submit">
</p>

Reset button:

Default style is danger.

BF::reset($value = null, $options = null)
@reset($value = null, $options = null)

<p>
    @reset()
</p>
<p>
    @reset('Reset form', 'warning btn-sm')
</p>
<p>
    @reset(null, ['id' => 'reset-button'])
</p>
<p>
    @reset(null, ['class' => false])
</p>

<p>
    <input class="btn btn-danger" type="reset">
</p>
<p>
    <input class="btn btn-warning btn-sm" type="reset" value="Reset form">
</p>
<p>
    <input class="btn btn-danger" id="reset-button" type="reset">
</p>
<p>
    <input type="reset">
</p>

Standard button:

Default style is primary.

BF::button($value = null, $options = null)
@button($value = null, $options = null)

<p>
    @button('Button')
</p>
<p>
    @button('<i class="fa fa-question-circle mr-2"></i> Info', 'info btn-sm')
</p>
<p>
    @button('<i class="fa fa-paper-plane mr-2"></i> Submit', ['class' => 'btn btn-primary', 'type' => 'submit'])
</p>
<p>
    @button('<i class="fa fa-exclamation-triangle mr-2"></i> Reset', ['class' => 'btn btn-danger', 'type' => 'reset'])
</p>
<p>
    @button('Button', ['class' => false])
</p>

<p>
    <button class="btn btn-primary" type="button">Button</button>
</p>
<p>
    <button class="btn btn-info btn-sm" type="button"><i class="fa fa-question-circle mr-2"></i> Info</button>
</p>
<p>
    <button class="btn btn-primary" type="submit"><i class="fa fa-paper-plane mr-2"></i> Submit</button>
</p>
<p>
    <button class="btn btn-danger" type="reset"><i class="fa fa-exclamation-triangle mr-2"></i> Reset</button>
</p>
<p>
    <button type="button">Button</button>
</p>

Link button:

Default style is primary.

BF::link($url, $title = null, $options = null)
@link($url, $title = null, $options = null)

Available methods & directives

Here is the list of available methods and directives.
Each directive is an alias to related BF facade method and works exactly like it.

If you use PhpStorm IDE, please check this gist to easily configure syntax highlighting and live templates for this package's custom Blade directives.

Facade methods Blade directives Description
BF::htmlBuilder() - Get the Laravel Collective form builder instance
BF::formBuilder() - Get the Laravel Collective HTML builder instance
BF::open() @open() Open a form (layout based on default configuration)
BF::vertical() @vertical() Open a vertical form
BF::inline() @inline() Open a inline form
BF::horizontal() @horizontal() Open a horizontal form
BF::close() @close Close a form
BF::text() @text() Create a text input
BF::email() @email() Create an email input
BF::url() @url() Create an url input
BF::tel() @tel() Create a tel input
BF::number() @number() Create a number input
BF::date() @date() Create a date input
BF::time() @time() Create a time input
BF::color() @color() Create a color input
BF::textarea() @textarea() Create a textarea
BF::password() @password() Create a password input
BF::file() @file() Create a file input
BF::hidden() @hidden() Create a hidden input
BF::select() @select() Create a select input
BF::range() @range() Create a range input
BF::checkbox() @checkbox() Create a checkbox input
BF::checkboxes() @checkboxes() Create a checkboxes group
BF::radio() @radio() Create a radio input
BF::radios() @radios() Create a radios group
BF::label() @label() Create a label
BF::submit() @submit() Create a submit input
BF::reset() @reset() Create a reset input
BF::button() @button() Create a button
BF::link() @link() Create a link button

Packages

Feel free to visit my other packages:

PHP-CS-Fixer for Laravel 5.5+

This package allows to use PHP-CS-Fixer right into Laravel 5.5+ applications to format PHP code.

Github Documentation

Bootstrap 4 dialogs

BSD is a tiny and flexible collection of dialog popups based on Bootstrap 4 modals.
Custom dialogs can be easily defined, in addition to built-in ones (alert, confirm and prompt).

Github Documentation

Bootstrap Color Palette

BCP is a simple color palette for Bootstrap 4, like in Google doc, built on the top of Bootstrap 4 Popover plugin.

Github Documentation

Laravel Kvstore

A simple and easy to use key-value database store for Laravel 5.5+
All values are stored into database and managed using cache to avoid unecessary queries.
Casting is supported to manage values type.

Github Documentation

Php DotEnv

A simple and standalone DotEnv parser for PHP 5.6+

Github Documentation

Blade Indenter

A very simple formatter for Laravel 5.8+ Blade templates

Github Documentation