Select Field(ui_select_field)Ui Bibz Logo

UiBibz::Ui::Core::Forms::Selects::SelectField

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

 # or by block 
 ui_select_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)
  • connect[hash]
  • controller[string](use component stimulus-options method)
  • option_tags[array/object]
  • prepend[html]Add a content after the field
  • refresh[hash]
  • size[symbol](:lg, :md, :sm)(use component size method)
  • state[symbol](:disabled, :active)(use component state method)
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)

Examples

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

Select Field

option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
ui_select_field 'example 0', option_tags: option_tags

<select name="example 0" id="example_0" class="select-field form-control">
  <option value="option 0">option 0</option>
  <option value="option 1">option 1</option>
  <option value="option 2">option 2</option>
  <option value="option 3">option 3</option>
  <option value="option 4">option 4</option>
</select>

Append, prepend

ui_select_field 'value', append: ui_glyph("calendar"), prepend: ui_glyph("pencil-alt"), option_tags: select_options_tags

<div class="input-group ui_surround_field">
  <span class="input-group-text"><i class="glyph fas fa-calendar"></i></span>
  <select name="value" id="value" class="select-field form-control form-select">
    <option value="0">option 0</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
  </select>
  <span class="input-group-text"><i class="glyph fas fa-pencil-alt"></i></span>
</div>

Optgroup options

grouped_options = { 'North America' => [['United states','US'], 'Canada'], 'Europe' => ['Denmark','Germany','France'] }
ui_select_field 'example 1', option_tags: grouped_options_for_select(grouped_options)

<select name="example 1" id="example_1" class="select-field form-control">
  <optgroup label="North America">
    <option value="US">United states</option>
    <option value="Canada">Canada</option></optgroup>
  <optgroup label="Europe">
    <option value="Denmark">Denmark</option>
    <option value="Germany">Germany</option>
    <option value="France">France</option>
  </optgroup>
</select>

Status options

option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
ui_select_field "example1", status: :success, option_tags: select_options_tags

Surround options

option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
ui_select_field "example1", option_tags: select_options_tags, append: ui_glyph("pencil-alt"), prepend: ui_glyph("gem")

Size

The size option has following symbols for argument:
  • :lg
  • :md
  • :sm


option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
ui_select_field 'example lg', option_tags: select_options_tags, size: :lg
ui_select_field 'example md', option_tags: select_options_tags, size: :md
ui_select_field 'example sm', option_tags: select_options_tags, size: :sm

Field Connected

You can connect several components together using option connect. With this option, you can determine the target, the trigger event, and the connection mode.

  • You can choose the connection mode: local or remote. If you choose local mode, you will need to populate the data with an array.
  • If you choose the remote mode, you must fill in the url so that the component can retrieve the information in Ajax. The input name will be send in parameter.

Output data, whether local or remote, must be written in this way: [{ value: Integer||String, text: String||Integer, connect_option_id: Integer||String }, {...}] .

To have optgroup, format must be like that: { label1: [{ text: String||Integer, value: String||Integer, connect_option_id: Integer||String }, {...}], label2: [...]} 

connect: {
  event: String, # change|click|change click|... <default: 'change'>
  mode:  String, # local|remote <default: 'remote'>
  target: {
    selector:  String, # .my-target|#my-target
    data:      Array,  # [{ text: 'option', value: 1, connect_option_id: 2}]
    url:       String, # url_data.html'
  }
}

You can connect an input to any other input:

Select field Dropdown select field Multi column field
Select field
Dropdown select field
Multi column field
= Done, = In progress

Connected (remote)


option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
# First select input
connect = { mode: "remote", target: { selector: "#example_1_target", url: components_forms_selects_select_field_path }}
ui_select_field "example 1", { option_tags: options_tags, connect: connect }
# Second select input
ui_select_field "example 1 target", option_tags: option_tags

<select name="example 0" id="example_0" class="select-field form-control">
  <option value="option 0">option 0</option>
  <option value="option 1">option 1</option>
  <option value="option 2">option 2</option>
  <option value="option 3">option 3</option>
  <option value="option 4">option 4</option>
</select>

Connected (local)


option_tags  = options_for_select(5.times.map{ |i| ["option #{i}", i] })
# First Select input
options_data = 5.times.map{ |o| 5.times.map{ |i| { text: "New option #{ o }.#{ i }", value: i, connect_option_id: o }}}.flatten
connect      = { mode: "local", target: { selector: "#example_2_target", data: options_data }}}
ui_select_field "example 2", { option_tags: options_html, connect: connect }
# Second Select input
options_html = options_for_select(5.times.map{ |i| "option #{i}" })
ui_select_field "example 2 target", option_tags: options_html

<select name='example 1' id='example_1' data-connect="{'type':'remote','target':{'selector':'#example_1_target','url':'/components/forms/selects/select-field'}}" class="ui-bibz-connect select-field form-control">
  <option value="option 0">option 0</option>
  <option value="option 1">option 1</option>
  <option value="option 2">option 2</option>
  <option value="option 3">option 3</option>
  <option value="option 4">option 4</option></select>
<select name="example 1 target" id="example_1_target" class="select-field form-control">
  <option value="option 0">option 0</option>
  <option value="option 1">option 1</option>
  <option value="option 2">option 2</option>
  <option value="option 3">option 3</option>
  <option value="option 4">option 4</option>
</select>

Refresh Connected

Option refresh take same arguments than connect option.

option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
connect     = { target: { url: components_forms_selects_select_field_path }}
ui_select_field "example 3", option_tags: option_tags, refresh: connect

<div class="input-group select-field-refresh">
  <select name="example 3" id="example_3" class="select-field form-control">
    <option value="option 0">option 0</option>
    <option value="option 1">option 1</option>
    <option value="option 2">option 2</option>
    <option value="option 3">option 3</option>
    <option value="option 4">option 4</option>
  </select>
  <span class="input-group-btn">
    <button class='input-refresh-button btn-primary ui-bibz-connect btn' data-connect="{'events':'click','type':'remote','target':{'selector':'#example_3','url':'/components/forms/selects/select-field','data':[]}}">
      <i class="glyph fa fa-refresh"></i>
    </button>
  </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_select_field. You can use Simple Form input options and Ui Bibz ui_select_field options.

Then in your view, you can insert your input dropdown select field. This simple form component is based on simple_form collection
Collection inputs accept two other options beside collections:

  • label_method => the label method to be applied to the collection to retrieve the label (use this instead of the text_method option in collection_select)
  • value_method => the value method to be applied to the collection to retrieve the value
label_method and value_method are optional 

ui_form_for(@user) do |f|
  ...
  f.association :country, as: :ui_select_field, collection: @countries, label_method: :name, value_method: :id
  ...
end

You can use `grouped: true` option to group collection
Grouped collection inputs accept the same :label_method and :value_method options, which will be used to retrieve label/value attributes for the option tags. Besides that, you can give:

  • group_method => the method to be called on the given collection to generate the options for each group (required)
  • group_label_method => the label method to be applied on the given collection to retrieve the label for the optgroup (Simple Form will attempt to guess the best one the same way it does with :label_method)

ui_form_for(@search) do |f|
  ...
  f.input :country, as: :ui_select_field, grouped: true, collection: @continents,  group_method: :countries, label_method: :name, value_method: :id
  ...
end

You can add option refresh in your association.

ui_form_for(@user) do |f|
  ...
  f.association :country, as: :ui_select_field, refresh: { target: { url: components_forms_selects_select_field_path }}, collection: @countries, label_method: :name, value_method: :id
  ...
end