Filter Edit

<% items = [{:value => "Ruby on Rails", name: "Ruby on Rails"}, {:value => "Next.js", name: "Next.js"}, {:value => "Remix.run", name: "Remix.run"}] %>

<%= render_filter items %>

Installation

  rails generate shadcn-ui filter

Usage

<%= render_filter items do %>
  <%# Optional  %>
  <%= filter_icon do %>
  <% end %>
<% end >

The Filter component introduces:

• app/helpers/components/filter_helper.rb
• app/views/components/ui/_filter.html.erb
• app/javascript/controllers/ui/filter_controller.js

The method render_filter method accepts one mandatory argument, an array of hashes that each have a value and name name.

You can also use the pattern argument to provide a regular expression as a string. It requires the placeholder {input} to dynamically insert a term into the regex. By default, it is set to ^{input}, meaning the input term will match only at the beginning of a string. Ensure {input} is included in custom patterns to maintain proper functionality.

You can optionally also call filter_icon within a block passed to render_filter to render an icon to the left of the filter input.

This component gets used in the Combobox and Command components as well as potentially others.

<% items = [{:value => "Ruby on Rails", name: "Ruby on Rails"}, {:value => "Next.js", name: "Next.js"}, {:value => "Remix.run", name: "Remix.run"}] %>

<%= render_filter items, class: "p-1" do %>
  <%= filter_icon do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4 shrink-0 opacity-50 ml-2"><circle cx="11" cy="11" r="8"></circle><line x1="21" x2="16.65" y1="21" y2="16.65"></line></svg>
  <% end %>
<% end %>