From dad4c8e969b77d0e9b0ce18544944712fbe71c00 Mon Sep 17 00:00:00 2001
From: Jesse Leite <jesseleite@gmail.com>
Date: Thu, 6 Feb 2025 18:21:22 -0500
Subject: [PATCH 01/10] Make code snippet indentation more consistent.

---
 content/collections/tags/form-create.md | 163 +++++++++++-------------
 1 file changed, 74 insertions(+), 89 deletions(-)

diff --git a/content/collections/tags/form-create.md b/content/collections/tags/form-create.md
index 92c4e946c..45b72ee49 100644
--- a/content/collections/tags/form-create.md
+++ b/content/collections/tags/form-create.md
@@ -26,7 +26,7 @@ parameters:
   -
     name: csrf
     type: boolean
-    description: When `false`, the hidden `name="_token"` attribute won't be added to the form so you can use other ways of providing the token. Defaults to `true`. 
+    description: When `false`, the hidden `name="_token"` attribute won't be added to the form so you can use other ways of providing the token. Defaults to `true`.
   -
     name: files
     type: boolean
@@ -106,30 +106,30 @@ Here we'll be creating a form to submit an entry in a `contact` form.
 ```
 ::tab blade
 ```blade
-<s:form:create
-  in="contact"
->
-  @if (count($errors) > 0)
-    <div class="bg-red-300 text-white p-2">
-      @foreach ($errors as $error)
-        {{ $error }}<br>
-      @endforeach
-    </div>
-  @endif
+<s:form:create in="contact">
 
-  @if ($success)
-    <div class="bg-green-300 text-white p-2">
-      {{ $success }}
-    </div>
-  @endif
+    @if (count($errors) > 0)
+        <div class="bg-red-300 text-white p-2">
+            @foreach ($errors as $error)
+                {{ $error }}<br>
+            @endforeach
+        </div>
+    @endif
+
+    @if ($success)
+        <div class="bg-green-300 text-white p-2">
+            {{ $success }}
+        </div>
+    @endif
+
+    <label>Email</label>
+    <input type="text" name="email" value="{{ old('email') }}" />
 
-  <label>Email</label>
-  <input type="text" name="email" value="{{ old('email') }}" />
+    <label>Message</label>
+    <textarea name="message" rows="5">{{ old('message') }}</textarea>
 
-  <label>Message</label>
-  <textarea name="message" rows="5">{{ old('message') }}</textarea>
+    <button>Submit</button>
 
-  <button>Submit</button>
 </s:form:create>
 ```
 ::
@@ -147,7 +147,7 @@ You can also use the shorthand syntax for `form:create in="contact"`.
 ::tab blade
 ```blade
 <s:form:contact>
-  ...
+    ...
 </s:form:contact>
 ```
 ::
@@ -173,16 +173,14 @@ When you need to render a form that's selected via the [Form Fieldtype](/fieldty
 
 ::tab antlers
 ```antlers
-{{ form:create in="{ form_fieldtype:handle }" }}
+{{ form:create :in="form_fieldtype:handle" }}
     ...
 {{ /form:create }}
 ```
 ::tab blade
 ```blade
-<s:form:create
-  :in="$form_fieldtype->handle"
->
-  ...
+<s:form:create :in="$form_fieldtype->handle">
+    ...
 </s:form:create>
 ```
 ::
@@ -222,22 +220,22 @@ Instead of hardcoding individual fields, you may loop through the `fields` array
 ```blade
 <s:form:contact>
 
-  @foreach ($fields as $field)
-    <div class="p-2">
-      <label>
-        {{ $field['display'] }}
-        @if (in_array('required', $field['validate'] ?? []))
-          <sup class="text-red">*</sup>
-        @endif
-      </label>
-      <div class="p-1">{!! $field['field'] !!}</div>
-      @if ($field['error'])
-        <p class="text-gray-500">{{ $field['error'] }}</p>
-      @endif
-    </div>
-  @endforeach
+    @foreach ($fields as $field)
+        <div class="p-2">
+            <label>
+                {{ $field['display'] }}
+                @if (in_array('required', $field['validate'] ?? []))
+                    <sup class="text-red">*</sup>
+                @endif
+            </label>
+            <div class="p-1">{!! $field['field'] !!}</div>
+            @if ($field['error'])
+                <p class="text-gray-500">{{ $field['error'] }}</p>
+            @endif
+        </div>
+    @endforeach
 
