Filter

This kit can be implemented in a variety of ways.
To see examples of how to implement this kit in production visit the /dev_docs/search page in production.

Note
All React examples are wrapped in a {closePopover} method to ensure the popover closes on click of "Apply".

The min_width prop for the popover inside of filter is used in all the examples and is set to 360px. That is the min_width prop we recommend using as it is the same pixel value as our max_width sm global prop.

See this kit in action in our sample UI

Default

name

John Wick

city

San Francisco

Results:

sort by:

No Filter Selected

Results:

sort by:

Code Example

<%=
  pb_rails("filter", props: {
    min_width: "360px",
    id: "1",
    margin_bottom: "xl",
    filters: [
      { name: "name", value: "John Wick" },
      { name: "city", value: "San Francisco"}
    ],
    sort_menu: [
      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
    ],
    template: "default",
    results: 1,
  }) do
%>
  <%
    example_collection = [
      OpenStruct.new(name: "USA", value: 1),
      OpenStruct.new(name: "Canada", value: 2),
      OpenStruct.new(name: "Brazil", value: 3),
      OpenStruct.new(name: "Philippines", value: 4),
      OpenStruct.new(name: "A galaxy far far away...", value: 5)
    ]
  %>
  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
    <%= form.text_field :example_text_field, props: { label: true } %>
    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>

    <%= form.actions do |action| %>
      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
    <% end %>
  <% end %>
<% end %>


<%=
  pb_rails("filter", props: {
    min_width: "360px",
    id: "def2",
    sort_menu: [
      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
    ],
    template: "default",
    results: 0,
  }) do
%>
  <%
    example_collection = [
      OpenStruct.new(name: "USA", value: 1),
      OpenStruct.new(name: "Canada", value: 2),
      OpenStruct.new(name: "Brazil", value: 3),
      OpenStruct.new(name: "Philippines", value: 4),
      OpenStruct.new(name: "A galaxy far far away...", value: 5)
    ]
  %>
  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
    <%= form.text_field :example_text_field, props: { label: true } %>
    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>

    <%= form.actions do |action| %>
      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
    <% end %>
  <% end %>
<% end %>

No Background

name

John Wick

city

Las Vegas

3 Results

name

John Wick

city

Las Vegas

Results:

sort by:

To remove the background from a filter, add the prop background with a value of false.

Code Example

<%=
  pb_rails("filter", props: {
    min_width: "360px",
    id: "3",
    margin_bottom: "xl",
    background: false,
    filters: [
      { name: "name", value: "John Wick" },
      { name: "city", value: "Las Vegas"}
    ],
    sort_menu: [
      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
    ],
    results: 3,
    template: "single"
  }) do
%>
  <%
     example_collection = [
      OpenStruct.new(name: "USA", value: 1),
      OpenStruct.new(name: "Canada", value: 2),
      OpenStruct.new(name: "Brazil", value: 3),
      OpenStruct.new(name: "Philippines", value: 4),
      OpenStruct.new(name: "A galaxy far far away...", value: 5)
    ]
  %>

  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
    <%= form.text_field :example_text_field, props: { label: true } %>
    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>

    <%= form.actions do |action| %>
      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
    <% end %>
  <% end %>
<% end %>

<%=
  pb_rails("filter", props: {
    min_width: "360px",
    id: "4",
    background: false,
    filters: [
      { name: "name", value: "John Wick" },
      { name: "city", value: "Las Vegas"}
    ],
    sort_menu: [
      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
    ],
    results: 3,
  }) do
%>
  <%
    example_collection = [
      OpenStruct.new(name: "USA", value: 1),
      OpenStruct.new(name: "Canada", value: 2),
      OpenStruct.new(name: "Brazil", value: 3),
      OpenStruct.new(name: "Philippines", value: 4),
      OpenStruct.new(name: "A galaxy far far away...", value: 5)
    ]
  %>
  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
    <%= form.text_field :example_text_field, props: { label: true } %>
    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>

    <%= form.actions do |action| %>
      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
    <% end %>
  <% end %>
<% end %>

Single

name

John Wick

546 Results

Code Example

<%=
  pb_rails("filter", props: {
    min_width: "360px",
    id: "2",
    filters: [
      { name: "name", value: "John Wick" }
    ],
    sort_menu: [
      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
    ],
    results: 546,
    template: "single"
  }) do
