shadcn-rails

Input Group

Input with prefix and/or suffix addons for icons, text, or other elements.

No JavaScript Required
https://

Installation

Add the component to your project:

rails generate shadcn:component input_group

Usage

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

Examples

With Suffix

@example.com
<%= render Shadcn::InputGroupComponent.new do |group| %>
  <% group.with_input(placeholder: "username") %>
  <% group.with_suffix { "@example.com" } %>
<% end %>

With Both Prefix and Suffix

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

With Icon

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

Currency Input

$

API Reference

API Reference

Prop Type Default Description
class_name String nil Additional CSS classes to apply to the container

Slots

  • with_prefix - Content before the input (text, icon, etc.)
  • with_input - Input component (accepts all Input props)
  • with_suffix - Content after the input (text, icon, etc.)

Accessibility

  • Focus ring applies to the entire group for clear focus indication
  • Prefix/suffix content is purely decorative and should not contain interactive elements
  • For icons, consider using aria-hidden="true" if they're decorative