-  <button>Submit</button>
+    <button>Submit</button>
 
 </s:form:contact>
 ```
@@ -286,10 +284,10 @@ This approach, combined with the [blueprint editor](/blueprints), will give you
 ::tab blade
 ```blade
 @foreach ($fields as $field)
-  <div class="mb-2">
-    <label class="block">{{ $field['display'] }}</label>
-    {!! $field['field'] !!}
-  </div>
+    <div class="mb-2">
+        <label class="block">{{ $field['display'] }}</label>
+        {!! $field['field'] !!}
+    </div>
 @endforeach
 ```
 ::
@@ -329,24 +327,23 @@ If you have defined multiple sections in your form's blueprint, you can loop ove
     {{ /sections }}
 
     <button>Submit</button>
- 
+
 {{ /form:contact }}
 ```
 ::tab blade
 ```blade
 <s:form:contact>
 
-  @foreach($sections as $section)
-    <fieldset>
-      <legend>{{ $section['display'] }}</legend>
-
-      @foreach ($section['fields'] as $field)
-        ...
-      @endforeach
-    </fieldset>
-  @endforeach
+    @foreach($sections as $section)
+        <fieldset>
+            <legend>{{ $section['display'] }}</legend>
+            @foreach ($section['fields'] as $field)
+                ...
+            @endforeach
+        </fieldset>
+    @endforeach
 
-  <button>Submit</button>
+    <button>Submit</button>
 
 </s:form:contact>
 ```
@@ -392,10 +389,8 @@ The next step is to enable the Alpine JS driver via the `js="alpine"` parameter.
 ```
 ::tab blade
 ```blade
-<s:form:contact
-  js="alpine"
->
-  ...
+<s:form:contact js="alpine">
+    ...
 </s:form:contact>
 ```
 ::
@@ -420,10 +415,10 @@ Finally, you will need to wire up the fields. With Alpine, this is done using `x
 ::tab blade
 ```blade
 <template x-if="{{ $show_field['name'] }}">
-  <div class="p-2">
-    <label>Name</label>
-    <input type="text" name="name" value="{{ old('name') }}" x-model="name" />
-  </div>
+    <div class="p-2">
+        <label>Name</label>
+        <input type="text" name="name" value="{{ old('name') }}" x-model="name" />
+    </div>
 </template>
 ```
 ::
