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 o seu app 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. O <input> é um elemento vazio, então o helper não aceita bloco: tudo, inclusive o valor, vai em atributos.

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

Ou renderize o componente Ui::InputComponent diretamente:

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

Exemplos

Padrão

Um campo de texto no estilo shadcn. Qualquer atributo HTML que você passar vai 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.

E-mail

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

Desabilitado

Passe disabled: true como atributo HTML.

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

Arquivo

type: :file estiliza o seletor de arquivo nativo.

Picture

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

Com form_with

Use form.field_name/form.field_id para ligar o campo a um formulário 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: "E-mail" }

<%= 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: "E-mail" }
        ) %>
    <%= ui_button(type: :submit, variant: :outline) { "Inscrever" } %>
  </div>
<% end %>

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:`, …).