Class: Fluxbit::Form::TextFieldComponent

Inherits:
FieldComponent
  • Object
show all
Includes:
Config::Form::TextFieldComponent
Defined in:
app/components/fluxbit/form/text_field_component.rb

Overview

The ‘Fluxbit::Form::TextFieldComponent` is a form input component that extends `Fluxbit::Form::FieldComponent`. It provides a styled text input (or textarea) with support for various HTML input types, optional icons or add-on content, and color-coded validation states (e.g. default, success, error).

Examples:

Basic usage

= render Fluxbit::Form::TextFieldComponent.new(name: :email)

See Also:

  • For detailed documentation and examples.

Direct Known Subclasses

SelectComponent

Constant Summary collapse

TYPE_DEFAULT = 
:text
TYPE_OPTIONS = 
%i[text textarea text_area color number email password search tel url date datetime_local month time week currency]

Instance Method Summary collapse

Constructor Details

#initialize(**props) ⇒ TextFieldComponent

Initializes the text field component with the given properties.

Parameters:

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

    The form builder (optional, for Rails forms)

  • attribute (Symbol) —

    The model attribute to be used in the form (required if using form builder)

  • id (String) —

    The id of the input element (optional)

  • label (String) —

    The label for the input field (optional)

  • help_text (String) —

    Additional help text for the input field (optional)

  • helper_popover (String) —

    Content for a popover helper (optional)

  • helper_popover_placement (String) —

    Placement of the popover (default: “right”)

  • name (String) —

    Name of the field (required, unless using form builder)

  • value (String) —

    Value for the field (optional)

  • type (Symbol) —

    Input type (‘:text`, `:email`, etc)

  • icon (Symbol) —

    Left icon (optional)

  • right_icon (Symbol) —

    Right icon (optional)

  • addon (String) —

    Add-on text or icon before the input (optional)

  • addon_props (Hash) —

    Props for the Add-on (optional)

  • icon_props (Hash) —

    Props for the left icon (optional)

  • right_icon_props (Hash) —

    Props for the right icon (optional)

  • div_props (Hash) —

    Props for the whole div (optional)

  • multiline (Boolean) —

    Renders a textarea if true

  • color (Symbol) —

    Field color (‘:default`, `:success`, `:failure`, etc)

  • sizing (Integer) —

    Input size

  • shadow (Boolean) —

    Adds drop shadow if true

  • disabled (Boolean) —

    Disables the input if true

  • readonly (Boolean) —

    Makes the input readonly if true

  • ... —

    any other HTML attribute supported by input/textarea



42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
# File 'app/components/fluxbit/form/text_field_component.rb', line 42

def initialize(**props)
  super(**props)
  @color = valid_color(@props.delete(:color))
  @type = options(@props.delete(:type), collection: TYPE_OPTIONS, default: TYPE_DEFAULT)
  @icon = @props.delete(:icon)
  @multiline = options(@props.delete(:multiline), default: false)
  @shadow = @props.delete(:shadow)
  @addon = @props.delete(:addon)
  @right_icon = @props.delete(:right_icon)
  @addon_props = @props.delete(:addon_props) || {}
  @div_props = @props.delete(:div_props) || {}
  @icon_props = @props.delete(:icon_props) || {}
  @right_icon_props = @props.delete(:right_icon_props) || {}
  @sizing = sizing_with_addon @props.delete(:sizing)
  @props[:type] = @type

  declare_classes
  @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
end

Instance Method Details

#call ⇒ Object 



62
63
64
65
66
 
# File 'app/components/fluxbit/form/text_field_component.rb', line 62

def call
  content_tag :div, **@wrapper_html do
    safe_join [ label, icon_container, help_text ]
  end
end