Field

Compõe label, controle, descrição e erro de um campo de formulário.

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

O item field do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/field_component.rb
app/components/ui/field/set_component.rb
app/components/ui/field/legend_component.rb
app/components/ui/field/group_component.rb
app/components/ui/field/content_component.rb
app/components/ui/field/label_component.rb
app/components/ui/field/title_component.rb
app/components/ui/field/description_component.rb
app/components/ui/field/separator_component.rb
app/components/ui/field/error_component.rb
app/components/ui/separator_component.rb
app/helpers/ui/field_helper.rb
app/helpers/ui/separator_helper.rb
vendor/shadwire/shadwire.css

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

Uso

<%= ui_field do %>
  <%= ui_field_label(for: "email") { "Email" } %>
  <%= ui_input(type: :email, id: "email") %>
  <%= ui_field_description { "Nunca compartilhamos seu email." } %>
<% end %>

Exemplos

Padrão

Um campo vertical com label, input e descrição.

<%= ui_field_group(class: "w-80") do %>
  <%= ui_field do %>
    <%= ui_field_label(for: "fld-email") { "Email" } %>
    <%= ui_input(type: :email, id: "fld-email", placeholder: "voce@exemplo.com") %>
    <%= ui_field_description { "Nunca compartilhamos seu email." } %>
  <% end %>
<% end %>