Text Field(ui_text_field)Ui Bibz Logo

UiBibz::Ui::Core::Forms::Texts::TextField

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • html_options[hash]<default: {}>
  • options[hash]<default: {}>

 # by variable 
 ui_text_field name, options, html_options 

 # or by block 
 ui_text_field options, html_options do 
   name 
 end

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • append[html]Add a content before the field
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • prepend[html]Add a content after the field
  • size[symbol](:lg, :md, :sm)(use component size method)
  • state[symbol](:disabled, :active)(use component state method)
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)
  • value[string]Input's value

Examples

Some examples explain how to use the options present in the component.

Text Field

ui_text_field "search"

<input type="text" name="search" id="search" placeholder="Type your search..." class="form-control">

Text Field surrounded

ui_text_field "search", { append: ui_glyph("pencil-alt"), prepend: ui_glyph("camera-retro") }, { placeholder: "Type your search..." }

<div class="input-group">
  <span class="input-group-addon"><i class="glyph fa fa-pencil-alt"></i></span>
  <input type="text" name="search" id="search" placeholder="Type your search..." class="form-control">
  <span class="input-group-addon"><i class="glyph fa fa-camera-retro"></i></span>
</div>

Text Field Options

ui_text_field "search", { state: :disabled, status: :danger, append: ui_glyph("pencil-alt"), prepend: ui_glyph("camera-retro") }, { placeholder: "Type your search..." }

<div class="input-group has-danger">
  <span class="input-group-addon"><i class="glyph fa fa-pencil-alt"></i></span>
  <input type="text" name="search" id="search" placeholder="Type your search..." class="disabled has-danger form-control" disabled="disabled">
  <span class="input-group-addon"><i class="glyph fa fa-camera-retro"></i></span>
</div>

Simple form

Ui Bibz is compatible with simple form. You can use defaults inputs of Simple Form and defaults inputs of Ui Bibz like ui_text_field. You can use Simple Form input options and Ui Bibz ui_text_field options.

ui_form_for(@search) do |f|
  ...
  f.input :email, as: :ui_text_field, append: ui_glyph("envelope")
  ...
end