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 fully fledged form element for an attribute 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 Text, Email, etc.

To render an input without labels or error messages etc, see Flowbite::Input::Field instead and one of its subclasses.

Examples:

Basic usage


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

Kitchen sink


<% form_for @person do |form| %>
  <%= render(
    Flowbite::InputField::Number.new(
      attribute: :name,
      class: ["mb-4", "w-full"],
      disabled: true,
      form: form,
      hint: {
        content: "Please enter your full name.",
        options: {id: "name-helper-text"}
      },
      input: {
        options: {placeholder: "All of your names here"}
      },
      label: {
        content: "Full name",
        options: {class: ["mb-2", "font-medium"]}
      },
      options: {data: {controller: "form-field"}},
      size: :lg
    )
  ) %>
<% end %>

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:, class: nil, disabled: false, hint: nil, input: {}, label: {}, options: {}, size: :default) ⇒ InputField

Returns a new instance of InputField.

Parameters:

  • attribute (Symbol) —

    The name of the attribute to render in this input field.

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

    The form builder object that will be used to generate the input field.

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

    Additional CSS classes to apply to the input field container, i.e. the outermost element. To add classes to individual components of the InputField, use the input, label and hint arguments.

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

    Whether the input field should be disabled.

  • hint (Hash) (defaults to: nil) —

    A hint to display below the input field, providing additional context or instructions for the user. If provided, this Hash is passed to the Flowbite::Input::Hint constructor.

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

    A hash with options for the input component. These are passed to the input component’s constructor, see the documentation for whatever input component is being used. See Flowbite::Input::Field.

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

    A hash with options for the label element. If provided, this Hash is passed to the Flowbite::Input::Label constructor.

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

    Additional HTML attributes to pass to the input field container element.

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

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

Options Hash (hint:):

  • content (String) —

    The content of the hint element.

  • options (Hash) —

    Additional options to pass to the hint component. This can be used to set the class, for example.

Options Hash (input:):

  • options (Hash) —

    Additional HTML attributes to pass to the input element.

Options Hash (label:):

  • content (String) —

    The content of the label element.

  • options (Hash) —

    Additional options to pass to the label component. This can be used to set the class, for example.



111
112
113
114
115
116
117
118
119
120
121
122
 
# File 'app/components/flowbite/input_field.rb', line 111

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.



66
67
68
69
70
 
# File 'app/components/flowbite/input_field.rb', line 66

def errors
  return [] unless @object

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

#input_component ⇒ Object 



124
125
126
 
# File 'app/components/flowbite/input_field.rb', line 124

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