Components
Search
A full-screen search with grouped results.
Usage
After the one-time setup, call the helper directly from ERB. No component import is needed.
<%# Rows rendered in the block are filtered in the browser. Pass src: to have your server answer each query instead. %>
<%= lc_search label: "Search the workspace", placeholder: "Search projects and people…", empty: "Nothing matches %{query}", id: "my-component", shortcut: nil do %>
<%= lc_search_group "Projects" do %>
<%= lc_search_result "Fieldwork", "#fieldwork", detail: "A quieter identity for an outdoor journal.", icon: "sun", keywords: "brand identity" %>
<%= lc_search_result "Sunday House", "#sunday-house", detail: "A welcoming home for a neighborhood bakery.", icon: "home", keywords: "website" %>
<% end %>
<%= lc_search_group "People" do %>
<%= lc_search_result "Alex Lee", "#alex-lee", detail: "Designer", icon: "user" %>
<%= lc_search_result "Sam Kim", "#sam-kim", detail: "Developer", icon: "user" %>
<% end %>
<% end %>Examples
Filtered in the browser
<%# Rows rendered in the block are filtered in the browser. Pass src: to have your server answer each query instead. %>
<%= lc_search label: "Search the workspace", placeholder: "Search projects and people…", empty: "Nothing matches %{query}", id: "example-0", shortcut: nil do %>
<%= lc_search_group "Projects" do %>
<%= lc_search_result "Fieldwork", "#fieldwork", detail: "A quieter identity for an outdoor journal.", icon: "sun", keywords: "brand identity" %>
<%= lc_search_result "Sunday House", "#sunday-house", detail: "A welcoming home for a neighborhood bakery.", icon: "home", keywords: "website" %>
<% end %>
<%= lc_search_group "People" do %>
<%= lc_search_result "Alex Lee", "#alex-lee", detail: "Designer", icon: "user" %>
<%= lc_search_result "Sam Kim", "#sam-kim", detail: "Developer", icon: "user" %>
<% end %>
<% end %>API reference
Helpers render semantic HTML and include their interaction wiring. Pass native attributes through class:, data:, aria: and the usual Rails options. Blocks use captured ERB content.
lc_search
lc_search(label:, src: nil, param: "q", placeholder: label, trigger: lc_t("lostcoords.ui.search.trigger"), empty: lc_t("lostcoords.ui.search.empty"), prompt: nil,
shortcut: "mod+k", id: "lc-search", **attributes, &block)| Input | Default | Values |
|---|---|---|
| label | Required | Accessible name, visible where applicable |
| src | nil | — |
| param | "q" | — |
| placeholder | label | — |
| trigger | lc_t("lostcoords.ui.search.trigger") | — |
| empty | lc_t("lostcoords.ui.search.empty") | — |
| prompt | nil | — |
| shortcut | "mod+k" | — |
| id | "lc-search" | — |
| attributes | {} | Native HTML attributes; class:, data: and aria: merge with defaults |
| block | Captured block | Captured Rails ERB content |
lc_search_group
lc_search_group(title, **attributes, &block)| Input | Default | Values |
|---|---|---|
| title | Required | — |
| attributes | {} | Native HTML attributes; class:, data: and aria: merge with defaults |
| block | Captured block | Captured Rails ERB content |
lc_search_result
lc_search_result(title, url, detail: nil, icon: nil, keywords: nil, **attributes, &block)| Input | Default | Values |
|---|---|---|
| title | Required | — |
| url | Required | — |
| detail | nil | — |
| icon | nil | Heroicon name; spacing is handled automatically |
| keywords | nil | — |
| attributes | {} | Native HTML attributes; class:, data: and aria: merge with defaults |
| block | Captured block | Captured Rails ERB content |
Styling and extension
Use class: to merge utilities, native attributes for application behavior, and the theming guide for the shared palette. For custom markup, the advanced class helpers expose the same styles, including glass surfaces and class merging.