From bc1fe8145701e8c6017fc3efcd7c36ffdc78c7e2 Mon Sep 17 00:00:00 2001 From: OrpheusDark Date: Tue, 13 Oct 2026 12:57:17 +0530 Subject: [PATCH] Fix duplicate FormControl inputs in horizontal layout Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .changeset/horizontal-form-control-inputs.md | 5 +++++ packages/react/src/FormControl/FormControl.tsx | 4 +++- .../src/FormControl/__tests__/FormControl.test.tsx | 11 +++++++++++ 3 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 .changeset/horizontal-form-control-inputs.md diff --git a/.changeset/horizontal-form-control-inputs.md b/.changeset/horizontal-form-control-inputs.md new file mode 100644 index 00000000000..d495a920e23 --- /dev/null +++ b/.changeset/horizontal-form-control-inputs.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Fix duplicate input rendering in horizontal FormControl layouts. diff --git a/packages/react/src/FormControl/FormControl.tsx b/packages/react/src/FormControl/FormControl.tsx index 27b905dd7aa..2b4b597e865 100644 --- a/packages/react/src/FormControl/FormControl.tsx +++ b/packages/react/src/FormControl/FormControl.tsx @@ -155,7 +155,9 @@ const FormControl = React.forwardRef( {childrenWithoutSlots.filter( child => React.isValidElement(child) && - ![Checkbox, Radio].some(inputComponent => child.type === inputComponent || isSlot(child, inputComponent)), + !expectedInputComponents.some( + inputComponent => child.type === inputComponent || isSlot(child, inputComponent), + ), )} {slots.leadingVisual ? ( diff --git a/packages/react/src/FormControl/__tests__/FormControl.test.tsx b/packages/react/src/FormControl/__tests__/FormControl.test.tsx index 7032dd6952d..2a35139ebbc 100644 --- a/packages/react/src/FormControl/__tests__/FormControl.test.tsx +++ b/packages/react/src/FormControl/__tests__/FormControl.test.tsx @@ -116,6 +116,17 @@ describe('FormControl', () => { expect(leadingVisual).not.toBeNull() }) + it('renders a non-choice input only once in horizontal layout', () => { + const {getAllByRole} = render( + + {LABEL_TEXT} + + , + ) + + expect(getAllByRole('textbox')).toHaveLength(1) + }) + describe('vertically stacked layout (default)', () => { describe('rendering', () => { it('renders with a hidden label', () => {