Input Group

Junta um input ou textarea com complementos (ícones, texto, botões) no começo ou no fim.

Instalação

O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app 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: "Search...") %>
  <%= ui_input_group_addon(align: :inline_end) { ui_kbd { "⌘K" } } %>
<% end %>

Exemplos

Padrão

Um ícone à esquerda e um atalho à direita.

⌘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 %>

Referência da API

Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`InputGroup::Addon`	`align`	`:inline_start`	Onde fica: `:inline_start`/`:inline_end` ao lado do controle, `:block_start`/`:block_end` numa linha inteira acima ou abaixo dele.
`InputGroup::Input`	`type`	`:text`	O `type` do input.
`InputGroup::Button`	`variant`	`:ghost`	A aparência. Um de `:default`, `:outline`, `:secondary`, `:ghost`.
`InputGroup::Button`	`size`	`:xs`	O tamanho; os tamanhos `icon_` são quadrados. Um de `:xs`, `:sm`, `:icon_xs`, `:icon_sm`.
`InputGroup::Button`	`type`	`"button"`	O `type` do botão. É `"button"`, para nunca enviar o formulário sem querer.