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"
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.
Props
| Field | Type | Default | Keterangan |
|---|---|---|---|
displayMode | 'input'|'overlay'|'inlineReveal' | "input" | Input: form selalu terlihat. Overlay: icon membuka modal fullscreen. Expand: icon membuka input di tempat. |
actionUrl | string | "/search" | Form submit ke URL ini dengan `?q=...`. Default: /search. |
placeholder | string | "Cari produk, artikel, kursus..." | Placeholder Input |
showLabel | boolean | false | Default disembunyikan untuk screen reader saja. |
labelText | string | "Pencarian" | Teks Label |
buttonText | string | — | Kosongkan untuk icon-only. (tampil saat displayMode = input) |
submitIcon | string (icon name) | {"library":"lucide","icon":"Search"} | Icon Tombol Submit (tampil saat displayMode = input) |
buttonAriaLabel | string | "Cari" | Wajib diisi saat tombol icon-only. (tampil saat displayMode = input) |
toggleIcon | string (icon name) | {"library":"lucide","icon":"Search"} | Icon Toggle |
toggleAriaLabel | string | "Buka pencarian" | Aria Label Toggle |
overlayTitle | string | "Cari di situs ini" | Judul Overlay (tampil saat displayMode = overlay) |
overlayTitleTag | 'div'|'h1'|'h2'|'h3'|'h4'|'h5'|'h6' | "h4" | HTML Tag Judul (tampil saat displayMode = overlay) |
overlayCloseAriaLabel | string | "Tutup pencarian" | Aria Label Tombol Tutup (tampil saat displayMode = overlay) |
additionalParams | Array<object> | [] | Hidden input ditambahkan ke form. Misal `category=courses` untuk scope hasil pencarian. |
additionalParams[].key | string | — | Nama Param |
additionalParams[].value | string | — | Value |
Contoh
{
"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"
}
}