Merge pull request #383 from mallardduck/column-checkbox-and-toggle

[Feature] Allow the checkbox and toggle to render as column fields

packages/forms/resources/views/components/checkbox.blade.php

@@ -7,7 +7,9 @@
     :label="$formComponent->getLabel()"
     :required="$formComponent->isRequired()"
 >
-    <x-slot name="labelPrefix">
+    @if ($formComponent->isInline())
+        <x-slot name="labelPrefix">
+    @endif
         <input
             {!! $formComponent->isAutofocused() ? 'autofocus' : null !!}
             {!! $formComponent->isDisabled() ? 'disabled' : null !!}
@@ -18,5 +20,7 @@
             class="rounded text-primary-600 shadow-sm focus:border-primary-700 focus:ring focus:ring-blue-200 focus:ring-opacity-50 {{ $errors->has($formComponent->getName()) ? 'border-danger-600 ' : 'border-gray-300' }}"
             {!! Filament\format_attributes($formComponent->getExtraAttributes()) !!}
         />
-    </x-slot>
+    @if ($formComponent->isInline())
+        </x-slot>
+    @endif
 </x-forms::field-group>

packages/forms/resources/views/components/toggle.blade.php

@@ -7,7 +7,9 @@
     :label="$formComponent->getLabel()"
     :required="$formComponent->isRequired()"
 >
-    <x-slot name="labelPrefix">
+    @if ($formComponent->isInline())
+        <x-slot name="labelPrefix">
+    @endif
         <button
             x-data="{ value: @entangle($formComponent->getName()){{ Str::of($formComponent->getBindingAttribute())->after('wire:model') }} }"
             role="switch"
@@ -59,5 +61,7 @@
                 </span>
             </span>
         </button>
-    </x-slot>
+    @if ($formComponent->isInline())
+        </x-slot>
+    @endif
 </x-forms::field-group>

packages/forms/src/Components/Checkbox.php

@@ -5,9 +5,12 @@ namespace Filament\Forms\Components;
 class Checkbox extends Field
 {
     use Concerns\CanBeAutofocused;
+    use Concerns\CanBeInline;
 
     protected function setUp()
     {
         $this->default(false);
+
+        $this->inline();
     }
 }

packages/forms/src/Components/Concerns/CanBeInline.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace Filament\Forms\Components\Concerns;
+
+trait CanBeInline
+{
+    protected $isInline = false;
+
+    public function inline()
+    {
+        $this->configure(function () {
+            $this->isInline = true;
+        });
+
+        return $this;
+    }
+
+    public function stacked()
+    {
+        $this->configure(function () {
+            $this->isInline = false;
+        });
+
+        return $this;
+    }
+
+    public function isInline()
+    {
+        return $this->isInline;
+    }
+}

packages/forms/src/Components/Toggle.php

@@ -8,6 +8,7 @@ use Filament\Forms\Components\Field;
 class Toggle extends Field
 {
     use Concerns\CanBeAutofocused;
+    use Concerns\CanBeInline;
 
     protected $onIcon;
 
@@ -16,6 +17,8 @@ class Toggle extends Field
     protected function setUp()
     {
         $this->default(false);
+
+        $this->inline();
     }
 
     public function onIcon($icon)

src/Resources/Forms/Components/Concerns/CanBeInline.php

@@ -0,0 +1,8 @@
+<?php
+
+namespace Filament\Resources\Forms\Components\Concerns;
+
+trait CanBeInline
+{
+    use \Filament\Forms\Components\Concerns\CanBeInline;
+}