Senren UI
Components / Radio Button

Radio Button

Stable

single-choice option groups

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/.../radio_button_example.html.erb 
<div class="w-full max-w-sm space-y-3 text-left">
  <%= render Senren::RadioButtonComponent.new(name: "plan", value: "starter", label: "Starter") %>
  <%= render Senren::RadioButtonComponent.new(name: "plan", value: "pro", label: "Pro", checked: true) %>
  <%= render Senren::RadioButtonComponent.new(name: "plan", value: "enterprise", label: "Enterprise") %>
</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 radio_button

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

Dependencies are resolved by senren:add: label.

At a glance #

Category Forms
Class name Senren::RadioButtonComponent
Stimulus —
Variants default
Depends on label
Pairs with form, label

Source #

app/components/senren/radio_button_component.html.erb 
<label class="inline-flex items-center gap-2 cursor-pointer">
  <%= tag.input(**root_attrs("h-4 w-4 border border-[hsl(var(--senren-input))] text-[hsl(var(--senren-primary))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))]", type: "radio", id: id, name: name, value: value, checked: checked)) %>
  <% if label %>
    <span class="text-sm font-medium text-[hsl(var(--senren-foreground))]"><%= label %></span>
  <% else %>
    <%= content %>
  <% end %>
</label>
app/components/senren/radio_button_component.rb 
# frozen_string_literal: true

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

    def initialize(name:, value:, checked: false, id: nil, label: nil, class_name: nil, **html)
      super(variant: :default, size: :md, class_name: class_name, **html)
      @name = name
      @value = value
      @checked = checked
      @id = id || "#{name.to_s.parameterize}-#{value.to_s.parameterize}"
      @label = label
    end

    attr_reader :name, :value, :checked, :id, :label
  end
end

AI agent rules #

Use for

  • +single-choice option groups

Avoid

  • -multi-select - use checkbox_group

Accessibility #

  • Group via fieldset/legend; share name attribute.