Senren UI
Components / Label

Label

Stable

labeling form controls

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/.../label_example.html.erb 
<div class="w-full max-w-sm space-y-3 text-left">
  <%= render(Senren::LabelComponent.new(for_field: "demo_label_a")) { "Email address" } %>
  <%= render(Senren::LabelComponent.new(for_field: "demo_label_b", variant: :required)) { "Password" } %>
  <%= render(Senren::LabelComponent.new(for_field: "demo_label_c")) { "Display name" } %>
</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 label

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

At a glance #

Category Forms
Class name Senren::LabelComponent
Stimulus —
Variants default, required
Depends on —
Pairs with input, textarea, checkbox, switch, native_select

Source #

app/components/senren/label_component.html.erb 
<%= tag.label(**root_attrs("text-sm font-medium leading-none text-[hsl(var(--senren-foreground))] peer-disabled:cursor-not-allowed peer-disabled:opacity-70", for: for_field)) do %>
  <%= content %>
  <% if variant == :required %><span class="text-[hsl(var(--senren-destructive))]" aria-hidden="true"> *</span><% end %>
<% end %>
app/components/senren/label_component.rb 
# frozen_string_literal: true

module Senren
  class LabelComponent < BaseComponent
    VARIANTS = {
      default: '',
      required: ''
    }.freeze

    SIZES = { md: '' }.freeze

    def initialize(for_field:, variant: :default, class_name: nil, **html)
      super(variant: variant, size: :md, class_name: class_name, **html)
      @for_field = for_field
    end

    attr_reader :for_field
  end
end

AI agent rules #

Use for

  • +labeling form controls

Avoid

  • -using placeholder as the only label

Accessibility #

  • Always associate via for=field-id.