phx-feedback-group docs

CHANGELOG.md

@@ -11,6 +11,7 @@
 ### Enhancements
   * Add `JS.toggle_class`
   * Force update select options when the options changed from the server while a select has focus
+  * Introduce `phx-feedback-group` for handling feedback for composite input groups
 
 ## 0.20.3 (2024-01-02)
 

guides/client/bindings.md

@@ -17,7 +17,7 @@ callback, for example:
 |------------------------|------------|
 | [Params](#click-events) | `phx-value-*` |
 | [Click Events](#click-events) | `phx-click`, `phx-click-away` |
-| [Form Events](form-bindings.md) | `phx-change`, `phx-submit`, `phx-feedback-for`, `phx-disable-with`, `phx-trigger-action`, `phx-auto-recover` |
+| [Form Events](form-bindings.md) | `phx-change`, `phx-submit`, `phx-feedback-for`, `phx-feedback-group` `phx-disable-with`, `phx-trigger-action`, `phx-auto-recover` |
 | [Focus Events](#focus-and-blur-events) | `phx-blur`, `phx-focus`, `phx-window-blur`, `phx-window-focus` |
 | [Key Events](#key-events) | `phx-keydown`, `phx-keyup`, `phx-window-keydown`, `phx-window-keyup`, `phx-key` |
 | [Scroll Events](#scroll-events-and-infinite-stream-pagination) | `phx-viewport-top`, `phx-viewport-bottom` |

guides/client/form-bindings.md

@@ -104,13 +104,12 @@ end
 
 _Note_: only the individual input is sent as params for an input marked with `phx-change`.
 
-## `phx-feedback-for`
+## Error Feedback
 
-For proper form error tag updates, the error tag must specify which
-input it belongs to. This is accomplished with the `phx-feedback-for` attribute,
-which specifies the name (or id, for backwards compatibility) of the input it belongs to.
-Failing to add the `phx-feedback-for` attribute will result in displaying error
-messages for form fields that the user has not changed yet (e.g. required
+For proper error feedback on form updates, the error tags must specify which
+input they belong to. This is accomplished with the `phx-feedback-for` and `phx-feedback-group` attributes.
+
+The `phx-feedback-for` annotation which specifies the name (or id, for backwards compatibility) of the input it belongs to. Failing to add the `phx-feedback-for` attribute will result in displaying error messages for form fields that the user has not changed yet (e.g. required
 fields further down on the page).
 
 For example, your `MyAppWeb.CoreComponents` may use this function:
@@ -148,6 +147,8 @@ Now, any DOM container with the `phx-feedback-for` attribute will receive a
 user input/focus. Using new CSS rules or tailwindcss variants allows you
 errors to be shown, hidden, and styled as feedback changes.
 
+Likewise, the `phx-feedback-group` attribute behaves similarly `phx-feedback-for`, but allows error tags and inputs to specify a composite name for a group of inputs.
+
 ## Number inputs
 
 Number inputs are a special case in LiveView forms. On programmatic updates,