Components / Checkbox

Checkbox

Stable

boolean preferences

Email product updates Security alerts

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_example.html.erb

<div class="w-full max-w-sm space-y-3 text-left">
  <%= render Senren::CheckboxComponent.new(name: "email_updates", label: "Email product updates", checked: true) %>
  <%= render Senren::CheckboxComponent.new(name: "security_alerts", label: "Security alerts") %>
</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

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

Dependencies are resolved by senren:add: label.

At a glance #

Category Forms

Class name Senren::CheckboxComponent

Stimulus —

Variants default

Depends on label

Pairs with form, label, checkbox_group

Source #

app/components/senren/checkbox_component.html.erb

<label class="inline-flex items-center gap-2 cursor-pointer">
  <%= tag.input(**root_attrs("peer 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))] disabled:cursor-not-allowed disabled:opacity-50", type: "checkbox", 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/checkbox_component.rb

# frozen_string_literal: true

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

    def initialize(name:, value: '1', 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}-#{SecureRandom.hex(2)}"
      @label = label
    end

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

AI agent rules #

Use for

+boolean preferences
+multi-select via checkbox_group

Avoid

-single-choice scenarios - use radio_button

Accessibility #

Always pair with label or aria-label.

Textarea

Checkbox Group