Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Combobox examples · Custom Actions

Clear/Reset Button Combobox for React

A combobox with a button that clears the picked theme.

Framework
UI library

A theme picker with an X beside the chevron while a theme is set. One click clears the value and the button goes back to Select theme.... System starts selected. Use it for optional fields, where empty is a valid answer.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Where is the clear button?

In a relative wrapper around the combobox, positioned absolute end-8 so it lands just before the chevron. It sits next to the trigger, not inside it, since a button can't contain another button.

What does it do?

It empties the value the demo keeps in state, and the combobox shows its placeholder. The value becomes null.

When is it shown?

Only while a theme is selected. With nothing to clear it isn't rendered.

How is the button labelled?

It's a ghost icon-xs Button with an XIcon and aria-label Clear theme, since the icon has no text.

Which themes are listed?

Light, Dark and System. The search box says Search themes..., and No theme found. shows when nothing matches.

Should clearing go back to a default instead?

If the field always needs a value, set it back to the default, such as System, rather than to empty, and label the button Reset.

All 42 combobox examples