Number Field(ui_number_field)



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

 # by variable 
 ui_number_field name, options, html_options 

 # or by block 
 ui_number_field options, html_options do 


The specific options for this component are:
  • value[string]Input's value
  • min[integer/float]The minimum acceptable value
  • max[integer/float]The maximum acceptable value
  • in[array]A number specifying the :min and :max values.
  • within[array]Same as :in
  • step[integer/float]The acceptable value granularity.


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

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