Specialized inputs

AppSearch

A search box — a leading magnifier, a placeholder, and one-click clear — for filtering a list or table.

<app-search name="q" placeholder="Search members…"></app-search>

<app-search> is the one search box. It pairs a leading magnifier with a text field and a one-click clear, so filtering a list or table looks and behaves the same everywhere — never an <app-input> with a magnifier bolted on.

Its look comes entirely from the shared @webority/theme, so the Razor <app-search> and the React <AppSearch> render identically — a search box is a search box on every Webority surface.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the field above it.

<app-search name="pgquery" aria-label="Search"></app-search>
value only seeds the initial queryThe value control fills the field when the page loads; typing into the control itself does not round-trip back into this field — that's client-side state the tag helper does not read.

Basic

A search field with a leading icon, a placeholder, and a one-click clear to reset the query.

A controlled search box
The clear (×) appears once there is a value; clicking it resets the query.
Show code 
<app-search name="q" placeholder="Search members…"></app-search>
A search box filters — it doesn't submitTyping narrows what is already on screen; it should never navigate or reload the page. Wire the query straight to the collection's filter, and let the clear (×) restore the full set.

Sizes

size takes sm or lg (md is the default), matching AppInput so a search box lines up with the controls around it.

Small, medium, large
Show code 
<app-search name="q" size="sm" placeholder="Small" />
<app-search name="q" placeholder="Medium (default)" />
<app-search name="q" size="lg" placeholder="Large" />

Loading

Set loading to swap the leading magnifier for a spinner while a search is in flight — for debounced or server-backed search.

Spinner while searching
Show code 
<app-search name="q" loading="true" placeholder="Type to search…" />

Filtering a list

The common job: filter the rows below as the user types. Derive the filtered set from the query — the clear button resets straight back to the full list.

Search filters the list live
  • Navneet Singh
  • Kanchan Sharma
  • Ramshankar Verma
  • Akshat Gupta
  • Priya Nair
Show code 
<app-search name="q" placeholder="Search members…"></app-search>
<!-- render the filtered rows below -->

When to use

Use it when

  • The user narrows a list, table, or set of cards by typing a few characters.
  • You want a consistent search affordance — magnifier + clear — above a collection.
  • The match is a simple contains-filter over data already on screen.

Reach for something else when

  • It is an ordinary text value in a form. → AppInput
  • The user types to find one item from a large or remote list. → AppAutocomplete
  • The user picks from a fixed, known set of options. → AppSelect

Best practices

Do
A placeholder that names what is being searched sets the right expectation.
Don't
A vague 'Type here' doesn't say what the box searches.
Do
With a value present, the clear (×) lets the user reset to the full list in one click.
Don't
A raw input with a magnifier drawn on top has no clear control and drifts from the theme.

Every option

The whole surface of the component, one cell per value — sizes, every combination of loading/disabled/populated, and the icon-size attribute a normal example never touches.

size — including the default

(default)
size="sm"
size="lg"

state — empty, populated, loading, disabled

(empty) — clear hidden
value="acme" — clear visible
loading — spinner replaces the icon
disabled — clear suppressed even with a value
disabled + loading

icon-size

icon-size="14"
icon-size="18" (default)
icon-size="24"

edge cases

long value — overflows the fixed-width field
class — extra class on the wrapper

Attributes

AttributeTypeDefaultDescription
namestring—Field name the search input posts under.
placeholderstringSearch…Placeholder that names what is being searched.
valuestring—Pre-filled query, e.g. when restoring a filter from the URL.
aria-labelstring—Accessible name for the field — set it, as there is usually no visible label.
icon-sizeint18Leading glyph size in px (React iconSize).
sizestring—Control size: sm / lg. Omit for the default (md).
loadingboolfalseSwap the leading magnifier for a spinner while a search is in flight.
disabledboolfalseDisables the field and hides the clear button.