shadcn.io is not affiliated with official shadcn/ui
Combobox examples · With States
With Validation Feedback Combobox for React
A required currency combobox that shows an error until a value is picked.
A required field that says so. Until a currency is picked, the button has a destructive border and Please select a currency shows below it. Picking one clears both. Use it in forms where the combobox can't be left empty.
Preview
Installation
FAQ
When does the error show?
Whenever no currency is selected. The message is worked out from the value on every render, so there's no separate error state to keep in sync.
How does the button show the error?
It gets border-destructive while the value is empty, and the message is a text-destructive text-xs paragraph below.
The trigger also gets aria-invalid.
How do I clear the message?
Pick any currency. The value is no longer empty, so the border and the message go away.
Which currencies are listed?
USD, EUR, GBP, JPY and CAD. The search box says Search currency..., and No currency found. shows when nothing matches.
Should the error show before anyone touches the field?
Usually not. Show it after a submit or after the field loses focus with no value. The demo shows it straight away so the state is visible.
Does it work with a form library?
Yes. Pass the library's value and change handler to the combobox and its error message to the paragraph. The forms guide has a Combobox demo for React Hook Form, TanStack Form and Formisch.
Related
- With Disabled Items ComboboxA combobox where plans that aren't
- Error State with Retry ComboboxA combobox whose list failed to load
- Simple Single Select ComboboxA single-select combobox that opens from
- Required Field Validation FormA name and an email field marked with
- Input with Helper TextAn email field with helper text under it
- Empty State with Action ComboboxA combobox that starts with no items and