shadcn-rails

Field

A form field wrapper with label, input, description, and error message support.

No JavaScript Required
field/default 
<%= render(Shadcn::FieldComponent.new(name: "email")) do |field| %>
  <% field.with_label { "Email" } %>
  <% field.with_input(type: :email, placeholder: "you@example.com") %>
<% end %>

Installation

Add the component to your project:

rails generate shadcn:add field

Usage

<%= render(Shadcn::FieldComponent.new(name: "email")) do |field| %>
  <% field.with_label { "Email" } %>
  <% field.with_input(type: :email, placeholder: "you@example.com") %>
<% end %>

Examples

With Description

This is your public display name.

<div class="max-w-sm">
  <%= render Shadcn::FieldComponent.new do |field| %>
    <% field.with_label { "Username" } %>
    <% field.with_input(placeholder: "shadcn") %>
    <% field.with_description { "This is your public display name." } %>
  <% end %>
</div>

With Error

<div class="max-w-sm">
  <%= render Shadcn::FieldComponent.new do |field| %>
    <% field.with_label { "Password" } %>
    <% field.with_input(type: :password) %>
    <% field.with_error { "Password must be at least 8 characters." } %>
  <% end %>
</div>

Required Field

<div class="max-w-sm">
  <%= render Shadcn::FieldComponent.new do |field| %>
    <% field.with_label(required: true) { "Name" } %>
    <% field.with_input(required: true, placeholder: "Your full name") %>
  <% end %>
</div>

With Custom Control (Textarea)

Write a short bio about yourself.

<div class="max-w-sm">
  <%= render Shadcn::FieldComponent.new do |field| %>
    <% field.with_label { "Bio" } %>
    <% field.with_control do %>
      <%= render Shadcn::TextareaComponent.new(placeholder: "Tell us about yourself", rows: 3) %>
    <% end %>
    <% field.with_description { "Write a short bio about yourself." } %>
  <% end %>
</div>

Form Example

<div class="max-w-sm space-y-4">
  <%= render Shadcn::FieldComponent.new(name: "user[email]") do |field| %>
    <% field.with_label { "Email" } %>
    <% field.with_input(type: :email, placeholder: "you@example.com") %>
  <% end %>

  <%= render Shadcn::FieldComponent.new(name: "user[password]") do |field| %>
    <% field.with_label { "Password" } %>
    <% field.with_input(type: :password) %>
  <% end %>

  <%= render Shadcn::ButtonComponent.new(class_name: "w-full") { "Submit" } %>
</div>

Email Field

field/email 
<%= render(Shadcn::FieldComponent.new(name: "email")) do |field| %>
  <% field.with_label { "Email" } %>
  <% field.with_input(type: :email, placeholder: "you@example.com") %>
<% end %>

API Reference

API Reference

Prop Type Default Description
name String nil Input name attribute for form submission
id String auto-generated Input ID (auto-generated if not provided)
class_name String nil Additional CSS classes to apply

Slots

  • with_label - Label for the field (accepts required: option)
  • with_input - Input component (accepts all Input props)
  • with_control - Custom control slot (for textarea, select, etc.)
  • with_description - Helper text below the input
  • with_error - Error message (automatically styles input)

Accessibility

  • Labels are automatically associated with inputs via the for attribute
  • Error messages have role="alert" for screen reader announcement
  • Input styling changes when errors are present to provide visual feedback