`isRequired` validation fails on multi-select ComboBox

[BMCwebdev]

Provide a general summary of the issue here

When using ComboBox with selectionMode="multiple" and isRequired, the required HTML attribute is placed on the visible text <input> rather than on the hidden <input type="hidden"> elements that carry the selected values. Because the visible input's text is always empty in multi-select mode (selections are rendered externally via ComboBoxValue/TagGroup), native form validation always reports valueMissing — even when items are selected.

🤔 Expected Behavior?

When isRequired is set on a multi-select ComboBox and one or more items are selected, form submission should succeed. The required constraint should be evaluated against the selected values (the hidden inputs), not the visible search text input.

😯 Current Behavior

Form submission is blocked with a required validation error regardless of how many items are selected. This happens because:

1. useTextField sets required on the visible <input> element (via useFormValidation → setCustomValidity), but in multi-select mode this input is always empty — it's a search field, not a value field.
2. The hidden <input type="hidden"> elements that carry the actual selected keys (rendered in ComboBox.tsx lines ~209–219) do not have a required attribute.
3. useComboBoxState passes null as the validation value when displayValue is an empty array (useComboBoxState.ts line ~353), which causes useFormValidationState to skip the validate function entirely (if (!validate || value == null) { return null; }). This means custom validation also cannot catch the zero-selection case.

💁 Possible Solution

Move the required constraint from the visible text input to the hidden inputs in multi-select mode. Specifically:

• When selectionMode="multiple" and isRequired, add required to a hidden input that reflects whether any keys are selected (e.g., render a single hidden input with required and an empty value when no keys are selected, or remove it when keys are present).
• Do not set required on the visible text <input>, since its value is independent of the selection state in multi-select mode.

The React Aria team confirmed this approach in a discussion response — Devon noted: "Yes, I think isRequired should apply to the hidden inputs in multi-select mode, and not to the textfield."

🔦 Context

We're building a design system on React Aria Components and want to use the new multi-select ComboBox (v1.16.0) as a form field with full validation support (isRequired, validate, validationBehavior, server validation). Currently we have to work around this at the wrapper level by running the ComboBox in aria validation mode internally and using a proxy hidden input to block native form submission — which is fragile and duplicates logic that should live in React Aria.

🖥️ Steps to Reproduce

import {
  Form,
  ComboBox,
  ComboBoxValue,
  Input,
  Button,
  Label,
  FieldError,
  Popover,
  ListBox,
  ListBoxItem,
  TagGroup,
  TagList,
  Tag,
} from 'react-aria-components';

const items = [
  { id: '1', name: 'Option 1' },
  { id: '2', name: 'Option 2' },
  { id: '3', name: 'Option 3' },
];

function App() {
  return (
    <Form>
      <ComboBox
        selectionMode="multiple"
        defaultItems={items}
        isRequired
        name="selections"
      >
        <Label>Select items</Label>
        <Input />
        <ComboBoxValue>
          {({ selectedItems }) => (
            <TagGroup>
              <TagList items={selectedItems}>
                {(item) => <Tag>{item.name}</Tag>}
              </TagList>
            </TagGroup>
          )}
        </ComboBoxValue>
        <FieldError />
        <Popover>
          <ListBox>
            {(item) => <ListBoxItem>{item.name}</ListBoxItem>}
          </ListBox>
        </Popover>
      </ComboBox>
      <Button type="submit">Submit</Button>
    </Form>
  );
}

Steps:

1. Render the form above
2. Open the ComboBox and select one or more items
3. Click "Submit"
4. Expected: Form submits (required is satisfied)
5. Actual: Required validation error appears on the ComboBox

Version

react-aria-components@1.16.0, @react-stately/combobox@3.13.0, @react-aria/combobox@3.15.0

What browsers are you seeing the problem on?

Firefox, Chrome

If other, please specify.

No response

What operating system are you using?

Mac OS 26.3

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response