Senren UI
Components / Filter Bar

Filter Bar

Stable

list filters above tables

Usage example #

Copy this ERB into a Rails view after installing the component. The snippet below is the same code used by the live preview above.

app/views/.../filter_bar_example.html.erb 
<div class="w-full max-w-2xl">
  <%= render Senren::FilterBarComponent.new(label: "Project filters") do %>
    <%= render Senren::SearchInputComponent.new(name: "query", placeholder: "Search projects...") %>
    <%= render Senren::NativeSelectComponent.new(name: "status", options: [["all", "All"], ["active", "Active"], ["archived", "Archived"]], selected: "active") %>
    <%= render Senren::NativeSelectComponent.new(name: "owner", options: [["all", "All owners"], ["mai", "Mai"], ["an", "An"]]) %>
    <%= render(Senren::ButtonComponent.new(variant: :secondary)) { "Apply" } %>
  <% end %>
</div>

Install this component #

Copy the official component into your app

Use this when you want the Senren-maintained implementation copied into app/components/senren.

Terminal 
bin/rails senren:add filter_bar

Create a custom component with the same conventions

Use this when you need an app-specific static component that follows Senren's ViewComponent structure.

Terminal 
bin/rails generate senren:component filter_bar --no-client

Dependencies are resolved by senren:add: button, dropdown_menu.

At a glance #

Category Saas
Class name Senren::FilterBarComponent
Stimulus —
Variants default
Depends on button, dropdown_menu
Pairs with data_table, search_input

Source #

app/components/senren/filter_bar_component.html.erb 
<%= tag.div(**root_attrs("rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))] p-3 shadow-sm", role: "search", "aria-label": label)) do %>
  <div class="flex flex-wrap items-center gap-2">
    <%= content %>
  </div>
<% end %>
app/components/senren/filter_bar_component.rb 
# frozen_string_literal: true

module Senren
  class FilterBarComponent < BaseComponent
    VARIANTS = { default: '' }.freeze
    SIZES = { md: '' }.freeze

    def initialize(label: 'Filters', class_name: nil, **html)
      super(variant: :default, size: :md, class_name: class_name, **html)
      @label = label
    end

    attr_reader :label
  end
end

AI agent rules #

Use for

  • +list filters above tables

Avoid

  • -primary navigation

Accessibility #

  • Filter controls are real form controls with labels.