[combobox] cant submit a form with required and multiple prop

[adamlindqvist]

Bug report

Current behavior

If used in a form and when using both required and multiple: <Combobox.Root required name="language" items={langs} multiple> it is not possible to submit a form.

It seems that the required validation is checking wether the input has a value and not if the Combobox itself has a value.

Expected behavior

Should be able to submit a form when there are selected values in the combobox.

Reproducible example

https://codesandbox.io/p/sandbox/keen-boyd-5h8x69

Base UI version

1.0.0-beta.4

Which browser are you using?

Chrome

Which OS are you using?

Mac OS 15.5

[mj12albert]

The validate prop on Field.Root could be used as kind of a workaround:

<Field.Root
  name="languages"
  validate={(value) => {
    if ((value as any[]).length === 0) {
      return 'This field is required';
    }
    return null;
  }}
>
  <Field.Label>
    Select languages (Required)
  </Field.Label>
  <Combobox.Root
    items={[/* items */]}
    multiple
  />
  <Field.Error />
</Field.Root>

("kind of" because adding "Required" to the label text doesn't fully compensate for not having required on the input directly)

[atomiks]

This should also be an issue with Select - the hidden input uses an empty value ("") when multiple is specified as it uses separate <input type="hidden"> elements without required specified on it. That prop should likely be removed in this case.

Using the inputRef prop and setting required to false in onValueChange works around this (https://codesandbox.io/p/devbox/eager-payne-w5z4l2)

inputRef.current.required = value.length === 0;