Field

Reúne o rótulo, o controle, a descrição e o 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 o seu app 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 { "We never share your 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") { "E-mail" } %>
    <%= ui_input(type: :email, id: "fld-email", placeholder: "voce@exemplo.com") %>
    <%= ui_field_description { "Nunca compartilhamos seu e-mail." } %>
  <% end %>
<% end %>

Referência da API

Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`Field`	`orientation`	`:vertical`	`:vertical` empilha o label sobre o controle, `:horizontal` põe os dois lado a lado, `:responsive` alterna na largura `md` do field group.
`Field`	`invalid`	`false`	Marca o campo como inválido: define `data-invalid` e colore o label.
`Field::Legend`	`variant`	`:legend`	`:legend` tem o tamanho base, `:label` é pequeno. Um de `:legend`, `:label`.
`Field::Error`	`errors`	`nil`	As mensagens a listar, por exemplo `form.object.errors[:email]`. Uma única mensagem pode vir no bloco.