`search` element

A search box or a filter bar that writes its values into the URL's query string.

Renders

a GET <form role="search"> with an input (and optional filter controls)

Required

Nothing beyond type.

Native apps

Web, and server-driven native apps

Syntax

search element

{ "type": "search" }

An element lives in a screen's sections, another element's elements, a layout slot or a component root.

Properties

Property	Type	Default	Description
`inputs`	`array of input`	—
`placeholder`	`string`	—	search: the hint inside the box
`autofocus`	`boolean`	—	search: put the cursor in the box when the screen opens
`name`	`string`	`q`	icon name; search: the query parameter (default q)
`instant`	`boolean`	—	search: search again as the visitor types (debounced; the results screen is patched in place and the box keeps focus)
`target`	`string`	—	route, element id, or URL
`label`	`string`	—

Plus the properties every element accepts: id, className, style, responsive, states, animation, visible, ariaLabel, attributes and more.

Events & actions

With instant: true it searches again as you type and patches the results screen in place, keeping focus.

Example

search example

{
  "type": "search",
  "instant": true,
  "target": "/products",
  "placeholder": "Search products, brands and more"
}

Data sources read the query with "q": {"query": "q"} filters or "=query.q". With inputs (text, number, date, select, radio, checkbox, hidden) it becomes a filter bar.

Expected output

The HTML IWC rendered for the example above (inside the page's content wrapper). Class names such as i807b63fc are generated per element for its scoped CSS.

Rendered HTML

<div class="iwc-page ipage" id="iwc-content">
  <form class="iwc-search i2f83c77d" action="/products" data-iwc-instant method="get" role="search">
    <input type="search" name="q" value="" placeholder="Search products, brands and more" aria-label="Search products, brands and more" enterkeyhint="search" autocomplete="off">
    <button class="iwc-button iwc-button-secondary" type="submit">
      Search
    </button>
  </form>
</div>

Data, conditions & styling

Conditional rendering: "visible": {"auth": "signed-in"}, {"roles": ["admin"]} or an expression such as "=product.stock > 0". Decided on the server: hidden elements are never sent.
Data binding: bind takes text from data (name, user.name, props.title, params.slug, state.cart.count); binds binds attributes. Containers become data-driven with data + item. See data binding.
Styling: className for your stylesheets, style for CSS in JSON, states for hover/focus/active, animation for entrance motion. See the style property reference.
Responsive behaviour: responsive applies CSS at or below a breakpoint ({"mobile": {"padding": "12px"}}); grids also take responsiveColumns.