BetterUi Components

Previews

No matching results.

x
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<div class="form-field-wrapper">
  <label for="country" class="block font-medium text-gray-700 mb-1 text-sm">
    Country
  </label>
  <div class="relative" data-controller="better-ui--forms--select"
       data-better-ui--forms--select-clearable-value="false"
       data-better-ui--forms--select-placeholder-value="Select a country"
       data-better-ui--forms--select-disabled-value="false"
       data-better-ui--forms--select-readonly-value="false">
    <input type="hidden" name="country" data-better-ui--forms--select-target="hiddenInput" />
    <button type="button" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-controls="country_listbox" class="w-full rounded-md border shadow-sm transition-colors duration-200 flex items-center text-left text-base py-2 px-4 border-gray-300 bg-white text-gray-900 placeholder-gray-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:ring-opacity-20 focus:outline-none cursor-pointer" data-better-ui--forms--select-target="trigger" data-action="click->better-ui--forms--select#toggle keydown->better-ui--forms--select#handleTriggerKeydown">
      <span class="flex items-center mr-2">
        <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
      </span>
      <span class="flex-1 truncate text-gray-400"
            data-better-ui--forms--select-target="display">
        Select a country
      </span>
      <span class="flex items-center ml-2"
            data-better-ui--forms--select-target="caret">
        <svg class="w-5 h-5 text-gray-400 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
      </span>
    </button>
    <ul id="country_listbox"
        role="listbox"
        class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto py-1 hidden"
        data-better-ui--forms--select-target="listbox"
        data-action="keydown->better-ui--forms--select#handleListboxKeydown">
      <li role="option"
            id="country_option_0"
            class="px-3 py-2 cursor-pointer truncate text-base text-gray-900 hover:bg-gray-100"
            data-value="it"
            data-label="Italy"
            aria-selected="false"
            data-better-ui--forms--select-target="option"
            data-action="click->better-ui--forms--select#selectOption"
        tabindex="-1">
        Italy
      </li>
      <li role="option"
            id="country_option_1"
            class="px-3 py-2 cursor-pointer truncate text-base text-gray-900 hover:bg-gray-100"
            data-value="fr"
            data-label="France"
            aria-selected="false"
            data-better-ui--forms--select-target="option"
            data-action="click->better-ui--forms--select#selectOption"
        tabindex="-1">
        France
      </li>
      <li role="option"
            id="country_option_2"
            class="px-3 py-2 cursor-pointer truncate text-base text-gray-900 hover:bg-gray-100"
            data-value="de"
            data-label="Germany"
            aria-selected="false"
            data-better-ui--forms--select-target="option"
            data-action="click->better-ui--forms--select#selectOption"
        tabindex="-1">
        Germany
      </li>
      <li role="option"
            id="country_option_3"
            class="px-3 py-2 cursor-pointer truncate text-base text-gray-900 hover:bg-gray-100"
            data-value="es"
            data-label="Spain"
            aria-selected="false"
            data-better-ui--forms--select-target="option"
            data-action="click->better-ui--forms--select#selectOption"
        tabindex="-1">
        Spain
      </li>
      <li role="option"
            id="country_option_4"
            class="px-3 py-2 cursor-pointer truncate text-base text-gray-900 hover:bg-gray-100"
            data-value="uk"
            data-label="United Kingdom"
            aria-selected="false"
            data-better-ui--forms--select-target="option"
            data-action="click->better-ui--forms--select#selectOption"
        tabindex="-1">
        United Kingdom
      </li>
      <li role="option"
            id="country_option_5"
            class="px-3 py-2 cursor-pointer truncate text-base text-gray-900 hover:bg-gray-100"
            data-value="us"
            data-label="United States"
            aria-selected="false"
            data-better-ui--forms--select-target="option"
            data-action="click->better-ui--forms--select#selectOption"
        tabindex="-1">
        United States
      </li>
    </ul>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
render BetterUi::Forms::SelectComponent.new(
  name: "country",
  collection: COUNTRIES,
  label: "Country",
  placeholder: "Select a country"
) do |component|
  component.with_prefix_icon do
    '<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </svg>'.html_safe
  end
end

No notes provided.

No params configured.