Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

Select With Clear

ProNew

A select that can return to nothing chosen through a separate Clear button named after the field, shown only when a value is set and handing focus back to the select.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

placeholder

Guide and examples

When to use it

Use this for optional filters where "no filter" is a state: status, owner, category.

Do not use it for required fields, or when an "All" option inside the list is clearer.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Log in Get Pro for $35

Props

SelectWithClear

Prop	Type	Default	Description
`label`	`string`	-	Visible label; also names the Clear button.
`options`	`{ value, label }[]`	-	Choices.
`value / onValueChange`	`string / fn`	-	Empty string means nothing chosen.
`placeholder`	`string`	`Any`	Shown when empty.

Accessibility

A Radix select cannot clear itself, so Clear is a real button with the accessible name Clear {label}.
Focus returns to the select after clearing, so the keyboard flow continues where it was.
The empty value shows the placeholder ("Any").

Keyboard

Key	Action
Enter, Space or ArrowDown	opens the list
Tab	from the select to Clear
Enter or Space on Clear	empties the field and refocuses the select

Testing

The pattern ships a Testing Library test (select-with-clear.test.tsx) that covers the named Clear button, clearing with focus return and choosing again.