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="combobox" placeholder="Select an option..." data-controller="select" data-select-create-value="false"><option value="5">Option 5</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
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
render ui.form.select(
  name: "combobox",
  placeholder: placeholder,
  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"
  end
end