Simple form

Ui Bibz is compatible with Simple Form.
You can use defaults inputs of Simple Form and defaults inputs of Ui Bibz.
You can use Simple Form input options and Ui Bibz component options.

Items

The allowed items for this component are:
  • input
    • boolean(Simple Form)
    • string(Simple Form)
    • email(Simple Form)
    • url(Simple Form)
    • tel(Simple Form)
    • password(Simple Form)
    • search(Simple Form)
    • uuid(Simple Form)
    • text(Simple Form)
    • file(Simple Form)
    • hidden(Simple Form)
    • integer(Simple Form)
    • float(Simple Form)
    • decimal(Simple Form)
    • integer(Simple Form)
    • float(Simple Form)
    • range(Simple Form)
    • datetime(Simple Form)
    • date(Simple Form)
    • time(Simple Form)
    • select(Simple Form)
    • radio_buttons(Simple Form)
    • check_boxes(Simple Form)
    • country(Simple Form)
    • time_zone(Simple Form)
    • ui_auto_complete_field(Ui Bibz)
    • ui_choice_group(Ui Bibz)
    • ui_date_picker_field(Ui Bibz)
    • ui_dropdown_selecte_field(Ui Bibz)
    • ui_formula_field(Ui Bibz)
    • ui_markdown_editor_field(Ui Bibz)
    • ui_multi_column_field(Ui Bibz)
    • ui_multi_selecte_field(Ui Bibz)
    • ui_radio_field(Ui Bibz)
    • ui_select_field(Ui Bibz)
    • ui_slider_field(Ui Bibz)
    • ui_switch_field(Ui Bibz)
    • ui_text_field(Ui Bibz)
  • ui_surround_field
  • ui_button_group

Examples

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

Surround fields

km
FromTo
ui_form_for @user, url: simple_form_path, method: :get, html: { class: 'form-test', } do |f|
  ui_row 4 do
    f.ui_surround_field size: :sm do |s|
      s.glyph "map-marker"
      s.input :name, as: :string, placeholder: 'ex : Grenoble, 199 place de la Bastille Paris, …'
    end
    f.ui_surround_field size: :sm do |s|
      s.glyph "street-view"
      s.input :country_id, as: :ui_select_field, collection: Country.all
      s.addon 'km'
    end
    f.input :company, as: :ui_choice_group, size: :sm, label: false, type: :radio, collection: [['Company 1', 1],['Company 2', 2]]
    f.ui_surround_field size: :sm, inline: true do |s|
      s.glyph "globe"
      s.input :email, as: :ui_multi_select_field, collection: [['Email 1', 1], ['Email 2', 2]], input_html: { multiple: true }
    end
    f.ui_surround_field size: :sm do |s|
      s.addon  'From'
      s.input :price_formula, as: :ui_select_field, class: 'form-control-sm', collection: 12.times.map{ |i| (i+1) * 50000 }
      s.addon  'To'
      s.input :price, as: :ui_select_field, class: 'form-control-sm', collection: 12.times.map{ |i| i * 50000 }
      s.glyph 'euro'
    end
    f.button :submit, "Search", class: 'btn-outline-primary btn-sm'
  end
