shadcn-rails

Input Group

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

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

Installation

Add the component to your project:

rails generate shadcn:add 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
<div class="max-w-sm">
  <%= render Shadcn::InputGroupComponent.new do |group| %>
    <% group.with_input(placeholder: "username") %>
    <% group.with_suffix { "@example.com" } %>
  <% end %>
</div>

With Both Prefix and Suffix

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

With Icon

<div class="max-w-sm">
  <%= render Shadcn::InputGroupComponent.new do |group| %>
    <% group.with_prefix do %>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8"></circle>
        <path d="m21 21-4.3-4.3"></path>
      </svg>
    <% end %>
    <% group.with_input(type: :search, placeholder: "Search...") %>
  <% end %>
</div>

Currency Input

$ 
<div class="max-w-sm">
  <%= render Shadcn::InputGroupComponent.new do |group| %>
    <% group.with_prefix { "$" } %>
    <% group.with_input(type: :number, placeholder: "99.99", step: "0.01") %>
  <% end %>
</div>

With Prefix

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

Search Input

Search
input-group/search 
<%= render(Shadcn::InputGroupComponent.new) do |group| %>
  <% group.with_prefix { "Search" } %>
  <% group.with_input(type: :search, placeholder: "Search components...") %>
<% end %>

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