From 4a580707ca25cf7c4cfb05d9d24775eded35311c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bojl=C3=A9n?= <git@btao.org>
Date: Sat, 20 Jun 2026 10:19:03 +0100
Subject: [PATCH] fix(docs): give each radio_group example a distinct field
 name
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Native radios group by name across the whole document, and arrow-key navigation
spans the group — so three demos all named "plan" became one group (and had
colliding ids). Use distinct names (plan/tier/billing) per example. Document the
constraint in the component moduledoc.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 lib/shadix/components/radio_group.ex   |  4 ++++
 priv/registry/radio_group.json         |  2 +-
 website/components/docs/radio_group.ex | 24 ++++++++++++++----------
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/lib/shadix/components/radio_group.ex b/lib/shadix/components/radio_group.ex
index 3717461..a022d3f 100644
--- a/lib/shadix/components/radio_group.ex
+++ b/lib/shadix/components/radio_group.ex
@@ -12,6 +12,10 @@ defmodule Shadix.Components.RadioGroup do
       groups them); the selected dot is a CSS `before:` pseudo-element shown on `:checked`.
       No JavaScript.
 
+  Because grouping (and arrow-key navigation) is the browser's native behaviour over the
+  `name` attribute, **each distinct radio group on a page must use a distinct field name**.
+  Two groups backed by the same field name become one group for keyboard navigation.
+
   Styling is colocated (`priv/styles/<style>/radio_group.css`), **adapted** to the native
   input: shadcn's Radix skin keys off `data-checked`, which a native input does not expose,
   so the port uses the `:checked` pseudo-state instead.
diff --git a/priv/registry/radio_group.json b/priv/registry/radio_group.json
index dcee7b5..c54ad10 100644
--- a/priv/registry/radio_group.json
+++ b/priv/registry/radio_group.json
@@ -2,7 +2,7 @@
   "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.RadioGroup do\n  @moduledoc \"\"\"\n  Radio group component.\n\n  Two function-components:\n\n    * `radio_group/1` — a presentational container (`role=\"radiogroup\"`,\n      `data-slot=\"radio-group\"`) that lays out the items in a grid.\n\n    * `radio_group_item/1` — a field-aware native `<input type=\"radio\">`\n      (`data-slot=\"radio-group-item\"`). Items share the field's `name` (so the browser\n      groups them); the selected dot is a CSS `before:` pseudo-element shown on `:checked`.\n      No JavaScript.\n\n  Styling is colocated (`priv/styles/<style>/radio_group.css`), **adapted** to the native\n  input: shadcn's Radix skin keys off `data-checked`, which a native input does not expose,\n  so the port uses the `:checked` pseudo-state instead.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Form\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def radio_group(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div role=\"radiogroup\" data-slot=\"radio-group\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:field, Phoenix.HTML.FormField, required: true)\n  attr(:value, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(disabled required))\n\n  def radio_group_item(assigns) do\n    %{name: name, value: value, errors: errors} = field_attrs(assigns.field)\n\n    assigns = assign(assigns, name: name, field_value: value, errors: errors)\n\n    ~H\"\"\"\n    <input\n      type=\"radio\"\n      id={\"#{@name}_#{@value}\"}\n      name={@name}\n      value={@value}\n      checked={to_string(@field_value) == @value}\n      aria-invalid={(@errors != [] && \"true\") || nil}\n      data-slot=\"radio-group-item\"\n      class={@class}\n      {@rest}\n    />\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.RadioGroup do\n  @moduledoc \"\"\"\n  Radio group component.\n\n  Two function-components:\n\n    * `radio_group/1` — a presentational container (`role=\"radiogroup\"`,\n      `data-slot=\"radio-group\"`) that lays out the items in a grid.\n\n    * `radio_group_item/1` — a field-aware native `<input type=\"radio\">`\n      (`data-slot=\"radio-group-item\"`). Items share the field's `name` (so the browser\n      groups them); the selected dot is a CSS `before:` pseudo-element shown on `:checked`.\n      No JavaScript.\n\n  Because grouping (and arrow-key navigation) is the browser's native behaviour over the\n  `name` attribute, **each distinct radio group on a page must use a distinct field name**.\n  Two groups backed by the same field name become one group for keyboard navigation.\n\n  Styling is colocated (`priv/styles/<style>/radio_group.css`), **adapted** to the native\n  input: shadcn's Radix skin keys off `data-checked`, which a native input does not expose,\n  so the port uses the `:checked` pseudo-state instead.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Form\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def radio_group(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div role=\"radiogroup\" data-slot=\"radio-group\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:field, Phoenix.HTML.FormField, required: true)\n  attr(:value, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(disabled required))\n\n  def radio_group_item(assigns) do\n    %{name: name, value: value, errors: errors} = field_attrs(assigns.field)\n\n    assigns = assign(assigns, name: name, field_value: value, errors: errors)\n\n    ~H\"\"\"\n    <input\n      type=\"radio\"\n      id={\"#{@name}_#{@value}\"}\n      name={@name}\n      value={@value}\n      checked={to_string(@field_value) == @value}\n      aria-invalid={(@errors != [] && \"true\") || nil}\n      data-slot=\"radio-group-item\"\n      class={@class}\n      {@rest}\n    />\n    \"\"\"\n  end\nend\n",
       "path": "radio_group.ex"
     }
   ],
