shadcn-rails

Field

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

No JavaScript Required

We'll never share your email.

Installation

Add the component to your project:

rails generate shadcn:component field

Usage

<%= render Shadcn::FieldComponent.new 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.

<%= 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 %>

With Error

<%= 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 %>

Required Field

With Custom Control (Textarea)

Write a short bio about yourself.

<%= render Shadcn::FieldComponent.new do |field| %>
  <% field.with_label { "Bio" } %>
  <% field.with_control do %>
    <%= render Shadcn::TextareaComponent.new(placeholder: "Tell us about yourself") %>
  <% end %>
  <% field.with_description { "Write a short bio about yourself." } %>
<% end %>

Form Example

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