Class: Shadcn::InputGroupComponent

Inherits:
BaseComponent
  • Object
show all
Defined in:
app/components/shadcn/input_group_component.rb

Overview

Input Group component for inputs with prefix/suffix addons Matches shadcn/ui Input Group pattern

Examples:

With prefix icon

<%= render Shadcn::InputGroupComponent.new do |group| %>
  <% group.with_prefix do %>
    <svg><!-- search icon --></svg>
  <% end %>
  <% group.with_input(placeholder: "Search...") %>
<% end %>

With suffix icon

<%= render Shadcn::InputGroupComponent.new do |group| %>
  <% group.with_input(type: :email, placeholder: "Email") %>
  <% group.with_suffix do %>
    <svg><!-- mail icon --></svg>
  <% end %>
<% end %>

With prefix text

<%= render Shadcn::InputGroupComponent.new do |group| %>
  <% group.with_prefix { "https://" } %>
  <% group.with_input(placeholder: "example.com") %>
<% end %>

With both prefix and suffix

<%= render Shadcn::InputGroupComponent.new do |group| %>
  <% group.with_prefix { "$" } %>
  <% group.with_input(type: :number, placeholder: "0.00") %>
  <% group.with_suffix { "USD" } %>
<% end %>

Defined Under Namespace

Classes: AddonComponent

Constant Summary collapse

BASE_CLASSES = 
"flex items-center rounded-md border border-input ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2"

Instance Attribute Summary

Attributes inherited from BaseComponent

#class_name, #data, #html_options

Instance Method Summary collapse

Methods inherited from BaseComponent

#content, #initialize

Methods included from Rails::Helpers::ClassNameHelper

#cn

Constructor Details

This class inherits a constructor from Shadcn::BaseComponent

Instance Method Details

#call ⇒ Object 



55
56
57
58
59
 
# File 'app/components/shadcn/input_group_component.rb', line 55

def call
  tag.div(class: merge_classes(BASE_CLASSES), **html_options.merge(build_data)) do
    safe_join([prefix, input, suffix].compact)
  end
end