Advanced Forms component

Search Box

Theme-aware, responsive search box component.

13 props0 slots0 eventsTheme 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"
/>

Live examples

Compare configurations and resize the browser to check responsive behavior.

Recommended

Balanced spacing, hierarchy, and content for the most common product workflow.

Component usage.wrn

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

Dense UI

A tighter variation for dashboards, side panels, tables, and operational interfaces.

Component usage.wrn

<SearchBox
  size="sm"
  label="Compact example"
  value="sample-2"
  placeholder="Enter a sample value"
/>

Extended

A more expressive variation using additional data, stronger emphasis, and optional states.

Component usage.wrn

<SearchBox
  size="lg"
  label="Advanced example"
  value="sample-3"
  placeholder="Search by name, email, or identifier"
/>

Component API

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