Forms component

Search Box

Provide an accessible responsive search field with labels, validation states, sizes, and input or change events.

13 props0 slots2 outputsTheme readyResponsive

Interactive playground

Configure Search Box

Change any prop and inspect the server-rendered component immediately.

Live preview

Component code

<SearchBox
  value="sample-1"
  placeholder="Enter a sample value"
/>

Event outputInteract with the preview to inspect the typed payload.

Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Site search

Give visitors a clear way to search pages, services, or resources.

Component usage.wrn

<SearchBox
  label="Search documentation"
  name="site-search"
  value="sample-1"
  placeholder="Search components and guides"
/>

Compact

Compact directory search

Use a compact field above tables, lists, and directories.

Component usage.wrn

<SearchBox
  size="sm"
  label="Search stations"
  name="station-search"
  value="sample-2"
  placeholder="Name, district, or jurisdiction"
/>

Advanced

Required service lookup

Use validation and required semantics in focused lookup flows.

Component usage.wrn

<SearchBox
  size="lg"
  color="info"
  label="Complaint reference"
  name="complaint-reference"
  value="sample-3"
  placeholder="Enter reference number"
  required="true"
/>

Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@searchFires when the current search query changes.

@clearFires after the current value or selection is cleared.

Declarative handlers.wrn

<SearchBox
  @search='console.log(payload)'
  @clear='console.log(payload)'
/>

Direct output handlers.js

import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"SearchBox\"], [data-component=\"SearchBox\"]")

if (component) registerOutputHandler(component, "search", (payload) => {
  console.log("search", payload)
})

if (component) registerOutputHandler(component, "clear", (payload) => {
  console.log("clear", payload)
})

Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

Prop	Type	Default	Required
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`label`	string	`"Search Box"`	No
`name`	string	`""`	No
`value`	string	`""`	No
`placeholder`	string	`""`	No
`type`	string	`"search"`	No
`min`	string	`""`	No
`max`	string	`""`	No
`step`	string	`""`	No
`disabled`	boolean	`false`	No
`required`	boolean	`false`	No
`class`	string	`""`	No