Number Field(ui_number_field)Ui Bibz Logo

UiBibz::Ui::Core::Forms::Numbers::NumberField

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_number_field name, options, html_options 

 # or by block 
 ui_number_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)
  • in[array]A number specifying the :min and :max values.
  • max[integer/float]The maximum acceptable value
  • min[integer/float]The minimum acceptable value
  • 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)
  • step[integer/float]The acceptable value granularity.
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)
  • value[string]Input's value
  • within[array]Same as :in

Examples

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

Number Field

ui_text_field "number"

<input type="number" name="number" id="number" class="custom-number">

Append, prepend

ui_number_field 'number', append: ui_glyph("calendar"), prepend: ui_glyph("pencil-alt")

<div class="input-group ui_surround_field">
  <span class="input-group-text"><i class="glyph fas fa-calendar"></i></span>
  <input type="number" name="number" id="number" class="form-control">
  <span class="input-group-text"><i class="glyph fas fa-pencil-alt"></i></span>
</div>

Number Field min, max, step and value

ui_number_field 'number', min: -3, max: 3, step: 0.2, value: 0.40

<input type="number" name="number" id="number" value="0.4" class="custom-number" min="-3" max="3" step="0.2">

Number Field with in or within



ui_number_field 'number', in: 0..100, value: 8
ui_number_field 'number', within: 5..10, step: 0.2, value: 6

<input type="number" name="number" id="number" value="8" class="custom-number" min="0" max="100">
<input type="number" name="number" id="number" value="6" class="custom-number" min="5" max="10" step="0.2">

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_number_field. You can use Simple Form input options and Ui Bibz ui_number_field options.

ui_form_for(@search) do |f|
  ...
  f.input :name, as: :ui_number_field
  ...
end