Add `required` support for Combobox

[gkorland]

The Combobox doesn't support a built it option to mark it as required when included in a form.

[therealravitej]

+1

I have been searching for it in all docs, cant find. Any workaround available?

This is attributing to bad UX, where user does not know what fields are mandatory until he clicks on submit

[gkorland]

I couldn't find a workaround.

[chris23lngr]

Since the combobox component is actually composed of the popover and the command component, it will probably be difficult to add a required field to the combobox component, since neither the popover nor the command component are typical form elements.

However, if you use react-hook-form and (more importantly) zod, as suggested in the documentation, you can mark a field as required as follows:

const FormSchema = z.object({
  language: z.string({
    required_error: "Please select a language.",
  }),
})

Here is the implemented example.

However, if you are more concerned with the UX, a common option is to mark required fields with a specific symbol (*) and indicate at a specific point that marked fields are required. Hope that helps!

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[gkorland]

I don't think it was solved....

[stevica-canadi]

You can always add a hidden input and forward the required to it together with all other form related props

<input type="hidden" required={required} value={value} name={name} onChange={onChange} .... />

I use it like that for any SSR for example remix-run