Shadwire
Componentes

Input

Exibe um campo de formulário ou um componente que se parece com um campo de texto.

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 --yes

O item input do registry instala estes arquivos:

  • app/components/ui_component.rb
  • app/components/ui/input_component.rb
  • app/helpers/ui/input_helper.rb
  • vendor/shadwire/shadwire.css

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

Uso

Use o helper ui_input em qualquer view. Como <input> é um elemento vazio, o helper não aceita bloco — todo o estado vai em atributos. 

<%= ui_input(type: :email, placeholder: "voce@exemplo.com") %>

Ou renderize o componente Ui::InputComponent diretamente: 

<%= render Ui::InputComponent.new(type: :email, name: "user[email]") %>

Exemplos

Padrão

Um campo de texto com o visual shadcn. Atributos HTML livres passam direto para o <input>.

<%= ui_input(type: :email, placeholder: "Email", class: "max-w-sm") %>

Com label

Combine com ui_label usando for:/id: para associar o rótulo ao campo.

<div class="grid w-full max-w-sm gap-2">
  <%= ui_label(for: "input-with-label-email") { "Email" } %>
  <%= ui_input(type: :email, id: "input-with-label-email", placeholder: "voce@exemplo.com") %>
</div>

Desabilitado

Passe disabled: true como atributo HTML.

<%= ui_input(placeholder: "Desabilitado", disabled: true, class: "max-w-sm") %>

Arquivo

type: :file estiliza o seletor de arquivo nativo.

<div class="grid w-full max-w-sm gap-2">
  <%= ui_label(for: "input-file-picture") { "Foto" } %>
  <%= ui_input(type: :file, id: "input-file-picture") %>
</div>

Com form_with

Use form.field_name/form.field_id para integrar com formulários Rails.

<%= form_with url: "#", scope: :newsletter do |form| %>
  <div class="flex w-full max-w-sm items-center gap-2">
    <%= ui_input(
          type: :email,
          name: form.field_name(:email),
          id: form.field_id(:email),
          placeholder: "voce@exemplo.com",
          aria: { label: "Email" }

Referência da API

ui_input(**options) encapsula Ui::InputComponent.new(**options).

Argumento Tipo Padrão Descrição
type Symbol/String :text Qualquer tipo nativo de input (:email, :password, :file, :number, …).
class / class_name String nil Classes extras, mescladas após as classes base.
**attrs Hash {} Atributos HTML livres (name, id, placeholder, disabled, required, data:, aria:, …).