Class: Flowbite::Input::Field

Inherits:
ViewComponent::Base
  • Object
show all
Defined in:
app/components/flowbite/input/field.rb

Overview

The individual input form element used in forms - without labels, error messages, hints, etc.

Use this when you want to render an input field on its own without any surrounding elements, i.e. as a building block in more complex input components.

To render a complete input field with labels and error messages, use Flowbite::InputField instead.

By default this renders a text input field. To render other types of input fields, use one of the subclasses, such as Checkbox or Textarea.

Constant Summary collapse

SIZES = 
{
  sm: ["px-2.5", "py-2", "text-sm"],
  default: ["px-3", "py-2.5", "text-sm"],
  lg: ["px-3.5", "py-3", "text-base"]
}.freeze
STATES = 
[
  DEFAULT = :default,
  DISABLED = :disabled,
  ERROR = :error
].freeze

Instance Attribute Summary collapse

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(attribute:, form:, class: nil, disabled: false, options: {}, size: :default) ⇒ Field

Returns a new instance of Field.

Parameters:

  • attribute (Symbol) —

    The attribute on the form’s object this input field is for.

  • form (ActionView::Helpers::FormBuilder) —

    The form builder this input field is part of.

  • class (String, Array<String>) (defaults to: nil) —

    Additional CSS classes to apply to the input field.

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

    Whether the input field should be disabled.

  • options (Hash) (defaults to: {}) —

    Additional HTML attributes to pass to the input field. For example, you can use this to set placeholder text by passing options: {placeholder: “Enter your name”}

  • size (Symbol) (defaults to: :default) —

    The size of the input field. Can be one of :sm, :default, or :lg.



86
87
88
89
90
91
92
93
94
 
# File 'app/components/flowbite/input/field.rb', line 86

def initialize(attribute:, form:, class: nil, disabled: false, options: {}, size: :default)
  @attribute = attribute
  @class = Array.wrap(binding.local_variable_get(:class))
  @disabled = disabled
  @form = form
  @options = options || {}
  @object = form.object
  @size = size
end

Instance Attribute Details

#options ⇒ Object (readonly)

Returns the value of attribute options.



31
32
33
 
# File 'app/components/flowbite/input/field.rb', line 31

def options
  @options
end

#size ⇒ Object (readonly)

Returns the value of attribute size.



31
32
33
 
# File 'app/components/flowbite/input/field.rb', line 31

def size
  @size
end

#style ⇒ Object (readonly)

Returns the value of attribute style.



31
32
33
 
# File 'app/components/flowbite/input/field.rb', line 31

def style
  @style
end

Class Method Details

.classes(size: :default, state: :default, style: :default) ⇒ Array<String>

Returns The CSS classes to apply to the input field given the specified size, state, and style.

Returns:

  • (Array<String>) —

    The CSS classes to apply to the input field given the specified size, state, and style.



36
37
38
39
40
 
# File 'app/components/flowbite/input/field.rb', line 36

def classes(size: :default, state: :default, style: :default)
  style = styles.fetch(style)
  state_classes = style.fetch(state)
  state_classes + sizes.fetch(size)
end

.sizes ⇒ Hash

Returns the sizes this Field supports.

This is effectively the SIZES constant, but provided as a method to return the constant from the current class, not the superclass.

Returns:

  • (Hash) —

    A hash mapping size names to their corresponding CSS classes.



49
50
51
 
# File 'app/components/flowbite/input/field.rb', line 49

def sizes
  const_get(:SIZES)
end

.styles ⇒ Flowbite::Styles

Returns The available styles for this input field.

Returns:



54
55
56
57
58
59
60
61
62
63
64
65
66
 
# File 'app/components/flowbite/input/field.rb', line 54

def styles
  # rubocop:disable Layout/LineLength
  Flowbite::Styles.from_hash(
    {
      default: {
        default: ["bg-neutral-secondary-medium", "border", "border-default-medium", "text-heading", "rounded-base", "focus:ring-brand", "focus:border-brand", "block", "w-full", "shadow-xs", "placeholder:text-body"],
        disabled: ["bg-neutral-secondary-medium", "border", "border-default-medium", "text-fg-disabled", "rounded-base", "focus:ring-brand", "focus:border-brand", "block", "w-full", "shadow-xs", "cursor-not-allowed", "placeholder:text-fg-disabled"],
        error: ["bg-danger-soft", "border", "border-danger-subtle", "text-fg-danger-strong", "rounded-base", "focus:ring-danger", "focus:border-danger", "block", "w-full", "shadow-xs", "placeholder:text-fg-danger-strong"]
      }
    }.freeze
  )
  # rubocop:enable Layout/LineLength
end

Instance Method Details

#call ⇒ Object

Returns the HTML to use for the actual input field element.



97
98
99
100
101
102
103
 
# File 'app/components/flowbite/input/field.rb', line 97

def call
  @form.send(
    input_field_type,
    @attribute,
    **input_options
  )
end

#classes ⇒ Array<String>

Returns the CSS classes to apply to the input field

Returns:

  • (Array<String>) —

    An array of CSS classes.



108
109
110
 
# File 'app/components/flowbite/input/field.rb', line 108

def classes
  self.class.classes(size: size, state: state) + @class
end

#input_field_type ⇒ Symbol

Returns the name of the method used to generate HTML for the input field

Returns:

  • (Symbol) —

    The form helper method name to call on form.



115
116
117
 
# File 'app/components/flowbite/input/field.rb', line 115

def input_field_type
  :text_field
end