Support for Bootstrap v5

README.md

@@ -75,7 +75,7 @@ If you're using Tailwind, make sure the right plugin ([v1](https://github.com/ta
 </x-form>
 ```
 
-<img src="https://github.com/pascalbaljetmedia/laravel-form-components/blob/master/quick-example-form.png?raw=true" width="450" />
+<img src="https://github.com/pascalbaljetmedia/laravel-form-components/blob/master/quick-example-form.png?raw=true" width="450"  alt="Quick example form"/>
 
 ## Preface
 
@@ -130,7 +130,7 @@ You can also choose to use a `placeholder` instead of a label, and of course you
 <x-form-input type="email" name="current_email" placeholder="Current email address" />
 ```
 
-By default every element shows validation errors but you can hide them if you want.
+By default, every element shows validation errors, but you can hide them if you want.
 
 ```blade
 <x-form-textarea name="description" :show-errors="false" />
@@ -406,29 +406,31 @@ By the default, the errors messages are positioned under the element. To show th
 
 ### Submit button
 
-The label defaults to *Submit* but you can use the slot to provide your own content.
+The label defaults to *Submit*, but you can use the slot to provide your own content.
 
 ```blade
 <x-form-submit>
     <span class="text-green-500">Send</span>
 </x-form-submit>
 ```
 
-### Bootstrap 4
+### Bootstrap
 
-You can switch to [Bootstrap 4](https://getbootstrap.com/docs/4.0/components/forms/) by updating the `framework` setting in the `form-components.php` configuration file.
+You can switch to [Bootstrap 4](https://getbootstrap.com/docs/4.0/components/forms/) or [Bootstrap 5](https://getbootstrap.com/docs/5.0/forms/overview/) by updating the `framework` setting in the `form-components.php` configuration file.
 
 ```php
 return [
-    'framework' => 'bootstrap-4',
+    'framework' => 'bootstrap-5',
 ];
 ```
 
-There is a little bit of styling added to the `form.blade.php` view to add support for inline form groups. If you want to change it or remove it, [publish the assets](#customize-the-blade-views) and update the view file.
+There is a little of styling added to the `form.blade.php` view to add support for inline form groups. If you want to change it or remove it, [publish the assets](#customize-the-blade-views) and update the view file.  
+
+Bootstrap 5 changes a lot regarding forms. If you migrate from 4 to 5 make sure to read the migration logs about [forms](https://getbootstrap.com/docs/5.0/migration/#forms).
 
-#### Input prepend and append
+#### Input group/ prepend and append
 
-In addition to the Tailwind features, there is also support for [input groups](https://getbootstrap.com/docs/4.1/components/forms/#auto-sizing). Use the `prepend` and `append` slots to provide the contents.
+In addition to the Tailwind features, with bootstrap 4 there is also support for [input groups](https://getbootstrap.com/docs/4.6/components/forms/). Use the `prepend` and `append` slots to provide the contents.
 
 ```blade
 <x-form-input name="username" label="Username">
