Form Field

Stacked label + control + hint/error wrapper. One call per field — no manual label/error markup.

Installation

bin/rails g shadcnrb:component form_field

Example

<div class="max-w-sm">
  <%= sui.form_field label: "Email", hint: "We'll never share it.", for_id: "fx_email" do %>
    <%= sui.input id: "fx_email", type: "email", placeholder: "[email protected]" %>
  <% end %>
</div>

With validation error

Pass `error:` — the error message replaces the hint and the label stack turns destructive-tinted via the control's own aria-invalid styling.

<div class="max-w-sm">
  <%= sui.form_field label: "Email", error: "Email is required", for_id: "fx_email_err" do %>
    <%= sui.input id: "fx_email_err", type: "email", "aria-invalid": true %>
  <% end %>
</div>

Inside Shadcnrb::FormBuilder::Component

The f.field shortcut on Shadcnrb::FormBuilder::Component wraps each control with a form_field, auto-populating the error from the model.

form_with(model: @user, builder: Shadcnrb::FormBuilder::Component) do |f|
  f.field :email, label: "Email", hint: "We'll never share it."
  f.field :bio,   label: "Bio",   as: :text_area
  f.submit
end

API