# SearchField

> A single-line search field: a `<search>` landmark stacking a caption, a decorated control, and optional supporting or validation copy, composed from whatever compound parts a given field needs.

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

Renders a `<search>` landmark — the platform's own role for a search
region, needing no explicit `role` attribute — stacking a caption,
SearchField.Input, and validation copy in a single column.

## Examples

```tsx
<SearchField>
	<Label htmlFor="site-search">{t("search.label")}</Label>
	<SearchField.Input id="site-search" name="q" placeholder={t("search.placeholder")} />
</SearchField>
```

```tsx
<SearchField aria-label={t("search.label")}>
	<SearchField.Input name="q" />
</SearchField>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The field's compound parts: a caption, the control, and any supporting or validation copy. |

Also accepts everything in `TagProps<"search">`.


### SearchField.Input

Renders SearchField's control: a positioning wrapper pairing a muted, decorative SearchIcon with a native `<input type="search">` built on Input, inheriting its box, color, and state styling.

Also accepts everything in `Omit<Input.Props, "type" | "list" | "role">`.


### SearchField.Control

Renders the row holding SearchField.Input and the SearchField.Clear button beside it, and the positioning context that anchors the clear button to the input's trailing edge.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The row's contents: the search input, and the clear button reading it. |

Also accepts everything in `TagProps<"div">`.


### SearchField.Clear

Renders SearchField's clear button: a round, icon-sized ghost Button centred on the input's trailing edge, carrying `clearField()` so it empties the `commandfor` input it names and shows while that input holds text.

| Prop | Type | Description |
| --- | --- | --- |
| `commandfor` | `string` | The `id` of the input this button empties, naming the control it belongs to. |
| `children?` | `RemixNode` | Glyph or label the button shows. Defaults to a decorative XIcon. |

Also accepts everything in `Omit<
		Button.Props,
		"type" | "variant" | "size" | "command" | "children"
	>`.