Class: BetterUi::Forms::TextareaComponent

Inherits:
BaseComponent show all
Defined in:
app/components/better_ui/forms/textarea_component.rb

Overview

A textarea component with support for labels, hints, errors, and prefix/suffix icons.

This component extends BaseComponent to provide a standard textarea field with optional decorative or functional icons positioned before (prefix) or after (suffix) the textarea. Perfect for multi-line text inputs like comments, descriptions, and messages.

Examples:

Basic textarea

<%= render BetterUi::Forms::TextareaComponent.new(
  name: "post[content]",
  label: "Post Content",
  placeholder: "Write your post here..."
) %>

Textarea with custom rows

<%= render BetterUi::Forms::TextareaComponent.new(
  name: "comment[body]",
  label: "Comment",
  rows: 6,
  placeholder: "Enter your comment..."
) %>

Textarea with prefix icon

<%= render BetterUi::Forms::TextareaComponent.new(
  name: "description",
  label: "Description",
  placeholder: "Enter description..."
) do |component| %>
  <% component.with_prefix_icon do %>
    <svg class="h-5 w-5 text-gray-400">...</svg>
  <% end %>
<% end %>

Textarea with character limit

<%= render BetterUi::Forms::TextareaComponent.new(
  name: "bio",
  label: "Bio",
  maxlength: 500,
  hint: "Maximum 500 characters"
) %>

Textarea with disabled resize

<%= render BetterUi::Forms::TextareaComponent.new(
  name: "notes",
  label: "Notes",
  resize: :none
) %>

With validation errors

<%= render BetterUi::Forms::TextareaComponent.new(
  name: "post[content]",
  value: "",
  label: "Content",
  errors: ["Content can't be blank", "Content is too short"]
) %>

Using with Rails form builder

<%= form_with model: @post, builder: BetterUi::UiFormBuilder do |f| %>
  <%= f.ui_textarea :content do |component| %>
    <% component.with_prefix_icon do %>
      <svg>...</svg>
    <% end %>
  <% end %>
<% end %>

See Also:

Constant Summary

Constants inherited from BaseComponent

BaseComponent::SIZES

Constants inherited from ApplicationComponent

ApplicationComponent::SHADOWS, ApplicationComponent::VARIANTS, ApplicationComponent::VARIANT_BODY_DIVIDE, ApplicationComponent::VARIANT_DIVIDE, ApplicationComponent::VARIANT_HEADER_BG, ApplicationComponent::VARIANT_HEADER_TEXT, ApplicationComponent::VARIANT_HIGHLIGHTED, ApplicationComponent::VARIANT_HOVERABLE, ApplicationComponent::VARIANT_RING, ApplicationComponent::VARIANT_SORT_ICON, ApplicationComponent::VARIANT_STRIPED

Instance Method Summary collapse

Methods inherited from BaseComponent

#call

Constructor Details

#initialize(name:, value: nil, label: nil, hint: nil, placeholder: nil, size: :md, disabled: false, readonly: false, required: false, errors: nil, rows: 4, cols: nil, maxlength: nil, resize: :vertical, container_classes: nil, label_classes: nil, input_classes: nil, hint_classes: nil, error_classes: nil, **options) ⇒ TextareaComponent

Initializes a new textarea component.

All standard parameters are passed to BaseComponent#initialize. See the parent class for detailed parameter descriptions.

Parameters:

  • name (String) —

    the field name for form submission (required)

  • value (String, nil) (defaults to: nil) —

    the current value of the textarea

  • label (String, nil) (defaults to: nil) —

    the label text displayed above the textarea

  • hint (String, nil) (defaults to: nil) —

    helper text displayed below the textarea

  • placeholder (String, nil) (defaults to: nil) —

    placeholder text shown when textarea is empty

  • size (Symbol) (defaults to: :md) —

    the size variant (:xs, :sm, :md, :lg, :xl), defaults to :md

  • disabled (Boolean) (defaults to: false) —

    whether the textarea is disabled, defaults to false

  • readonly (Boolean) (defaults to: false) —

    whether the textarea is read-only, defaults to false

  • required (Boolean) (defaults to: false) —

    whether the field is required (shows asterisk), defaults to false

  • errors (Array<String>, String, nil) (defaults to: nil) —

    validation error messages to display

  • rows (Integer) (defaults to: 4) —

    number of visible text lines, defaults to 4

  • cols (Integer, nil) (defaults to: nil) —

    width in characters (optional, usually controlled by CSS)

  • maxlength (Integer, nil) (defaults to: nil) —

    maximum number of characters allowed

  • resize (Symbol) (defaults to: :vertical) —

    CSS resize behavior (:none, :vertical, :horizontal, :both), defaults to :vertical

  • container_classes (String, nil) (defaults to: nil) —

    additional CSS classes for the outer wrapper

  • label_classes (String, nil) (defaults to: nil) —

    additional CSS classes for the label element

  • input_classes (String, nil) (defaults to: nil) —

    additional CSS classes for the textarea element

  • hint_classes (String, nil) (defaults to: nil) —

    additional CSS classes for the hint text

  • error_classes (String, nil) (defaults to: nil) —

    additional CSS classes for error messages

  • options (Hash) —

    additional HTML attributes passed to the textarea element

Raises:

  • (ArgumentError) —

    if size is not one of the allowed values

See Also:



113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
 
# File 'app/components/better_ui/forms/textarea_component.rb', line 113

def initialize(
  name:,
  value: nil,
  label: nil,
  hint: nil,
  placeholder: nil,
  size: :md,
  disabled: false,
  readonly: false,
  required: false,
  errors: nil,
  rows: 4,
  cols: nil,
  maxlength: nil,
  resize: :vertical,
  container_classes: nil,
  label_classes: nil,
  input_classes: nil,
  hint_classes: nil,
  error_classes: nil,
  **options
)
  super(
    name: name,
    value: value,
    label: label,
    hint: hint,
    placeholder: placeholder,
    size: size,
    disabled: disabled,
    readonly: readonly,
    required: required,
    errors: errors,
    container_classes: container_classes,
    label_classes: label_classes,
    input_classes: input_classes,
    hint_classes: hint_classes,
    error_classes: error_classes,
    **options
  )

  @rows = rows
  @cols = cols
  @maxlength = maxlength
  @resize = resize
end

Instance Method Details

#with_prefix_icon ⇒ Object

Slot for rendering an icon or content before (left of) the textarea. The icon is positioned absolutely at the top left and textarea padding is adjusted automatically.

Yield Returns:

  • (String) —

    the HTML content for the prefix icon



76
 
# File 'app/components/better_ui/forms/textarea_component.rb', line 76

renders_one :prefix_icon

#with_suffix_icon ⇒ Object

Slot for rendering an icon or content after (right of) the textarea. The icon is positioned absolutely at the top right and textarea padding is adjusted automatically.

Yield Returns:

  • (String) —

    the HTML content for the suffix icon



82
 
# File 'app/components/better_ui/forms/textarea_component.rb', line 82

renders_one :suffix_icon