Class: Shadcn::FieldComponent

Inherits:
BaseComponent
  • Object
show all
Defined in:
app/components/shadcn/field_component.rb

Overview

Field component for form field wrapper with label, input, description, and error Provides a consistent pattern for form fields

Examples:

Basic field

<%= render Shadcn::FieldComponent.new do |field| %>
  <% field.with_label { "Email" } %>
  <% field.with_input(type: :email, placeholder: "[email protected]") %>
<% end %>

With description

<%= render Shadcn::FieldComponent.new do |field| %>
  <% field.with_label { "Username" } %>
  <% field.with_input %>
  <% 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 is required." } %>
<% end %>

With custom content

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

Defined Under Namespace

Classes: DescriptionComponent, ErrorComponent

Constant Summary collapse

BASE_CLASSES = 
"space-y-2"

Instance Attribute Summary

Attributes inherited from BaseComponent

#class_name, #data, #html_options

Instance Method Summary collapse

Methods inherited from BaseComponent

#content

Methods included from Rails::Helpers::ClassNameHelper

#cn

Constructor Details

#initialize(name: nil, id: nil, **options) ⇒ FieldComponent

Returns a new instance of FieldComponent.

Parameters:

  • name (String, nil) (defaults to: nil) —

    Input name attribute

  • id (String, nil) (defaults to: nil) —

    Input ID (auto-generated if not provided)



71
72
73
74
75
 
# File 'app/components/shadcn/field_component.rb', line 71

def initialize(name: nil, id: nil, **options)
  super(**options)
  @name = name
  @input_id = id || generate_id
end

Instance Method Details

#call ⇒ Object 



77
78
79
80
81
82
83
84
85
86
 
# File 'app/components/shadcn/field_component.rb', line 77

def call
  tag.div(class: merge_classes(BASE_CLASSES), **html_options.merge(build_data)) do
    safe_join([
      label,
      control || input,
      description,
      error
    ].compact)
  end
end