Forms · Search field

SearchField

Searchbox primitive with clear and submit behavior. Soma owns value, focus, clear, keyboard and ARIA; Eidos adds size, variant and intent color.

parts{compiled.parts.order.length} events{events.length} keyboard2 sizes3 variants3

{ if (!disabled && !readonly && !justCommitted) resultsOpen = true; }} > { lastValueChange = next === '' ? 'empty' : next; lastValueChangeAt = Date.now(); if (!disabled && !readonly) resultsOpen = true; }} onSubmit={(next) => { lastSubmit = next || 'empty'; resultsOpen = false; }} onClear={() => { lastSubmit = 'cleared'; resultsOpen = false; }} > e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()} >

results {results.length} / {components.length}

trace {#if trace.length === 0} press Enter or clear the field to see events {:else} {#each trace.slice(0, 3) as entry} {entry.event} · {entry.family}{entry.intent ? ' · ' + entry.intent : ''} {fmtTime(entry.at)} {/each} {/if} value {isEmpty ? 'empty' : value} · onChange {lastValueChange} {#if lastValueChangeAt !== null} {fmtTime(lastValueChangeAt)} {/if} · last {lastSubmit}

{#if tab === 'live'}

Controls

soma owns value, clear and submit. eidos owns visual treatment.

soma props · search behavior

value placeholder {#each ['clearOnEscape', 'disabled', 'readonly', 'required', 'invalid', 'loading'] as flag} {flag} {#if flag === 'clearOnEscape'} {clearOnEscape ? 'on' : 'off'} {:else if flag === 'disabled'} {disabled ? 'on' : 'off'} {:else if flag === 'readonly'} {readonly ? 'on' : 'off'} {:else if flag === 'required'} {required ? 'on' : 'off'} {:else if flag === 'invalid'} {invalid ? 'on' : 'off'} {:else} {loading ? 'on' : 'off'} {/if} {/each} debounceMs

eidos props · visual treatment

size {#each ['xs', 'sm', 'md', 'lg', 'xl'] as s} {/each} variant {#each variants as item} {/each} color {#each colors as item} {/each}

soma headless · search behavior svelte

{somaSnippet}

eidos visual · size, variant and intent color svelte

{eidosSnippet}

{/if} {#if tab === 'api'}

API + reference comparison

Feature	Air	Radix	Bits	Ark	React Aria	UIX	Decision
Native search input	❌	❌	❌	⚠️	✅	✅	Soma owns `type="search"` and `role="searchbox"`.
Clear trigger	❌	❌	❌	⚠️	✅	✅	Covered with translated label and disabled state.
Escape clears	❌	❌	❌	⚠️	✅	✅	Covered via `clearOnEscape`.
Submit on Enter	❌	❌	❌	⚠️	✅	✅	Covered with `commit-submit` event.
Field state integration	⚠️	✅	⚠️	✅	✅	✅	UIX delegates label/error/description to Field.

Prop	Owner	Default	Notes
value	soma	''	Bindable search text
onValueChange	soma	noop	Live filtering path
onSubmit	soma	noop	Enter key path
onClear	soma	noop	Clear trigger / Escape path
clearOnEscape	soma	true	Escape clears the input
disabled / readonly / invalid	soma	false	Field integration flags
size	eidos	md	sm \| md \| lg
variant	eidos	surface	surface \| outline \| ghost.
color	eidos	primary	Intent palette for focus and clear trigger hover.

{/if} {#if tab === 'morfo'}

Morfo contract

{#each partsList as part} {/each}

Part	Marker	Element	Role	Optional
{part.kebab}	`[{part.marker}]`	<{part.defaultElement}>	{part.role ?? '—'}	{part.optional ? 'yes' : 'no'}

Keyboard

{#each (searchFieldMorfo.parts.find((p) => p.kebab === 'input')?.keyboard) ?? [] as key} {/each}

Key	Action
{key.key}	{key.action}

{/if} {#if tab === 'sema'}

sema · events + perceptual signature

SearchField splits submit and reset so Enter and Clear/Escape can carry different perceptual hooks while the value mutation remains owned by Soma.

{#each events as action} {/each}

Name	Family	Verb	Sequence	Target	Play
{action.name}	{action.semantic.family}	{action.semantic.verb ?? '—'}	{action.semantic.sequence ?? 'pre'}	{action.target}

{/if} {#if tab === 'recipe'}

Eidos recipe

Selectors live in src/uix/eidos/components/search-field/search-field.css and consume Soma empty/focus state plus Eidos data-size, data-variant and data-color.

Selector	Owner	Purpose
`[data-search-field]`	morfo	Root search composition shell.
`[data-search-field][data-size][data-variant][data-color]`	eidos	Visual scale, input treatment and intent palette.
`[data-search-field-input][data-empty][data-focus][data-invalid]`	morfo	Search input state surfaced by Soma.
`[data-search-field-clear-trigger]`	morfo	Clear action affordance and disabled state.
`[data-search-field][data-event]`	eidos	Transient perceptual event styling from Sema projection.

{/if} {#if tab === 'a11y'}

Accessibility

Concern	Contract
Role	Input uses `role="searchbox"` and `type="search"`.
Label	Input receives translated label unless a Field label wins.
Keyboard	Enter submits; Escape clears when enabled.
Clear	Clear trigger restores focus to the input.

{/if}