Class: BetterUi::Forms::TextInputComponent

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

Overview

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

This component extends BaseComponent to provide a standard text input field with optional decorative or functional icons positioned before (prefix) or after (suffix) the input text. Perfect for search fields, email inputs, URL fields, and more.

Examples:

Basic text input

<%= render BetterUi::Forms::TextInputComponent.new(
  name: "user[email]",
  label: "Email Address",
  placeholder: "[email protected]"
) %>

Text input with prefix icon (search)

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

Text input with suffix icon (verified checkmark)

<%= render BetterUi::Forms::TextInputComponent.new(
  name: "user[email]",
  value: "[email protected]",
  label: "Verified Email"
) do |component| %>
  <% component.with_suffix_icon do %>
    <svg class="h-5 w-5 text-success-600">...</svg>
  <% end %>
<% end %>

Text input with both icons

<%= render BetterUi::Forms::TextInputComponent.new(
  name: "website",
  label: "Website URL",
  placeholder: "example.com"
) do |component| %>
  <% component.with_prefix_icon do %>
    <span class="text-gray-500">https://</span>
  <% end %>
  <% component.with_suffix_icon do %>
    <svg class="h-5 w-5 text-gray-400">...</svg>
  <% end %>
<% end %>

With validation errors

<%= render BetterUi::Forms::TextInputComponent.new(
  name: "user[email]",
  value: "invalid",
  label: "Email",
  errors: ["Email is invalid", "Email can't be blank"]
) %>

Using with Rails form builder

<%= form_with model: @user, builder: BetterUi::UiFormBuilder do |f| %>
  <%= f.ui_text_input :email do |component| %>
    <% component.with_prefix_icon do %>
      <svg>...</svg>
    <% end %>
  <% end %>
<% end %>

See Also:

Direct Known Subclasses

PasswordInputComponent

Constant Summary collapse

TYPES =

Available input types for text-based inputs. Password has its own component (PasswordInputComponent) with a Stimulus controller. Number has its own component (NumberInputComponent).

Returns:

  • (Array<Symbol>) —

    the list of valid type options

i[text email tel date time].freeze

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:, type: :text, value: nil, label: nil, hint: nil, placeholder: nil, size: :md, disabled: false, readonly: false, required: false, errors: nil, container_classes: nil, label_classes: nil, input_classes: nil, hint_classes: nil, error_classes: nil, **options) ⇒ TextInputComponent

Initializes a new text input component.

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

Parameters:

  • name (String) —

    the name attribute for the input field (required for form submission)

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

    the current value of the input field

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

    the label text to display above the input

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

    helpful hint text displayed below the input

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

    placeholder text shown when input 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 input should be disabled (non-interactive), defaults to false

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

    whether the input should be readonly (viewable but not editable), defaults to false

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

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

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

    validation error messages to display below the input

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

    additional CSS classes for the outer wrapper

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

    additional CSS classes for the label element

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

    additional CSS classes for the input element

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

    additional CSS classes for the hint text

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

    additional CSS classes for error messages

  • options (Hash) —

    additional HTML attributes to pass through to the input element

Raises:

  • (ArgumentError) —

    if size is not one of the valid SIZES

See Also:



103
104
105
106
107
108
109
110
111
112
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
 
# File 'app/components/better_ui/forms/text_input_component.rb', line 103

def initialize(
  name:,
  type: :text,
  value: nil,
  label: nil,
  hint: nil,
  placeholder: nil,
  size: :md,
  disabled: false,
  readonly: false,
  required: false,
  errors: nil,
  container_classes: nil,
  label_classes: nil,
  input_classes: nil,
  hint_classes: nil,
  error_classes: nil,
  **options
)
  @type = validate_type(type)
  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
  )
end

Instance Method Details

#with_prefix_icon ⇒ Object

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

Yield Returns:

  • (String) —

    the HTML content for the prefix icon



85
 
# File 'app/components/better_ui/forms/text_input_component.rb', line 85

renders_one :prefix_icon

#with_suffix_icon ⇒ Object

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

Yield Returns:

  • (String) —

    the HTML content for the suffix icon



91
 
# File 'app/components/better_ui/forms/text_input_component.rb', line 91

renders_one :suffix_icon