@@ -449,20 +444,14 @@ If you are [dynamically rendering your fields](#dynamic-rendering) using the `fi
 ```
 ::tab blade
 ```blade
-<s:form:contact
-  js="alpine"
->
-
-  @foreach ($fields as $field)
+@foreach ($fields as $field)
     <template x-if="{{ $field['show_field'] }}">
-      <div class="p-2">
-        <label>{{ $field['display'] }}</label>
-        <div class="p-1">{!! $field['field'] !!}</div>
-      </div>
+        <div class="p-2">
+            <label>{{ $field['display'] }}</label>
+            <div class="p-1">{!! $field['field'] !!}</div>
+        </div>
     </template>
-  @endforeach
-
-</s:form:contact>
+@endforeach
 ```
 ::
 
@@ -482,10 +471,8 @@ If you are using other Alpine components in your form or on your page, the inclu
 ```
 ::tab blade
 ```blade
-<s:form:contact
-  js="alpine:contact_form"
->
-  ...
+<s:form:contact js="alpine:contact_form">
+    ...
 </s:form:contact>
 ```
 ::
@@ -508,10 +495,10 @@ If you are hardcoding your inputs, you will need adjust your `x-model` to follow
 ::tab blade
 ```blade
 <template x-if="{{ $show_field['name'] }}">
-  <div class="p-2">
-    <label>Name</label>
-    <input type="text" name="name" value="{{ old('name') }}" x-model="contact_form.name" />
-  </div>
+    <div class="p-2">
+        <label>Name</label>
+        <input type="text" name="name" value="{{ old('name') }}" x-model="contact_form.name" />
+    </div>
 </template>
 ```
 ::
@@ -618,10 +605,8 @@ You can also pass comma-delimited options into the `js` parameter like so:
 ```
 ::tab blade
 ```blade
-<s:form:contact
-  js="radjs:foo:bar"
->
-  ...
+<s:form:contact js="radjs:foo:bar">
+    ...
 </s:form:contact>
 ```
 ::

From 052df05c087df9d00486344b5866920c0a84a1db Mon Sep 17 00:00:00 2001
From: Jesse Leite <jesseleite@gmail.com>
Date: Thu, 6 Feb 2025 18:22:20 -0500
Subject: [PATCH 02/10] Conditional fields are not new anymore.

---
 content/collections/tags/form-create.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/collections/tags/form-create.md b/content/collections/tags/form-create.md
index 45b72ee49..1fa1f9bd6 100644
--- a/content/collections/tags/form-create.md
+++ b/content/collections/tags/form-create.md
@@ -358,7 +358,7 @@ Each item in the `sections` array contains the following data configurable in th
 | `fields` | array | An array of [fields](#dynamically-rendering-fields) defined within that section |
 
 
-## Conditional Fields 🆕
+## Conditional Fields
 
 You may conditionally show and hide fields by utilizing the [conditional fields](/conditional-fields#overview) settings in your form's blueprint editor. Once configured, by including the necessary front-end scripts and enabling JavaScript on the `form:create` tag, all of the conditional logic will Just Work™.
 

From dfc19437ab91a6e560cea6427112ce002f2b88da Mon Sep 17 00:00:00 2001
From: Jesse Leite <jesseleite@gmail.com>
Date: Thu, 6 Feb 2025 19:26:35 -0500
Subject: [PATCH 03/10] Fix link.

---
 content/collections/tags/form-create.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/collections/tags/form-create.md b/content/collections/tags/form-create.md
index 1fa1f9bd6..da2aa1b44 100644
--- a/content/collections/tags/form-create.md
+++ b/content/collections/tags/form-create.md
@@ -45,7 +45,7 @@ variables:
     name: fields
     type: array
     description: >
-      An array of available fields for [dynamic rendering](#dynamic-rendering).
+      An array of available fields for [dynamic rendering](#dynamically-rendering-fields).
   -
     name: errors
     type: array
@@ -248,7 +248,7 @@ Each item in the `fields` array contains the following data configurable in the
 | `handle` | string | System name for the field |
 | `display` | string | User-friendly field label |
 | `type` | string | Name of the [fieldtype](/fieldtypes) |
-| ` field` | string | [Pre-rendered field HTML](#prerendered-field-html) based on the fieldtype |
+| `field` | string | [Pre-rendered field HTML](#prerendered-field-html) based on the fieldtype |
 | `error` | string | Error message from an unsuccessful submission |
 | `old` | array | Contains user input from an unsuccessful submission |
 | `instructions` | string | User-friendly instructions label |

From b03d98a995a0e2b21fe3ab22c0457cf3a8ffb23b Mon Sep 17 00:00:00 2001
From: Jesse Leite <jesseleite@gmail.com>
Date: Thu, 6 Feb 2025 19:27:22 -0500
Subject: [PATCH 04/10] Document `form:fields` tag (still need dedicated doc
 page though).

---
 content/collections/tags/form-create.md | 34 ++++++++++++-------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/content/collections/tags/form-create.md b/content/collections/tags/form-create.md
index da2aa1b44..02b6279d1 100644
--- a/content/collections/tags/form-create.md
+++ b/content/collections/tags/form-create.md
@@ -189,7 +189,7 @@ This way you can let Control Panel users select which form should be used on an
 
 ### Dynamically Rendering Fields
 
-Instead of hardcoding individual fields, you may loop through the `fields` array to render your blueprint's fields in a dynamic fashion.
+Instead of hardcoding individual fields, you may loop through the `fields` array using the [form:fields](/tags/form-fields) tag to render your blueprint's fields in a dynamic fashion.
 
 ::tabs
 
@@ -197,7 +197,7 @@ Instead of hardcoding individual fields, you may loop through the `fields` array
 ```antlers
 {{ form:contact }}
 
-    {{ fields }}
+    {{ form:fields }}
         <div class="p-2">
             <label>
                 {{ display }}
@@ -210,7 +210,7 @@ Instead of hardcoding individual fields, you may loop through the `fields` array
                 <p class="text-gray-500">{{ error }}</p>
             {{ /if }}
         </div>
-    {{ /fields }}
+    {{ /form:fields }}
 
     <button>Submit</button>
 
@@ -220,7 +220,7 @@ Instead of hardcoding individual fields, you may loop through the `fields` array
 ```blade
 <s:form:contact>
 
-    @foreach ($fields as $field)
+    <s:form:fields>
         <div class="p-2">
             <label>
                 {{ $field['display'] }}
@@ -233,7 +233,7 @@ Instead of hardcoding individual fields, you may loop through the `fields` array
                 <p class="text-gray-500">{{ $field['error'] }}</p>
             @endif
         </div>
-    @endforeach
+    </s:form:fields>
 
     <button>Submit</button>
 
@@ -274,21 +274,21 @@ This approach, combined with the [blueprint editor](/blueprints), will give you
 
 ::tab antlers
 ```antlers
-{{ fields }}
+{{ form:fields }}
     <div class="mb-2">
         <label class="block">{{ display }}</label>
         {{ field }}
     </div>
-{{ /fields }}
+{{ /form:fields }}
 ```
 ::tab blade
 ```blade
-@foreach ($fields as $field)
+<s:form:fields>
     <div class="mb-2">
         <label class="block">{{ $field['display'] }}</label>
         {!! $field['field'] !!}
     </div>
-@endforeach
+</s:form:fields>
 ```
 ::
 
@@ -320,9 +320,9 @@ If you have defined multiple sections in your form's blueprint, you can loop ove
     {{ sections }}
         <fieldset>
             <legend>{{ display }}</legend>
-            {{ fields }}
+            {{ form:fields }}
                 ...
-            {{ /fields }}
+            {{ /form:fields }}
         </fieldset>
     {{ /sections }}
 
@@ -337,9 +337,9 @@ If you have defined multiple sections in your form's blueprint, you can loop ove
     @foreach($sections as $section)
         <fieldset>
             <legend>{{ $section['display'] }}</legend>
-            @foreach ($section['fields'] as $field)
+            <s:form:fields :section="$section">
                 ...
-            @endforeach
+            </s:form:fields>
         </fieldset>
     @endforeach
 
@@ -433,25 +433,25 @@ If you are [dynamically rendering your fields](#dynamic-rendering) using the `fi
 
 ::tab antlers
 ```antlers
-{{ fields }}
+{{ form:fields }}
     <template x-if="{{ show_field }}">
         <div class="p-2">
             <label>{{ display }}</label>
             <div class="p-1">{{ field }}</div>
         </div>
     </template>
-{{ /fields }}
+{{ /form:fields }}
 ```
 ::tab blade
 ```blade
-@foreach ($fields as $field)
+<s:form:fields>
     <template x-if="{{ $field['show_field'] }}">
         <div class="p-2">
             <label>{{ $field['display'] }}</label>
             <div class="p-1">{!! $field['field'] !!}</div>
         </div>
     </template>
-@endforeach
+</s:form:fields>
 ```
 ::
 

From 6dd6e7326d748a2f2022e7b1af4f808fe0e1be3f Mon Sep 17 00:00:00 2001
From: Jesse Leite <jesseleite@gmail.com>
Date: Thu, 6 Feb 2025 19:30:30 -0500
Subject: [PATCH 05/10] =?UTF-8?q?You=20don=E2=80=99t=20need=20`{!!=20!!}`?=
 =?UTF-8?q?=20anymore=20because=20`field`=20is=20`Htmlable`=20=F0=9F=A4=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/collections/tags/form-create.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/collections/tags/form-create.md b/content/collections/tags/form-create.md
index 02b6279d1..73fa072db 100644
--- a/content/collections/tags/form-create.md
+++ b/content/collections/tags/form-create.md
@@ -228,7 +228,7 @@ Instead of hardcoding individual fields, you may loop through the `fields` array
                     <sup class="text-red">*</sup>
                 @endif
             </label>
-            <div class="p-1">{!! $field['field'] !!}</div>
+            <div class="p-1">{{ $field['field'] }}</div>
             @if ($field['error'])
                 <p class="text-gray-500">{{ $field['error'] }}</p>
             @endif
@@ -286,7 +286,7 @@ This approach, combined with the [blueprint editor](/blueprints), will give you
 <s:form:fields>
     <div class="mb-2">
         <label class="block">{{ $field['display'] }}</label>
-        {!! $field['field'] !!}
+        {{ $field['field'] }}
     </div>
 </s:form:fields>
 ```
@@ -448,7 +448,7 @@ If you are [dynamically rendering your fields](#dynamic-rendering) using the `fi
     <template x-if="{{ $field['show_field'] }}">
         <div class="p-2">
             <label>{{ $field['display'] }}</label>
-            <div class="p-1">{!! $field['field'] !!}</div>
+            <div class="p-1">{{ $field['field'] }}</div>
         </div>
     </template>
 </s:form:fields>

From fda7e18e6a881965c79494e5f7e5392d26efc364 Mon Sep 17 00:00:00 2001
From: Jesse Leite <jesseleite@gmail.com>
Date: Tue, 11 Mar 2025 19:44:48 -0400
Subject: [PATCH 06/10] Improve top-level `show_field` syntax for nested group
 field JS.

---
 content/collections/tags/form-create.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/content/collections/tags/form-create.md b/content/collections/tags/form-create.md
index 73fa072db..7ceedcf20 100644
--- a/content/collections/tags/form-create.md
+++ b/content/collections/tags/form-create.md
@@ -405,7 +405,7 @@ Finally, you will need to wire up the fields. With Alpine, this is done using `x
 
 ::tab antlers
 ```antlers
-<template x-if="{{ show_field:name }}">
+<template x-if="{{ show_field['name'] }}">
     <div class="p-2">
         <label>Name</label>
         <input type="text" name="name" value="{{ old:name }}" x-model="name" />
@@ -423,7 +423,9 @@ Finally, you will need to wire up the fields. With Alpine, this is done using `x
 ```
 ::
 
-The `x-model` should reference the field's handle, and the `x-if` should reference the appropriate `show_field` JS generated by Statamic; In this case, `x-model="name"` and `x-if="{{ show_field:name }}"` respectively.
+The `x-model` should reference the field's handle, and the `x-if` should reference the appropriate `show_field` JS generated by Statamic; In this case, `x-model="name"` and `x-if="{{ show_field['name'] }}"` respectively.
+
+For nested fields, you can get `show_field` JS by passing the whole dotted handle as the key, ie) `x-if="{{ show_field['field_group.nested_field']}}"`.
 
 ### Wiring Up Dynamically Rendered Fields
 

