Components / Textarea

Textarea

Stable

multi-line text

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/.../textarea_example.html.erb

<div class="w-full max-w-sm text-left">
  <%= render Senren::TextareaComponent.new(name: "demo_textarea", rows: 4, placeholder: "Tell us a little about yourself...") %>
</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 textarea

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

Dependencies are resolved by senren:add: label.

At a glance #

Category Forms

Class name Senren::TextareaComponent

Stimulus —

Variants default, error

Depends on label

Pairs with form, label, alert

Source #

app/components/senren/textarea_component.html.erb

<%= tag.textarea(value, **root_attrs("flex w-full rounded-(--senren-radius) border bg-[hsl(var(--senren-background))] text-[hsl(var(--senren-foreground))] placeholder:text-[hsl(var(--senren-muted-foreground))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50", id: id, name: name, placeholder: placeholder, rows: rows, "aria-invalid": variant == :error)) %>

app/components/senren/textarea_component.rb

# frozen_string_literal: true

module Senren
  class TextareaComponent < BaseComponent
    VARIANTS = {
      default: 'border-[hsl(var(--senren-input))] focus-visible:ring-[hsl(var(--senren-ring))]',
      error: 'border-[hsl(var(--senren-destructive))] focus-visible:ring-[hsl(var(--senren-destructive))]'
    }.freeze

    SIZES = { md: 'min-h-[80px] text-sm px-3 py-2' }.freeze

    def initialize(name:, value: nil, placeholder: nil, id: nil, rows: 4, variant: :default, class_name: nil, **html)
      super(variant: variant, size: :md, class_name: class_name, **html)
      @name = name
      @value = value
      @placeholder = placeholder
      @id = id || name.to_s.parameterize
      @rows = rows
    end

    attr_reader :name, :value, :placeholder, :id, :rows
  end
end

AI agent rules #

Use for

+multi-line text

Avoid

-rich-text editing - use rich_text_editor_lite

Accessibility #

Pair with label; provide visible character counter for limits.

Input

Checkbox