Search

Styled search form components for filtering and querying content.

Basic usage

<form action="/search" method="get" class="l-ui-form">
  <label for="query" class="l-ui-sr-only">Search</label>
  <div class="l-ui-search-inline">
    <input type="text" id="query" name="query"
           class="l-ui-form__field" placeholder="Search...">
    <button type="submit" class="l-ui-button l-ui-button--primary">Search</button>
  </div>
</form>

CSS classes

Search CSS classes
Class	Description
`l-ui-search-inline`	Inline layout for a search input and button side by side
`l-ui-form__field`	Text input styling
`l-ui-button--primary`	Submit button
`l-ui-button--outline`	Clear/reset button
`l-ui-sr-only`	Visually hidden label for accessibility

With the ransack gem (optional)

See the Ransack integration page for a live example and installation instructions.

Use the l_ui_search_form helper to render a styled search form. In simple mode, pass fields: to generate a single search input that searches across multiple columns:

<%= l_ui_search_form(@q, url: users_path, fields: [:name, :email]) %>

This generates a combined name_or_email_cont predicate - a single input that matches any of the listed fields.

Options

Helper options
Option	Default	Description
`fields`	`[]`	Attribute names to search. Combined with OR into a single input. Required in simple mode.
`predicate`	`:cont`	Ransack predicate (`:cont`, `:eq`, `:start`, etc.)
`combinator`	`:or`	How fields are combined (`:or` matches any field, `:and` requires all)
`label`	`"Search"`	Label text for the input
`placeholder`	Auto-generated	Placeholder text. Defaults to "Search by name, email, ..."
`button`	`"Search"`	Submit button text
`clear`	`nil`	Pass `true` for a "Clear" button, or a string for a custom label. Requires `url:` to be set.
`url`	`nil`	Form action URL
`html`	`{}`	Additional HTML attributes for the form tag

Custom usage

Pass a block for full control over the form layout. The partials search_field and search_select apply l-ui styling to individual fields:

<%= l_ui_search_form(@q, url: users_path) do |f| %>
  <%= render "layered_ui/shared/search_field",
              form: f, field: :name_cont, label: "Name" %>

  <%= render "layered_ui/shared/search_select",
              form: f, field: :role_eq, label: "Role",
              options: %w[admin editor viewer] %>

  <div class="l-ui-form__group l-ui-form__group--large-gap">
    <%= f.submit "Search", class: "l-ui-button l-ui-button--primary" %>
  </div>
<% end %>