generated:catalog.entry.search-input.title
generated:catalog.entry.search-input.description
@xngui/components/search-input@xngui/components/search-inputchrome:demo.section
chrome:demo.preview
import { form, validate } from '@angular/forms/signals';
import { XForm } from '@xngui/components/form';
import { XFormField } from '@xngui/components/form-field';
import { XSearchInput } from '@xngui/components/search-input';
private readonly model = signal({ query: '' });
protected readonly demoForm = form(this.model, (path) => {
syncDemoStringLength(path.query, () => this.controlState());
validate(path.query, ({ value }) => demoStringFieldErrors(this.controlState(), value));
});
chrome:demo.events.title
chrome:demo.events.empty
chrome:demo.api.title
x-search-input
chrome:demo.api.col.property
chrome:demo.api.col.type
chrome:demo.api.col.default
chrome:demo.api.col.description
sizeXSize—Visual size tier — falls back to parent `x-form` then XConfigService when unset.
densityXDensity—Spacing offsets — orthogonal to `size`; falls back to parent `x-form` then XConfigService when unset.
placeholderstring''Placeholder text shown when the control is empty.
autocompleteXAutocomplete'off'Native `autocomplete` hint for the control.
lookXFormLook—Field chrome — outline, fill, flat, or none; falls back to parent `x-form` then XConfigService.
debounceMsnumber300Debounce duration in milliseconds for debouncedValue.
showIconbooleantrueBuilt-in magnifying-glass icon in the start slot.
showSettlingbooleantrueSpinner while the debounce timer is running.
clearablebooleantrueShows a clear button when the query has a value.
maskXTextMaskInput—As-you-type mask — preset, Maskito options, or config with `unmask`. Model value stays unmasked (digits-only for presets).
inputModestring—Native `inputmode` hint for mobile keyboards.
spellcheckbooleanfalseNative `spellcheck` attribute.
enterKeyHintstring'search'Native `enterkeyhint` for the virtual keyboard action key.
inputPatternstring—Native HTML `pattern` attribute (Signal Forms validators use a separate `pattern` API).
controlIdstring—Native `id` on the control; falls back to `name`, then a generated id.
disabledbooleanfalseKept in sync by `[formField]`; set directly for standalone use.
readonlybooleanfalsePrevents editing while keeping the control focusable.
invalidbooleanfalseMarks the control invalid — display timing defers to ancestor `x-form-field` when wrapped.
requiredbooleanfalseSets the native `required` attribute and `aria-required`.
minLengthnumber—Native `minlength` constraint for validation.
maxLengthnumber—Native `maxlength` constraint for validation.
namestring''Form control name — used as `name` on the native element and for id fallback.
rolestring—Custom ARIA `role` — use when composing combobox or similar patterns.
ariaExpandedboolean—ARIA `aria-expanded` — for combobox/popup compositions.
ariaHasPopupstring—ARIA `aria-haspopup` — for combobox/popup compositions.
ariaControlsstring—ARIA `aria-controls` — id of the controlled popup listbox.
ariaAutocompletestring—ARIA `aria-autocomplete` — list, inline, both, or none.
ariaActiveDescendantstring—ARIA `aria-activedescendant` — id of the focused option in a listbox.
ariaLabelstring—Accessible name when no visible label is provided.