From 96a499036e36b50d3be30196e621148ae36f8a7a Mon Sep 17 00:00:00 2001
From: Jesse Leite <jesseleite@gmail.com>
Date: Wed, 12 Mar 2025 20:32:06 -0400
Subject: [PATCH 07/10] Update this to reflect new best practice around custom
 JS field binding logic.

---
 content/collections/tags/form-create.md | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/content/collections/tags/form-create.md b/content/collections/tags/form-create.md
index 7ceedcf20..68fffde7f 100644
--- a/content/collections/tags/form-create.md
+++ b/content/collections/tags/form-create.md
@@ -535,9 +535,13 @@ class RadJs extends AbstractJsDriver
 
     public function addToRenderableFieldAttributes($field)
     {
-        return [
-            'r-model' => $field->handle(),
-        ];
+        $attributes = [];
+
+        if ($field->fieldtype()->hasJsDriverDataBinding()) {
+            $attributes['r-model'] => $field->handle(),
+        }
+
+        return $attributes;
     }
 
     public function addToRenderableFieldData($field, $data)

From 6ad566c7625ea286be220d1b007d47e83633069a Mon Sep 17 00:00:00 2001
From: Jesse Leite <jesseleite@gmail.com>
Date: Wed, 23 Apr 2025 16:02:31 -0400
Subject: [PATCH 08/10] Update data provided in fields loop.

