# clearField

> Wires a SearchField's clear button to empty its associated input alone, and keeps the button — shipped `hidden` in markup — showing exactly while that input holds a value.

```ts
import { clearField } from "@sdxc/ui/mixins";
```

Wires a SearchField's clear button to empty its own `commandfor`-resolved
input and dispatch `input`/`change` plus SearchFieldClearEvent before
refocusing the field, and shows the button exactly while that input holds text;
a disabled, read-only, or already-empty target leaves the press with no effect.

## Signature

```ts
clearField(): MixinDescriptor<HTMLButtonElement>
```

Returns: A mixin descriptor for a SearchField clear button's `mix` prop.

## Examples

```tsx
<div>
	<input id="site-search" type="search" name="q" />
	<button
		type="button"
		hidden
		commandfor="site-search"
		command={SEARCH_FIELD_CLEAR_COMMAND}
		aria-label={t("searchField.clear")}
		mix={clearField()}
	>
		<XIcon />
	</button>
</div>
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/mixins` too.

### SearchFieldClearEvent

Dispatched on a SearchField's input by clearField immediately
after its value is emptied, carrying the text it held a moment before so
a consumer can react to the clear — canceling an in-flight request for that term, or dropping a query param — using only this event.

#### Signature

```ts
new SearchFieldClearEvent(previousValue: string)
```

#### Properties

| Property | Type | Description |
| --- | --- | --- |
| `previousValue` | `readonly string` | The input's value immediately before this clear. |

### SEARCH_FIELD_CLEAR_COMMAND

Custom Invoker Command a SearchField's clear button declares
(`command={SEARCH_FIELD_CLEAR_COMMAND}`, `commandfor` pointing at the
field's input) so the pairing reads as a real invoker relationship in markup, matched by clearField through the button's own click.

#### Signature

```ts
const SEARCH_FIELD_CLEAR_COMMAND = "--clear" as const
```