Class: Flowbite::Input

Inherits:
ViewComponent::Base
  • Object
show all
Defined in:
app/components/flowbite/input.rb,
app/components/flowbite/input/url.rb,
app/components/flowbite/input/date.rb,
app/components/flowbite/input/file.rb,
app/components/flowbite/input/hint.rb,
app/components/flowbite/input/email.rb,
app/components/flowbite/input/label.rb,
app/components/flowbite/input/phone.rb,
app/components/flowbite/input/number.rb,
app/components/flowbite/input/select.rb,
app/components/flowbite/input/checkbox.rb,
app/components/flowbite/input/password.rb,
app/components/flowbite/input/textarea.rb,
app/components/flowbite/input/date_time.rb,
app/components/flowbite/input/radio_button.rb,
app/components/flowbite/input/validation_error.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 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.

Examples:

Usage

<%= render(Flowbite::Input::Email.new(attribute: :email, form: form)) %>

Defined Under Namespace

Classes: Checkbox, Date, DateTime, Email, File, Hint, Label, Number, Password, Phone, RadioButton, Select, Textarea, Url, ValidationError

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) ⇒ Input

Returns a new instance of Input.

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.



88
89
90
91
92
93
94
95
96
 
# File 'app/components/flowbite/input.rb', line 88

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.



33
34
35
 
# File 'app/components/flowbite/input.rb', line 33

def options
  @options
end

#size ⇒ Object (readonly)

Returns the value of attribute size.



33
34
35
 
# File 'app/components/flowbite/input.rb', line 33

def size
  @size
end

#style ⇒ Object (readonly)

Returns the value of attribute style.



33
34
35
 
# File 'app/components/flowbite/input.rb', line 33

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.



38
39
40
41
42
 
# File 'app/components/flowbite/input.rb', line 38

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 Input 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.



51
52
53
 
# File 'app/components/flowbite/input.rb', line 51

def sizes
  const_get(:SIZES)
end

.styles ⇒ Flowbite::Styles

Returns The available styles for this input field.

Returns:



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

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.



99
100
101
102
103
104
105
 
# File 'app/components/flowbite/input.rb', line 99

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.



110
111
112
 
# File 'app/components/flowbite/input.rb', line 110

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.



117
118
119
 
# File 'app/components/flowbite/input.rb', line 117

def input_field_type
  :text_field
end