ClearButton gives a text field a "×" button at its right end, in the text area. The button shows while the field has text. A click clears the text. Escape in the field also clears the text.
The search boxes of PropertyGrid, LogView and CommandPalette have the button. Use ClearButton for a search box of your own, for example the box that sets SearchText of a DataGrid.
<ui:TextField name="search" placeholder-text="Search" />
var search = root.Q<TextField>("search");
ClearButton.Attach(search);
search.RegisterValueChangedCallback(evt => grid.SearchText = evt.newValue);
| Member |
Description |
ClearButton.Attach(field, clearOnEscape) |
Adds the button to a TextField and returns it. Call it one time for a field. clearOnEscape (true by default) makes Escape clear the text. |
ClearButton.SetShown(field, shown) |
Shows or hides the button of a field that has one. |
ClearButton.IsShown(field) |
True when SetShown did not hide the button. |
ClearButton.Refresh(field) |
Call it after SetValueWithoutNotify. That call raises no event, so the button does not see the new text. |
- The clear raises the value changed event of the field, so the list shows all rows again.
- The field keeps the focus after a click on the button.
- Escape in a field with text clears the text and goes no further: a window or an overlay around the field does not close. Escape in an empty field does what it did before.
- The button is not a focus stop. From the keyboard, use Escape.
- The tooltip "Clear" is the
ToolboxText key tb.clear. See Localization.
| Control |
Attribute |
Escape |
PropertyGrid |
show-clear-button (ShowClearButton), on by default |
Clears the search text. |
LogView |
show-clear-button (ShowClearButton), on by default |
Clears the filter text. |
CommandPalette |
show-clear-button (ShowClearButton), on by default |
Closes the palette. |
<tb:PropertyGrid name="grid" show-clear-button="false" />
#Styling
| Class |
Element |
tb-clear-button |
The button: 18 px wide, no border, the "×" in --tb-color-text-muted. |
tb-clearable |
On the text field while its button is on. The text area has room for the button on the right. |
tb-clearable--has-text |
On the text field while it has text. |
.unity-base-text-field > .tb-clear-button { color: var(--tb-color-accent); }