%>
  <%
   example_collection = [
      OpenStruct.new(name: "USA", value: 1),
      OpenStruct.new(name: "Canada", value: 2),
      OpenStruct.new(name: "Brazil", value: 3),
      OpenStruct.new(name: "Philippines", value: 4),
      OpenStruct.new(name: "A galaxy far far away...", value: 5)
    ]
  %>

  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
    <%= form.text_field :example_text_field, props: { label: true } %>
    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>

    <%= form.actions do |action| %>
      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
    <% end %>
  <% end %>
<% end %>

No Sort

name

John Wick

546 Results

To display results, use templates single or default.

Code Example

<%=
  pb_rails("filter", props: {
    min_width: "360px",
    id: "nosort",
    filters: [
      { name: "name", value: "John Wick" }
    ],
    results: 546,
    template: "filter_only",
  }) do
%>
  <%
   example_collection = [
      OpenStruct.new(name: "USA", value: 1),
      OpenStruct.new(name: "Canada", value: 2),
      OpenStruct.new(name: "Brazil", value: 3),
      OpenStruct.new(name: "Philippines", value: 4),
      OpenStruct.new(name: "A galaxy far far away...", value: 5)
    ]
  %>

  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
    <%= form.text_field :example_text_field, props: { label: true } %>
    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>

    <%= form.actions do |action| %>
      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
    <% end %>
  <% end %>
<% end %>

Filter Only

name

John Wick

Code Example

<%=
  pb_rails("filter", props: {
    min_width: "360px",
    id: "fo",
    filters: [
      { name: "name", value: "John Wick" }
    ],
    template:"filter_only",
  }) do
%>
  <%
   example_collection = [
      OpenStruct.new(name: "USA", value: 1),
      OpenStruct.new(name: "Canada", value: 2),
      OpenStruct.new(name: "Brazil", value: 3),
      OpenStruct.new(name: "Philippines", value: 4),
      OpenStruct.new(name: "A galaxy far far away...", value: 5)
    ]
  %>
  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
    <%= form.text_field :example_text_field, props: { label: true } %>
    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>

    <%= form.actions do |action| %>
      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
    <% end %>
  <% end %>
<% end %>

Sort Only

Code Example

<%=
  pb_rails("filter", props: {
    id: "so",
    sort_menu: [
      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
    ],
    template:"sort_only",
  })
%>

Max Width for Popover Inside of Filter

name

John Wick

city

San Francisco

Results:

sort by:

Filter can leverage the max-width property. Learn more in our visual guidelines.

Code Example

<%=
  pb_rails("filter", props: {
    min_width: "360px",
    id: "25",
    position: "top",
    filters: [
      { name: "name", value: "John Wick" },
      { name: "city", value: "San Francisco"}
    ],
    sort_menu: [
      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
    ],
    template: "default",
    results: 1,
  }) do
%>
  <%
   example_collection = [
      OpenStruct.new(name: "USA", value: 1),
      OpenStruct.new(name: "Canada", value: 2),
      OpenStruct.new(name: "Brazil", value: 3),
      OpenStruct.new(name: "Philippines", value: 4),
      OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
    ]
  %>
  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
    <%= form.text_field :example_text_field, props: { label: true } %>
    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>

    <%= form.actions do |action| %>
      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
    <% end %>
  <% end %>
<% end %>

Filter Placement

name

John Wick

Click the filter button above to toggle the popover.

Code Example

<%=
  pb_rails("filter", props: {
    min_width: "360px",
    id: "pla",
    filters: [
      { name: "name", value: "John Wick" }
    ],
    placement: "right",
    template:"filter_only",
  }) do
%>
  <%
   example_collection = [
      OpenStruct.new(name: "USA", value: 1),
      OpenStruct.new(name: "Canada", value: 2),
      OpenStruct.new(name: "Brazil", value: 3),
      OpenStruct.new(name: "Philippines", value: 4),
      OpenStruct.new(name: "A galaxy far far away...", value: 5)
    ]
  %>
  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
    <%= form.text_field :example_text_field, props: { label: true } %>
    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>

    <%= form.actions do |action| %>
      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
    <% end %>
  <% end %>
<% end %>

UI Samples using Filter Kit

Get the full picture. See how this kit is used in our samples.

Crm Client List

Available Props

classname
dark
margin
margin_bottom
margin_left
margin_right
margin_top
margin_x
margin_y
max_width
padding
padding_bottom
padding_left
padding_right
padding_top
padding_x
padding_y
z_index
number_spacing
shadow
line_height
display
cursor
flex_direction
flex_wrap
justify_content
justify_self
align_items
align_content
align_self
flex
flex_grow
flex_shrink
order
id
data
aria
children
filters
sort_menu
results
template
background
min_width
placement