Field

Composes a form field's label, control, description and error.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add field --yes

The field registry item installs these files:

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

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

<%= ui_field do %>
  <%= ui_field_label(for: "email") { "Email" } %>
  <%= ui_input(type: :email, id: "email") %>
  <%= ui_field_description { "We never share your email." } %>
<% end %>

Examples

Default

A vertical field with a label, an input and a description.

<%= 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: "you@example.com") %>
    <%= ui_field_description { "We never share your email." } %>
  <% end %>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`Field`	`orientation`	`:vertical`	`:vertical` stacks the label over the control, `:horizontal` sets them side by side, `:responsive` switches at the field group's `md` width.
`Field`	`invalid`	`false`	Marks the field invalid: sets `data-invalid` and colours the label.
`Field::Legend`	`variant`	`:legend`	`:legend` is base size, `:label` is small. One of `:legend`, `:label`.
`Field::Error`	`errors`	`nil`	The messages to list, e.g. `form.object.errors[:email]`. A single message can be the block instead.