Input Group

Combina um input/textarea com addons (ícones, texto, botões) no início ou fim.

Instalação

O Shadwire segue o modelo open-code do shadcn/ui: o código-fonte do componente é copiado para a sua aplicação e passa a ser seu. Instale com a CLI:

shadwire add input-group --yes

O item input-group do registry instala estes arquivos:

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

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

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

Exemplos

Padrão

Addon de ícone à esquerda e atalho à direita.

⌘K

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