Flowbite::InputField

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 Flowbite::InputField::Text, Flowbite::InputField::Email, etc.

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

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 %>

Examples

Inputfield

Use this example as a generic form element which includes multiple input fields types such as text, email, password, number, URL, and phone number and use the grid layout to add multiple columns and rows.

Sizes

Use the following examples to apply a small, default or large size for the input fields.

Helper Text

Use this example to show a helper text below the input field for additional explanation and links.

Disabled State

Customization Options

API reference

Inherits from Flowbite

In namespace

Slots

`hint`	Flowbite::Input::Hint	Helper text displayed below the input field to provide additional context or instructions.
`input`	Flowbite::Input	The input element itself. Usually auto-generated based on the input type subclass.
`label`	Flowbite::Input::Label	The label for the input field, rendered above the input element.

Constructor

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

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>	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	Whether the input field should be disabled.
`hint`	Hash	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	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}.
`label`	Hash	A hash with options for the label element. If provided, this Hash is passed to the {Flowbite::Input::Label} constructor.
`options`	Hash	Additional HTML attributes to pass to the input field container element.
`size`	Symbol	The size of the input field. Can be one of +:sm+, +:default+, or +:lg+.