---
 content/collections/tags/form-create.md | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/content/collections/tags/form-create.md b/content/collections/tags/form-create.md
index 68fffde7f..aa0c1ac01 100644
--- a/content/collections/tags/form-create.md
+++ b/content/collections/tags/form-create.md
@@ -241,17 +241,20 @@ Instead of hardcoding individual fields, you may loop through the `fields` array
 ```
 ::
 
-Each item in the `fields` array contains the following data configurable in the form's blueprint.
+Each item in this `fields` array contains the following data:
 
 | Variable | Type | Description |
 |---|---| --- |
-| `handle` | string | System name for the field |
-| `display` | string | User-friendly field label |
-| `type` | string | Name of the [fieldtype](/fieldtypes) |
+| `display` | string | User-friendly field label configured in blueprint |
+| `instructions` | string | User-friendly instructions label configured in blueprint |
 | `field` | string | [Pre-rendered field HTML](#prerendered-field-html) based on the fieldtype |
+| `type` | string | Name of the [fieldtype](/fieldtypes) |
+| `handle` | string | Blueprint handle for the field |
+| `name` | string | Input name for submitting the field |
+| `value` | mixed | Field value, which respects both `old` and `default` |
+| `default` | mixed | Default field value as assigned by blueprint |
+| `old` | mixed | Old field value from an unsuccessful submission |
 | `error` | string | Error message from an unsuccessful submission |
-| `old` | array | Contains user input from an unsuccessful submission |
-| `instructions` | string | User-friendly instructions label |
 | `validate` | array | Contains an array of validation rules |
 | `width` | string | Width of the field assigned in the blueprint |
 

From 8e45c515cea4abda80e02602808244242f33f948 Mon Sep 17 00:00:00 2001
From: Jesse Leite <jesseleite@gmail.com>
Date: Wed, 23 Apr 2025 16:46:57 -0400
Subject: [PATCH 09/10] Make array variables linkable.

---
 content/collections/tags/form-create.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/content/collections/tags/form-create.md b/content/collections/tags/form-create.md
index aa0c1ac01..6e3b55f4f 100644
--- a/content/collections/tags/form-create.md
+++ b/content/collections/tags/form-create.md
@@ -243,6 +243,8 @@ Instead of hardcoding individual fields, you may loop through the `fields` array
 
 Each item in this `fields` array contains the following data:
 
+#### Fields Array Variables
+
 | Variable | Type | Description |
 |---|---| --- |
 | `display` | string | User-friendly field label configured in blueprint |

From a408feb7117c2c84c9aca78c830bbaf9fc0c3d11 Mon Sep 17 00:00:00 2001
From: Jesse Leite <jesseleite@gmail.com>
Date: Wed, 23 Apr 2025 16:47:22 -0400
Subject: [PATCH 10/10] Add dedicated `form:fields` page.

---
 content/collections/tags/form-fields.md | 58 +++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 content/collections/tags/form-fields.md

diff --git a/content/collections/tags/form-fields.md b/content/collections/tags/form-fields.md
new file mode 100644
index 000000000..7734cd260
--- /dev/null
+++ b/content/collections/tags/form-fields.md
@@ -0,0 +1,58 @@
+---
+title: "Form:Fields"
+id: 14d5eff2-1cd6-4318-1b35-67bc514be4ff
+intro: >
+  To be used within the [form:create](/tags/form-create#dynamically-rendering-fields) tag when dynamically rendering fields.
+description: Recursive fields loop helper.
+parameters:
+  -
+    name: get
+    type: string
+    description: >
+      Get and render one specific field by its handle.
+  -
+    name: only
+    type: string
+    description: >
+      Loop over only the specified field handles (pipe separated).
+  -
+    name: except
+    type: string
+    description: >
+      Loop over all except the specified field handles (pipe separated).
+stage: 4
+---
+## Example
+This tag can recursively loop over the `fields` array context provided within the [form:create](/tags/form-create#dynamically-rendering-fields) tag pair.
+
+::tabs
+
+::tab antlers
+```antlers
+{{ form:fields }}
+    <div class="p-2">
+        <label>{{ display }}</label>
+        <div class="p-1">{{ field }}</div>
+        {{ if error }}
+            <p class="text-gray-500">{{ error }}</p>
+        {{ /if }}
+    </div>
+{{ /form:fields }}
+```
+::tab blade
+```blade
+<s:form:fields>
+    <div class="p-2">
+        <label>{{ $field['display'] }}</label>
+        <div class="p-1">{{ $field['field'] }}</div>
+        @if ($field['error'])
+            <p class="text-gray-500">{{ $field['error'] }}</p>
+        @endif
+    </div>
+</s:form:fields>
+```
+::
+
+:::tip
+Learn more about which [fields array variables](/tags/form-create#fields-array-variables) are available to this fields loop!
+:::