Senren UI
Components / Search Input

Search Input

Stable

search above lists or in headers

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/.../search_input_example.html.erb 
<div class="w-full max-w-sm">
  <%= render Senren::SearchInputComponent.new(
    name: "search",
    placeholder: "Search documentation...",
    label: "Search documentation"
  ) %>
</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 search_input

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 search_input --no-client

Dependencies are resolved by senren:add: input, label.

At a glance #

Category Saas
Class name Senren::SearchInputComponent
Stimulus —
Variants default
Depends on input, label
Pairs with filter_bar, data_table

Source #

app/components/senren/search_input_component.html.erb 
<%= tag.div(**root_attrs("relative")) do %>
  <% if content? %>
    <%= content %>
  <% else %>
    <label class="sr-only" for="<%= name %>"><%= label %></label>
    <span aria-hidden="true" class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[hsl(var(--senren-muted-foreground))]">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
        <circle cx="11" cy="11" r="7"></circle>
        <path d="m20 20-3.5-3.5"></path>
      </svg>
    </span>
    <input id="<%= name %>" name="<%= name %>" type="search" value="<%= value %>" placeholder="<%= placeholder %>" aria-label="<%= label %>" class="h-10 w-full rounded-(--senren-radius) border border-[hsl(var(--senren-input))] bg-[hsl(var(--senren-background))] px-9 text-sm text-[hsl(var(--senren-foreground))] outline-none placeholder:text-[hsl(var(--senren-muted-foreground))] focus:ring-2 focus:ring-[hsl(var(--senren-ring))]">
  <% end %>
<% end %>
app/components/senren/search_input_component.rb 
# frozen_string_literal: true

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

    def initialize(name: 'q', value: nil, placeholder: 'Search...', label: 'Search', class_name: nil, **html)
      super(variant: :default, size: :md, class_name: class_name, **html)
      @name = name
      @value = value
      @placeholder = placeholder
      @label = label
    end

    attr_reader :name, :value, :placeholder, :label
  end
end

AI agent rules #

Use for

  • +search above lists or in headers

Avoid

  • -global navigation - use command

Accessibility #

  • aria-label or visible label; type=search; submit on Enter.