Senren UI
Components / Select

Select

Stable Stimulus: senren--select

styled selects with custom option rendering

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/.../select_example.html.erb 
<div class="w-full max-w-sm text-left">
  <%= render Senren::SelectComponent.new(name: "timezone", id: "timezone", options: [["utc", "UTC"], ["sgn", "Asia/Saigon"], ["sfo", "America/Los_Angeles"]], prompt: "Choose timezone") %>
</div>

Install this component #

Copy the official component into your app

This component requires Stimulus. Keep --client so the controller is copied with the ViewComponent.

Terminal 
bin/rails senren:add select --client

Create a custom component with the same conventions

Use this when you need an app-specific component that follows Senren's ViewComponent and Stimulus structure. --client is required for this behavior.

Terminal 
bin/rails generate senren:component select --client

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

At a glance #

Category Forms
Class name Senren::SelectComponent
Stimulus senren--select
Variants default, error
Depends on label, button
Pairs with form, label

Source #

app/components/senren/select_component.html.erb 
<%= render(Senren::NativeSelectComponent.new(**native_select_args)) { content } %>
app/components/senren/select_component.rb 
# frozen_string_literal: true

module Senren
  # Stimulus-driven styled select. v0.1 ships as a thin wrapper around the
  # native_select with a Stimulus controller hook for future styling work.
  class SelectComponent < BaseComponent
    VARIANTS = NativeSelectComponent::VARIANTS
    SIZES    = NativeSelectComponent::SIZES

    def initialize(**args)
      @args = args
    end

    def native_select_args
      data = (@args[:data] || {}).merge(controller: 'senren--select')
      @args.merge(data: data)
    end
  end
end

AI agent rules #

Use for

  • +styled selects with custom option rendering

Avoid

  • -very long lists - use combobox

Accessibility #

  • aria-haspopup=listbox; arrow keys for navigation; type-ahead.