feature: Inline radio

packages/forms/docs/03-fields.md

@@ -659,6 +659,15 @@ Radio::make('feedback')
 
 <img src="https://user-images.githubusercontent.com/41773797/147613274-04745624-3ddd-46bb-b25c-1e756d6f4958.png">
 
+You may wish to display the options `inline()` with the label:
+
+```php
+Radio::make('feedback')
+    ->label('Do you like this post?')
+    ->boolean()
+    ->inline()
+```
+
 ## Date-time picker
 
 The date-time picker provides an interactive interface for selecting a date and a time.

packages/forms/resources/views/components/field-wrapper/index.blade.php

@@ -3,6 +3,7 @@
     'label' => null,
     'labelPrefix' => null,
     'labelSrOnly' => false,
+    'labelSuffix' => null,
     'helperText' => null,
     'hint' => null,
     'required' => false,
@@ -25,6 +26,7 @@
                         :error="$errors->has($statePath)"
                         :prefix="$labelPrefix"
                         :required="$required"
+                        :suffix="$labelSuffix"
                     >
                         {{ $label }}
                     </x-forms::field-wrapper.label>

packages/forms/resources/views/components/field-wrapper/label.blade.php

@@ -2,6 +2,7 @@
     'error' => false,
     'prefix' => null,
     'required' => false,
+    'suffix' => null,
 ])
 
 <label {{ $attributes->class(['inline-flex items-center space-x-3 rtl:space-x-reverse']) }}>
@@ -18,4 +19,6 @@
             <sup class="font-medium text-danger-700">*</sup>
         @endif
     </span>
+
+    {{ $suffix }}
 </label>

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

@@ -7,41 +7,54 @@
     :required="$isRequired()"
     :state-path="$getStatePath()"
 >
-    <div {{ $attributes->merge($getExtraAttributes())->class(['space-y-2']) }}>
-        @foreach ($getOptions() as $value => $label)
-            <div class="relative flex items-start">
-                <div class="flex items-center h-5">
-                    <input
-                        name="{{ $getId() }}"
-                        id="{{ $getId() }}-{{ $value }}"
-                        type="radio"
-                        value="{{ $value }}"
-                        {{ $applyStateBindingModifiers('wire:model') }}="{{ $getStatePath() }}"
-                        {{ $getExtraInputAttributeBag()->class([
-                            'focus:ring-primary-500 h-4 w-4 text-primary-600',
-                            'border-gray-300' => ! $errors->has($getStatePath()),
-                            'border-danger-600 ring-danger-600' => $errors->has($getStatePath()),
-                        ]) }}
-                        {!! $isOptionDisabled($value, $label) ? 'disabled' : null !!}
-                    />
-                </div>
-
-                <div class="ml-3 rtl:mr-3 text-sm">
-                    <label for="{{ $getId() }}-{{ $value }}" @class([
-                        'font-medium',
-                        'text-gray-700' => ! $errors->has($getStatePath()),
-                        'text-danger-600' => $errors->has($getStatePath()),
+    @if ($isInline())
+        <x-slot name="labelSuffix">
+    @endif
+            <div {{ $attributes->merge($getExtraAttributes())->class([
+                'gap-2',
+                'flex flex-wrap gap-3' => $isInline(),
+            ]) }}>
+                @foreach ($getOptions() as $value => $label)
+                    <div @class([
+                        'flex items-start',
+                        'gap-3' => ! $isInline(),
+                        'gap-2' => $isInline(),
                     ])>
-                        {{ $label }}
-                    </label>
+                        <div class="flex items-center h-5">
+                            <input
+                                name="{{ $getId() }}"
+                                id="{{ $getId() }}-{{ $value }}"
+                                type="radio"
+                                value="{{ $value }}"
+                                {{ $applyStateBindingModifiers('wire:model') }}="{{ $getStatePath() }}"
+                                {{ $getExtraInputAttributeBag()->class([
+                                    'focus:ring-primary-500 h-4 w-4 text-primary-600',
+                                    'border-gray-300' => ! $errors->has($getStatePath()),
+                                    'border-danger-600 ring-danger-600' => $errors->has($getStatePath()),
+                                ]) }}
+                                {!! $isOptionDisabled($value, $label) ? 'disabled' : null !!}
+                            />
+                        </div>
 
-                    @if ($hasDescription($value))
-                        <p class="text-gray-500">
-                            {{ $getDescription($value) }}
-                        </p>
-                    @endif
-                </div>
+                        <div class="text-sm">
+                            <label for="{{ $getId() }}-{{ $value }}" @class([
+                                'font-medium',
+                                'text-gray-700' => ! $errors->has($getStatePath()),
+                                'text-danger-600' => $errors->has($getStatePath()),
+                            ])>
+                                {{ $label }}
+                            </label>
+
+                            @if ($hasDescription($value))
+                                <p class="text-gray-500">
+                                    {{ $getDescription($value) }}
+                                </p>
+                            @endif
+                        </div>
+                    </div>
+                @endforeach
             </div>
-        @endforeach
-    </div>
+    @if ($isInline())
+        </x-slot>
+    @endif
 </x-forms::field-wrapper>

packages/forms/src/Components/Radio.php

@@ -11,6 +11,8 @@ class Radio extends Field
 
     protected string $view = 'forms::components.radio';
 
+    protected bool | Closure $isInline = false;
+
     protected array | Arrayable | Closure $options = [];
 
     protected array | Arrayable | Closure $descriptions = [];
@@ -39,6 +41,13 @@ class Radio extends Field
         return $this;
     }
 
+    public function inline(bool | Closure $condition = true): static
+    {
+        $this->isInline = $condition;
+
+        return $this;
+    }
+
     public function options(array | Arrayable | Closure $options): static
     {
         $this->options = $options;
@@ -85,6 +94,11 @@ class Radio extends Field
         return $options;
     }
 
+    public function isInline(): bool
+    {
+        return (bool) $this->evaluate($this->isInline);
+    }
+
     public function isOptionDisabled($value, string $label): bool
     {
         if ($this->isOptionDisabled === null) {