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/date_time.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:

Defined Under Namespace

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

Instance Method Summary collapse

Constructor Details

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

Returns a new instance of InputField.



74
75
76
77
78
79
80
81
82
83
 
# File 'app/components/flowbite/input_field.rb', line 74

def initialize(attribute:, form:, disabled: false, hint: nil, input: {}, label: {}, size: :default)
  @attribute = attribute
  @disabled = disabled
  @form = form
  @hint = hint
  @input = input
  @label = label
  @object = form.object
  @size = size
end

Instance Method Details

#errors ⇒ Object

Returns the errors for attribute



70
71
72
 
# File 'app/components/flowbite/input_field.rb', line 70

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

#input_component ⇒ Object 



85
86
87
 
# File 'app/components/flowbite/input_field.rb', line 85

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