end
<form class="simple_form form-test" novalidate="novalidate" id="new_user" action="/simple_form" accept-charset="UTF-8" method="get">
  <input name="utf8" type="hidden" value="✓">
  <div class="row row-cols-4">
    <div class="form-group surround_field">
      <div class="input-group input-group-sm ui_surround_field">
        <span class="input-group-addon"><i class="glyph fa fa-map-marker"></i></span>
        <input class="form-control string optional" placeholder="ex : Grenoble, 199 place de la Bastille Paris, …" type="text" value="" name="user[name]" id="user_name">
      </div>
    </div>
    <div class="form-group surround_field">
      <div class="input-group input-group-sm ui_surround_field">
        <span class="input-group-addon"><i class="glyph fa fa-street-view"></i></span>
        <select name="user[country_id]" id="user_country_id" class="select-field form-control">
          <option selected="selected" value="1">France</option>
          <option value="2">Deutchland</option>
          <option value="3">Brasil</option>
          <option value="4">Mexico</option>
        </select>
        <span class="input-group-addon">km</span>
      </div>
    </div>
    <div class="form-group ui_choice_group optional user_company">
      <div data-toggle="buttons" class="btn-group btn-group-sm button-choice">
        <button class="btn btn-sm">Company 1</button>
        <button class="btn btn-sm">Company 2</button>
      </div>
    </div>
    <div class="form-group surround_field">
      <div class="input-group input-group-sm ui_surround_field">
        <span class="input-group-addon"><i class="glyph fa fa-globe"></i></span>
        <select name="user[email][]" id="user_email" multiple="multiple" class="btn-secondary multi-select-field" style="display: none;">
          <option value="1">Email 1</option>
          <option value="2">Email 2</option>
        </select>
        <div class="btn-group input-group-btn">
          <button type="button" class="multiselect dropdown-toggle btn btn-secondary multi-select-field" data-toggle="dropdown" title="" data-original-title="None selected">None selected <b class="caret"></b></button>
          <ul class="multiselect-container dropdown-menu">
            <li>
              <a href="javascript:void(0);">
                <label class="checkbox">
                  <input type="checkbox" value="1"> Email 1
                </label>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <label class="checkbox">
                  <input type="checkbox" value="2"> Email 2
                </label>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="form-group surround_field">
      <div class="input-group input-group-sm ui_surround_field">
        <span class="input-group-addon">From</span>
        <select name="user[price_formula]" id="user_price_formula" class="form-control-sm select-field form-control">
          <option selected="selected" value="50000">50000</option>
          <option value="100000">100000</option>
          <option value="150000">150000</option>
          <option value="200000">200000</option>
          <option value="250000">250000</option>
          <option value="300000">300000</option>
          <option value="350000">350000</option>
          <option value="400000">400000</option>
          <option value="450000">450000</option>
          <option value="500000">500000</option>
          <option value="550000">550000</option>
          <option value="600000">600000</option>
        </select>
        <span class="input-group-addon">To</span>
        <select name="user[price]" id="user_price" class="form-control-sm select-field form-control">
          <option value="0">0</option>
          <option value="50000">50000</option>
          <option value="100000">100000</option>
          <option value="150000">150000</option>
          <option value="200000">200000</option>
          <option value="250000">250000</option>
          <option value="300000">300000</option>
          <option value="350000">350000</option>
          <option value="400000">400000</option>
          <option value="450000">450000</option>
          <option value="500000">500000</option>
          <option value="550000">550000</option>
        </select>
        <span class="input-group-addon">
          <i class="glyph fa fa-euro"></i>
        </span>
      </div>
    </div>
    <input type="submit" name="commit" value="Search" class="btn btn-default btn-outline-primary btn-sm" data-disable-with="Search">
  </div>
</form>

Button groups


ui_form_for @user, url: simple_form_path, method: :get do |f|
  f.input :email, as: :ui_text_field
  f.ui_button_group do |i|
    i.button 'Save', status: :danger
    i.button 'Close', status: :dark
  end
end
<form class="simple_form" novalidate="novalidate" id="new_user" action="/simple_form" accept-charset="UTF-8" method="get">
  <input name="utf8" type="hidden" value="✓">
  <div class="form-group ui_text_field optional user_email">
    <label class="control-label ui_text_field optional" for="user_email">Email</label>
    <input type="text" name="user[email]" id="user_email" class="ui_text_field optional form-control">
  </div>
  <div class="button_group">
    <div class="btn-group" role="group">
      <button class="btn-danger btn">Save</button>
      <button class="btn-dark btn">Close</button>
    </div>
  </div>
</form>