Evolve
x
1
<select class="block text-gray-900 rounded-lg border border-gray-200 outline-none focus:border-blue-500 focus:ring-3 focus:ring-blue-500/50 dark:text-gray-100 dark:border-gray-600 dark:focus:border-blue-500 peer-focus:ring-offset-2 peer-focus:ring-offset-white before:absolute before:top-1 before:left-1 before:rounded-full before:bg-white before:transition-transform before:duration-150 before:ease-out before:content-[''] peer-checked:before:translate-x-full dark:bg-gray-700 dark:peer-checked:bg-blue-500 dark:peer-focus:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 text-sm leading-5 py-2 pr-8 pl-3" name="multiselect" placeholder="Select options..." multiple="multiple" data-controller="select" data-select-create-value="false"><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option><option value="4">Option 4</option><option value="5">Option 5</option><option value="6">Option 6</option><option value="7">Option 7</option><option value="8">Option 8</option></select>
Param Description Input

—

—

—

—

—

—

API endpoint for remote data

Search parameter name for API
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
data_attrs = { controller: "select" }
data_attrs[:select_url_value] = url if url.present?
data_attrs[:select_search_param_value] = search_param if url.present?
data_attrs[:select_create_value] = create
data_attrs[:select_max_items_value] = max_items if max_items.present?
render ui.form.select(
  name: "multiselect",
  placeholder: placeholder,
  multiple: true,
  size: size,
  width: width,
  errors: errors,
  data: data_attrs
) do
  if url.blank?
    [
      tag.option("Option 1", value: "1"),
      tag.option("Option 2", value: "2"),
      tag.option("Option 3", value: "3"),
      tag.option("Option 4", value: "4"),
      tag.option("Option 5", value: "5"),
      tag.option("Option 6", value: "6"),
      tag.option("Option 7", value: "7"),
      tag.option("Option 8", value: "8")
    ].join.html_safe
  end
end