@@ -444,9 +446,28 @@ In addition to the Tailwind features, there is also support for [input groups](h
 </x-form-input>
 ```
 
+With bootstrap 5 the [input groups](https://getbootstrap.com/docs/5.0/forms/input-group/) has been simplified. You can add as many items as you would like, in any order you would like. Use `form-input-group-text` component to add text or [checkboxes](https://getbootstrap.com/docs/5.0/forms/input-group/#checkboxes-and-radios). 
+
+```blade
+<x-form-input-group label="Profile" >
+    <x-form-input name="name" placeholder="Name" id="name" />
+    <x-form-input-group-text>@</x-form-input-group-text>
+    <x-form-input name="nickname" placeholder="Nickname" id="nickname" />
+    <x-form-submit />
+</x-form-input-group>
+```
+
+#### Floating labels
+
+As of bootstrap 5 your can add [floating labels](https://getbootstrap.com/docs/5.0/forms/floating-labels/). Add `floating` to inputs, selects (excluding `multiple`) and textarea's to use this feature.
+
+```blade
+<x-form-input label="Floating Label" name="float_me" id="float_me" floating />
+```
+
 #### Help text
 
-You can add [block-level help text](https://getbootstrap.com/docs/4.1/components/forms/#help-text) to any element by using the `help` slot.
+You can add [block-level help text](https://getbootstrap.com/docs/4.6/components/forms/#help-text) to any element by using the `help` slot.
 
 ```blade
 <x-form-input name="username" label="Username">

config/config.php

@@ -5,7 +5,7 @@
 return [
     'prefix' => '',
 
-    /** tailwind | tailwind-2 | bootstrap-4 */
+    /** tailwind | tailwind-2 | bootstrap-4 | bootstrap-5 */
     'framework' => 'tailwind',
 
     'components' => [
@@ -34,6 +34,16 @@
             'class' => Components\FormInput::class,
         ],
 
+        'form-input-group' => [
+            'view'  => 'form-components::{framework}.form-input-group',
+            'class' => Components\FormInputGroup::class,
+        ],
+
+        'form-input-group-text' => [
+            'view'  => 'form-components::{framework}.form-input-group-text',
+            'class' => Components\FormInputGroupText::class,
+        ],
+
         'form-label' => [
             'view'  => 'form-components::{framework}.form-label',
             'class' => Components\FormLabel::class,
@@ -44,6 +54,11 @@
             'class' => Components\FormRadio::class,
         ],
 
+        'form-range' => [
+            'view'  => 'form-components::{framework}.form-range',
+            'class' => Components\FormRange::class,
+        ],
+
         'form-select' => [
             'view'  => 'form-components::{framework}.form-select',
             'class' => Components\FormSelect::class,

resources/views/bootstrap-4/form-range.blade.php

@@ -0,0 +1,26 @@
+<div class="form-group">
+    <x-form-label :label="$label" :for="$attributes->get('id') ?: $id()" />
+
+    <input
+        {!! $attributes->merge(['class' => 'form-control-range' . ($hasError($name) ? ' is-invalid' : '')]) !!}
+
+        type="range"
+
+        @if($isWired())
+            wire:model{!! $wireModifier() !!}="{{ $name }}"
+        @else
+            name="{{ $name }}"
+            value="{{ $value }}"
+        @endif
+
+        @if($label && !$attributes->get('id'))
+            id="{{ $id() }}"
+        @endif
+    />
+
+    {!! $help ?? null !!}
+
+    @if($hasErrorAndShow($name))
+        <x-form-errors :name="$name" />
+    @endif
+</div>

resources/views/bootstrap-5/form-checkbox.blade.php

@@ -0,0 +1,31 @@
+<div class="form-check @if(null !== $attributes->get('switch')) form-switch @endif @if(null !== $attributes->get('inline')) form-check-inline @endif">
+    <input
+        {!! $attributes->merge(['class' => 'form-check-input' . ($hasError($name) ? ' is-invalid' : '')]) !!}
+
+        type="checkbox"
+
+        value="{{ $value }}"
+
+        @if($isWired())
+            wire:model{!! $wireModifier() !!}="{{ $name }}"
+        @else
+            name="{{ $name }}"
+        @endif
+
+        @if($label && !$attributes->get('id'))
+            id="{{ $id() }}"
+        @endif
+
+        @if($checked)
+            checked="checked"
+        @endif
+    />
+
+    <x-form-label :label="$label" :for="$attributes->get('id') ?: $id()" class="form-check-label" />
+
+    {!! $help ?? null !!}
+
+    @if($hasErrorAndShow($name))
+        <x-form-errors :name="$name" />
+    @endif
+</div>

resources/views/bootstrap-5/form-errors.blade.php

@@ -0,0 +1,5 @@
+@error($name, $bag)
+    <div {!! $attributes->merge(['class' => 'invalid-feedback']) !!}>
+        {{ $message }}
+    </div>
+@enderror

resources/views/bootstrap-5/form-group.blade.php

@@ -0,0 +1,13 @@
+<div {!! $attributes->merge(['class' => ($hasError($name) ? 'is-invalid' : '')]) !!}>
+    <x-form-label :label="$label" />
+
+    <div class="@if($inline) d-flex flex-row flex-wrap inline-space @endif">
+        {!! $slot !!}
+    </div>
+
+    {!! $help ?? null !!}
+
+    @if($hasErrorAndShow($name))
+        <x-form-errors :name="$name" class="d-block" />
+    @endif
+</div>

resources/views/bootstrap-5/form-input-group-text.blade.php

@@ -0,0 +1 @@
+<span {!! $attributes->merge(['class' => 'input-group-text']) !!}>{!! $slot !!}</span>

resources/views/bootstrap-5/form-input-group.blade.php

@@ -0,0 +1,13 @@
+<div class="mb-3">
+    <x-form-label :label="$label"></x-form-label>
+
+    <div {!! $attributes->merge(['class' => 'input-group'  . ($hasError($name) ? ' is-invalid' : '')]) !!}>
+        {!! $slot !!}
+    </div>
+
+    {!! $help ?? null !!}
+
+    @if($hasErrorAndShow($name))
+        <x-form-errors :name="$name" />
+    @endif
+</div>

resources/views/bootstrap-5/form-input.blade.php

@@ -0,0 +1,42 @@
+@if($type === 'hidden') <div class="d-none"> @endif
+@if($floating) <div class="form-floating"> @endif
+
+    @if(!$floating)
+        <x-form-label :label="$label" :for="$attributes->get('id') ?: $id()" />
+    @endif
+
+    <input
+        {!! $attributes->merge(['class' => 'form-control' . ($type === 'color' ? ' form-control-color' : '') . ($hasError($name) ? ' is-invalid' : '')]) !!}
+
+        type="{{ $type }}"
+
+        @if($isWired())
+            wire:model{!! $wireModifier() !!}="{{ $name }}"
+        @else
+            name="{{ $name }}"
+            value="{{ $value ?? ($type === 'color' ? '#000000' : '') }}"
+        @endif
+
+        @if($label && !$attributes->get('id'))
+            id="{{ $id() }}"
+        @endif
+
+        {{--  Placeholder is required as of writing  --}}
+        @if($floating && !$attributes->get('placeholder'))
+            placeholder="&nbsp;"
+        @endif
+    />
+
+    @if($floating)
+        <x-form-label :label="$label" :for="$attributes->get('id') ?: $id()" />
+    @endif
+
+@if($floating) </div> @endif
+
+{!! $help ?? null !!}
+
+@if($hasErrorAndShow($name))
+    <x-form-errors :name="$name" />
+@endif
+
+@if($type === 'hidden') </div> @endif

resources/views/bootstrap-5/form-label.blade.php

@@ -0,0 +1,3 @@
+@if($label)
+    <label {!! $attributes !!}>{{ $label }}</label>
+@endif

resources/views/bootstrap-5/form-radio.blade.php

@@ -0,0 +1,31 @@
+<div class="form-check @if(null !== $attributes->get('inline')) form-check-inline @endif">
+    <input
+        {!! $attributes->merge(['class' => 'form-check-input' . ($hasError($name) ? ' is-invalid' : '')]) !!}
+
+        type="radio"
+
+        value="{{ $value }}"
+
+        @if($isWired())
+            wire:model{!! $wireModifier() !!}="{{ $name }}"
+        @else
+            name="{{ $name }}"
+        @endif
+
+        @if($label && !$attributes->get('id'))
+            id="{{ $id() }}"
+        @endif
+
+        @if($checked)
+            checked="checked"
+        @endif
+    />
+
+    <x-form-label :label="$label" :for="$attributes->get('id') ?: $id()" class="form-check-label" />
+
+    {!! $help ?? null !!}
+
+    @if($hasErrorAndShow($name))
+        <x-form-errors :name="$name" />
+    @endif
+</div>

resources/views/bootstrap-5/form-range.blade.php

@@ -0,0 +1,24 @@
+<x-form-label :label="$label" :for="$attributes->get('id') ?: $id()" />
+
+<input
+    {!! $attributes->merge(['class' => 'form-range' . ($hasError($name) ? ' is-invalid' : '')]) !!}
+
+    type="range"
+
+    @if($isWired())
+        wire:model{!! $wireModifier() !!}="{{ $name }}"
+    @else
+        name="{{ $name }}"
+        value="{{ $value }}"
+    @endif
+
+    @if($label && !$attributes->get('id'))
+        id="{{ $id() }}"
+    @endif
+/>
+
+{!! $help ?? null !!}
+
+@if($hasErrorAndShow($name))
+    <x-form-errors :name="$name" />
+@endif

resources/views/bootstrap-5/form-select.blade.php

@@ -0,0 +1,43 @@
+@if($floating) <div class="form-floating"> @endif
+
+    @if(!$floating)
+        <x-form-label :label="$label" :for="$attributes->get('id') ?: $id()" />
+    @endif
+
+    <select
+        @if($isWired())
+            wire:model{!! $wireModifier() !!}="{{ $name }}"
+        @else
+            name="{{ $name }}"
+        @endif
+
+        @if($multiple)
+            multiple
+        @endif
+
+        @if($label && !$attributes->get('id'))
+            id="{{ $id() }}"
+        @endif
+
+        {!! $attributes->merge(['class' => 'form-select' . ($hasError($name) ? ' is-invalid' : '')]) !!}
+    >
+        @forelse($options as $key => $option)
+            <option value="{{ $key }}" @if($isSelected($key)) selected="selected" @endif>
+                {{ $option }}
+            </option>
+        @empty
+            {!! $slot !!}
+        @endforelse
+    </select>
+
+    @if($floating)
+        <x-form-label :label="$label" :for="$attributes->get('id') ?: $id()" />
+    @endif
+
+@if($floating) </div> @endif
+
+{!! $help ?? null !!}
+
+@if($hasErrorAndShow($name))
+    <x-form-errors :name="$name" />
+@endif

resources/views/bootstrap-5/form-submit.blade.php

@@ -0,0 +1,8 @@
+<button
+    {!! $attributes->merge([
+        'class' => 'btn btn-primary',
+        'type' => 'submit'
+    ]) !!}
+>
+    {!! trim($slot) ?: __('Submit') !!}
+</button>