Class: Shadcn::InputComponent

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

Overview

Input component for form fields Matches shadcn/ui Input component

Examples:

Basic input

<%= render Shadcn::InputComponent.new(name: "email", type: "email", placeholder: "Email") %>

With label

<%= render Shadcn::LabelComponent.new(for: "email") { "Email" } %>
<%= render Shadcn::InputComponent.new(id: "email", name: "email", type: "email") %>

Disabled input

<%= render Shadcn::InputComponent.new(name: "locked", disabled: true, value: "Can't change") %>

File input

<%= render Shadcn::InputComponent.new(name: "file", type: "file") %>

Constant Summary collapse

BASE_CLASSES = 
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"

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(type: "text", name: nil, id: nil, value: nil, placeholder: nil, disabled: false, required: false, readonly: false, autofocus: false, autocomplete: nil, pattern: nil, min: nil, max: nil, step: nil, minlength: nil, maxlength: nil, **options) ⇒ InputComponent

Returns a new instance of InputComponent.

Parameters:

  • type (String) (defaults to: "text") —

    Input type (text, email, password, etc.)

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

    Input name attribute

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

    Input id attribute

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

    Input value

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

    Placeholder text

  • disabled (Boolean) (defaults to: false) —

    Whether input is disabled

  • required (Boolean) (defaults to: false) —

    Whether input is required

  • readonly (Boolean) (defaults to: false) —

    Whether input is readonly

  • autofocus (Boolean) (defaults to: false) —

    Whether to autofocus

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

    Autocomplete attribute

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

    Validation pattern

  • min (String, Integer, nil) (defaults to: nil) —

    Minimum value (for number/date inputs)

  • max (String, Integer, nil) (defaults to: nil) —

    Maximum value (for number/date inputs)

  • step (String, Integer, nil) (defaults to: nil) —

    Step value (for number inputs)

  • minlength (Integer, nil) (defaults to: nil) —

    Minimum length

  • maxlength (Integer, nil) (defaults to: nil) —

    Maximum length



39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
# File 'app/components/shadcn/input_component.rb', line 39

def initialize(
  type: "text",
  name: nil,
  id: nil,
  value: nil,
  placeholder: nil,
  disabled: false,
  required: false,
  readonly: false,
  autofocus: false,
  autocomplete: nil,
  pattern: nil,
  min: nil,
  max: nil,
  step: nil,
  minlength: nil,
  maxlength: nil,
  **options
)
  super(**options)
  @type = type
  @name = name
  @id = id
  @value = value
  @placeholder = placeholder
  @disabled = disabled
  @required = required
  @readonly = readonly
  @autofocus = autofocus
  @autocomplete = autocomplete
  @pattern = pattern
  @min = min
  @max = max
  @step = step
  @minlength = minlength
  @maxlength = maxlength
end