Senren UI
Components / Checkbox Group

Checkbox Group

Stable

multi-select boolean groups

Notification channels

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/.../checkbox_group_example.html.erb 
<div class="w-full max-w-sm text-left">
  <%= render Senren::CheckboxGroupComponent.new do |group| %>
    <% group.with_legend { "Notification channels" } %>
    <% group.with_option(name: "channels[]", value: "email", label: "Email", checked: true) %>
    <% group.with_option(name: "channels[]", value: "slack", label: "Slack") %>
    <% group.with_option(name: "channels[]", value: "sms", label: "SMS alerts") %>
  <% 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 checkbox_group

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

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

At a glance #

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

Source #

app/components/senren/checkbox_group_component.html.erb 
<%= tag.fieldset(**root_attrs("space-y-2")) do %>
  <% if legend? %>
    <legend class="text-sm font-medium text-[hsl(var(--senren-foreground))]"><%= legend %></legend>
  <% end %>
  <div class="flex flex-col gap-2">
    <% options.each do |opt| %>
      <%= opt %>
    <% end %>
  </div>
<% end %>
app/components/senren/checkbox_group_component.rb 
module Senren
  class CheckboxGroupComponent < BaseComponent
    renders_one  :legend
    renders_many :options, 'OptionTag'

    VARIANTS = { default: '' }.freeze
    SIZES    = { md: '' }.freeze

    class OptionTag < ViewComponent::Base
      def initialize(name:, value:, label:, checked: false)
        @name = name
        @value = value
        @label = label
        @checked = checked
      end

      def call
        content_tag(:label, class: 'inline-flex items-center gap-2 cursor-pointer') do
          tag.input(type: 'checkbox', name: name, value: @value, checked: @checked,
                    class: 'h-4 w-4 rounded 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))]') +
            content_tag(:span, @label, class: 'text-sm text-[hsl(var(--senren-foreground))]')
        end
      end

      private

      attr_reader :name
    end
  end
end

AI agent rules #

Use for

  • +multi-select boolean groups

Avoid

  • -single-choice groups

Accessibility #

  • Wrap in fieldset/legend.