Class: Flowbite::InputField

Inherits:
ViewComponent::Base
  • Object
show all
Defined in:
app/components/flowbite/input_field.rb,
app/components/flowbite/input_field/url.rb,
app/components/flowbite/input_field/date.rb,
app/components/flowbite/input_field/file.rb,
app/components/flowbite/input_field/text.rb,
app/components/flowbite/input_field/email.rb,
app/components/flowbite/input_field/phone.rb,
app/components/flowbite/input_field/number.rb,
app/components/flowbite/input_field/select.rb,
app/components/flowbite/input_field/checkbox.rb,
app/components/flowbite/input_field/password.rb,
app/components/flowbite/input_field/textarea.rb,
app/components/flowbite/input_field/radio_button.rb

Overview

A form element for a single field, containing label, input field, error messages, helper text and whatever else is needed for a user friendly input experience.

The input field is an important part of the form element that can be used to create interactive controls to accept data from the user based on multiple input types, such as text, email, number, password, URL, phone number, and more.

Usually you’d use one of the subclasses of this class which implement the different input types, like ‘Flowbite::InputField::Text`, `Flowbite::InputField::Email`, etc.

Expects 2 arguments:

field.

will be used to generate the input field.

Supports additional arguments:

additional context or instructions for the user. This is optional. See flowbite.com/docs/forms/input-field/#helper-text

Flowbite::Input::Label, see that for details. Can contain:

  • ‘content`: The content of the label. If not provided, the label will default to the attribute name.

  • ‘options`: A hash of additional options to pass to the label component. This can be used to set the class, for example.

Defaults to ‘false`.

These are passed to the input components constructor, so see whatever component is being used for details. Can contain:

  • ‘options`: Additional HTML attributes to pass to the input element.

‘:md`, or `:lg`. Defaults to `:md`.

Sample usage

<% form_for @person do |form| %>
  <%= render(
    Flowbite::InputField::Number.new(
      :attribute => :name,
      :form => form
    )
  ) %>
<% end %>

To render an input without labels or error messages etc, use ‘Flowbite::Input::Field` instead.

See Also:

Direct Known Subclasses

Checkbox, Date, Email, File, Number, Password, Phone, RadioButton, Select, Text, Textarea, Url

Defined Under Namespace

Classes: Checkbox, Date, Email, File, Number, Password, Phone, RadioButton, Select, Text, Textarea, Url

Instance Method Summary collapse

Constructor Details

#initialize(attribute:, form:, class: nil, disabled: false, hint: nil, input: {}, label: {}, options: {}, size: :default) ⇒ InputField

Returns a new instance of InputField.



78
79
80
81
82
83
84
85
86
87
88
89
 
# File 'app/components/flowbite/input_field.rb', line 78

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

Instance Method Details

#errors ⇒ Array<String>

Returns the errors for attribute

Returns:

  • (Array<String>) —

    An array of error messages for the attribute.



72
73
74
75
76
 
# File 'app/components/flowbite/input_field.rb', line 72

def errors
  return [] unless @object

  @object.errors[@attribute] || []
end

#input_component ⇒ Object 



91
92
93
 
# File 'app/components/flowbite/input_field.rb', line 91

def input_component
  ::Flowbite::Input::Field
end