Theme
Search field
A search box.
Examples
Props
SearchField
A search box. Escape clears it; Enter submits.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | The visible label. Every field has one; it names the field for screen readers too. Text, so it can also be the field's aria-label: see `useFallbackName`. |
description? | ReactNode | — | Help shown under the field and read with it. |
errorMessage? | ReactNode | ((validation: ValidationResult) => ReactNode) | — | Shown when the field is invalid; defaults to the browser's validation message. |
placeholder? | string | — | |
shortcut? | string | — | The key that focuses the field elsewhere, shown at its end while it is empty: "⌘K". |
Also takes 120 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
Keyboard
| Key | Does |
|---|---|
| Escape | Clears the field |
| Enter | Submits |
Accessibility
- The label is required and is the field's accessible name; the description and error are linked with aria-describedby.
- Invalid fields are marked aria-invalid, and the error is announced when it appears.
- The border meets 3:1 against every surface (borderControl), and text 4.5:1, in every theme.
- The clear button is labelled "Clear search".