Search

Multi-mode site search (Bricks parity). Submits to actionUrl as GET with `?q=...` plus any additionalParams as hidden inputs. Defaults to `/search` route. Modes: `input` (form inline, server-renderable, no-JS friendly — best for hero/inline placement), `overlay` (icon button opens fullscreen modal with scale animation, ESC + close button + click-outside dismiss — best for prominent header search), `inlineReveal` (icon expands to inline input on click — best for compact navbar). Use in header templates, single_post templates, or anywhere a search affordance is needed.

Type: "searchBar"

Props

Field	Type	Default	Description
`displayMode`	'input'\|'overlay'\|'inlineReveal'	`"input"`	Mode Tampilan
`actionUrl`	string	`"/search"`	form action URL
`placeholder`	string	`"Cari produk, artikel, kursus..."`	Placeholder Input
`showLabel`	boolean	`false`	show input label visibly
`labelText`	string	`"Pencarian"`	Teks Label
`buttonText`	string	—	empty = icon-only submit (input mode only) (shown when `displayMode = input`)
`submitIcon`	string (icon name)	`{"library":"lucide","icon":"Search"}`	Lucide icon name (shown when `displayMode = input`)
`buttonAriaLabel`	string	`"Cari"`	Aria Label Tombol (shown when `displayMode = input`)
`toggleIcon`	string (icon name)	`{"library":"lucide","icon":"Search"}`	Lucide icon for overlay/inlineReveal toggle
`toggleAriaLabel`	string	`"Buka pencarian"`	Aria Label Toggle
`overlayTitle`	string	`"Cari di situs ini"`	only used in overlay mode (shown when `displayMode = overlay`)
`overlayTitleTag`	'div'\|'h1'\|'h2'\|'h3'\|'h4'\|'h5'\|'h6'	`"h4"`	h6 (shown when `displayMode = overlay`)
`overlayCloseAriaLabel`	string	`"Tutup pencarian"`	Aria Label Tombol Tutup (shown when `displayMode = overlay`)
`additionalParams`	Array<object>	`[]`	<{ id, key, value }> — hidden inputs added to form (e.g. scope to category)
`additionalParams[].key`	string	—	Nama Param
`additionalParams[].value`	string	—	Value

Example

{
  "id": "sea01abc",
  "type": "searchBar",
  "props": {
    "displayMode": "input",
    "actionUrl": "/search",
    "additionalParams": [],
    "placeholder": "Cari produk, artikel, kursus...",
    "showLabel": false,
    "labelText": "Pencarian",
    "buttonText": "",
    "submitIcon": {
      "library": "lucide",
      "icon": "Search"
    },
    "buttonAriaLabel": "Cari",
    "toggleIcon": {
      "library": "lucide",
      "icon": "Search"
    },
    "toggleAriaLabel": "Buka pencarian",
    "overlayTitle": "Cari di situs ini",
    "overlayTitleTag": "h4",
    "overlayCloseAriaLabel": "Tutup pencarian"
  }
}