search

A search input with a built-in icon and optional clear button. Handles the native browser cancel button, data-event binding, and debounce in one component. Use this instead of input({ type: 'search' }).

search({ name: 'q', label: 'Search', placeholder: 'Search products…' })

// With value, clear button, and hidden label:
search({
  name:        'q',
  label:       'Search',
  labelHidden: true,
  placeholder: 'Search…',
  value:       state.search,
  event:       'input:setSearch',
  debounce:    200,
  clearEvent:  'clearSearch',
})

Prop	Type	Default
`name`	string	—	Field name and id base
`label`	string	—	Label text — always provide for accessibility
`labelHidden`	boolean	false	Hides label visually; still read by screen readers
`placeholder`	string	—
`value`	string	—	Current value — controls clear button visibility
`event`	string	—	`data-event` binding, e.g. `'input:setSearch'`
`debounce`	number	200	Debounce delay in ms — only applied when `event` is set
`clearEvent`	string	—	Click event for the × button — only shown when `value` is non-empty
`disabled`	boolean	false
`id`	string	—	Override generated id
`class`	string	—	Extra classes on the wrapper
`attrs`	object	{}	Extra attributes on the `<input>`