diff --git a/website/components/docs/radio_group.ex b/website/components/docs/radio_group.ex
index ef26ee1..79e58f4 100644
--- a/website/components/docs/radio_group.ex
+++ b/website/components/docs/radio_group.ex
@@ -43,28 +43,32 @@ defmodule Shadix.Website.Components.Docs.RadioGroup do
     """
   end
 
+  # Native radios are grouped by their `name` (the field name), and the browser's
+  # arrow-key navigation spans every radio sharing a name in the document. Each
+  # group/demo on this page therefore uses a DISTINCT field name so they stay
+  # independent (and so their generated ids don't collide).
   demo("Default", [description: "Three options with the first pre-selected."], """
   <.radio_group>
     <span class="flex items-center gap-2">
       <.radio_group_item
-        field={Phoenix.Component.to_form(%{"plan" => "starter"})[:plan]}
+        field={Phoenix.Component.to_form(%{"tier" => "starter"})[:tier]}
         value="starter"
       />
-      <.label for="plan_starter">Starter</.label>
+      <.label for="tier_starter">Starter</.label>
     </span>
     <span class="flex items-center gap-2">
       <.radio_group_item
-        field={Phoenix.Component.to_form(%{"plan" => "starter"})[:plan]}
+        field={Phoenix.Component.to_form(%{"tier" => "starter"})[:tier]}
         value="pro"
       />
-      <.label for="plan_pro">Pro</.label>
+      <.label for="tier_pro">Pro</.label>
     </span>
     <span class="flex items-center gap-2">
       <.radio_group_item
-        field={Phoenix.Component.to_form(%{"plan" => "starter"})[:plan]}
+        field={Phoenix.Component.to_form(%{"tier" => "starter"})[:tier]}
         value="enterprise"
       />
-      <.label for="plan_enterprise">Enterprise</.label>
+      <.label for="tier_enterprise">Enterprise</.label>
     </span>
   </.radio_group>
   """)
@@ -73,19 +77,19 @@ defmodule Shadix.Website.Components.Docs.RadioGroup do
   <.radio_group>
     <span class="flex items-center gap-2">
       <.radio_group_item
-        field={Phoenix.Component.to_form(%{"plan" => "starter"})[:plan]}
+        field={Phoenix.Component.to_form(%{"billing" => "starter"})[:billing]}
         value="starter"
         disabled
       />
-      <.label for="plan_starter" class="opacity-50">Starter</.label>
+      <.label for="billing_starter" class="opacity-50">Starter</.label>
     </span>
     <span class="flex items-center gap-2">
       <.radio_group_item
-        field={Phoenix.Component.to_form(%{"plan" => "starter"})[:plan]}
+        field={Phoenix.Component.to_form(%{"billing" => "starter"})[:billing]}
         value="pro"
         disabled
       />
-      <.label for="plan_pro" class="opacity-50">Pro</.label>
+      <.label for="billing_pro" class="opacity-50">Pro</.label>
     </span>
   </.radio_group>
   """)
-- 
2.51.2