Input Group

Combines an input or textarea with addons (icons, text, buttons) at either end.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add input-group --yes

The input-group registry item installs these files:

app/components/ui_component.rb
app/components/ui/input_group_component.rb
app/components/ui/input_group/addon_component.rb
app/components/ui/input_group/text_component.rb
app/components/ui/input_group/input_component.rb
app/components/ui/input_group/textarea_component.rb
app/components/ui/input_group/button_component.rb
app/helpers/ui/input_group_helper.rb
vendor/shadwire/shadwire.css

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

<%= ui_input_group do %>
  <%= ui_input_group_addon { ui_icon("search") } %>
  <%= ui_input_group_input(placeholder: "Search...") %>
  <%= ui_input_group_addon(align: :inline_end) { ui_kbd { "⌘K" } } %>
<% end %>

Examples

Default

An icon addon on the left and a shortcut on the right.

⌘K

<%= ui_input_group(class: "w-80") do %>
  <%= ui_input_group_addon { ui_icon("search") } %>
  <%= ui_input_group_input(type: :search, placeholder: "Search...") %>
  <%= ui_input_group_addon(align: :inline_end) do %>
    <%= ui_kbd { "⌘K" } %>
  <% end %>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`InputGroup::Addon`	`align`	`:inline_start`	Where it sits: `:inline_start`/`:inline_end` beside the control, `:block_start`/`:block_end` on a full row above or below it.
`InputGroup::Input`	`type`	`:text`	The input's `type`.
`InputGroup::Button`	`variant`	`:ghost`	The look. One of `:default`, `:outline`, `:secondary`, `:ghost`.
`InputGroup::Button`	`size`	`:xs`	The size; the `icon_` sizes are square. One of `:xs`, `:sm`, `:icon_xs`, `:icon_sm`.
`InputGroup::Button`	`type`	`"button"`	The button's `type`. It is `"button"`, so it never submits the form by accident.