Cfa Ui Components
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
<div x-data x-combobox class="max-w-lg space-y-4">
  <label class="label block " x-combobox:label="" for="form_component_preview_test_model_favorite_fruits">Favorite fruits</label>
  <p x-combobox:desc class="help_text" >
    Please choose your favorite fruit
  </p>
  <select x-combobox:values="" name="form_component_preview_test_model[favorite_fruits]" id="form_component_preview_test_model_favorite_fruits"><option value="apple">Apple</option>
    <option value="apricot">Apricot</option>
    <option value="avocado">Avocado</option>
    <option value="banana">Banana</option>
    <option value="blackberry">Blackberry</option>
    <option value="blood orange">Blood orange</option>
    <option value="blueberry">Blueberry</option>
    <option value="boysenberry">Boysenberry</option>
    <option value="breadfruit">Breadfruit</option>
    <option value="buddhas hand citron">Buddha's hand citron</option>
    <option value="cantaloupe">Cantaloupe</option>
    <option value="clementine">Clementine</option>
    <option value="crab apple">Crab apple</option>
    <option value="currant">Currant</option>
    <option value="cherry">Cherry</option>
    <option value="custard apple">Custard apple</option>
    <option value="coconut">Coconut</option>
    <option value="cranberry">Cranberry</option>
    <option value="date">Date</option>
    <option value="dragonfruit">Dragonfruit</option>
    <option value="durian">Durian</option>
    <option value="elderberry">Elderberry</option>
    <option value="fig">Fig</option>
    <option value="gooseberry">Gooseberry</option>
    <option value="grape">Grape</option>
    <option value="grapefruit">Grapefruit</option>
    <option value="guava">Guava</option>
    <option value="honeydew melon">Honeydew melon</option>
    <option value="jackfruit">Jackfruit</option>
    <option value="kiwifruit">Kiwifruit</option>
    <option value="kumquat">Kumquat</option>
    <option value="lemon">Lemon</option>
    <option value="lime">Lime</option>
    <option value="lychee">Lychee</option>
    <option value="mandarine">Mandarine</option>
    <option value="mango">Mango</option>
    <option value="mangosteen">Mangosteen</option>
    <option value="marionberry">Marionberry</option>
    <option value="nectarine">Nectarine</option>
    <option selected="selected" value="orange">Orange</option>
    <option value="papaya">Papaya</option>
    <option value="passionfruit">Passionfruit</option>
    <option value="peach">Peach</option>
    <option value="pear">Pear</option>
    <option value="persimmon">Persimmon</option>
    <option value="plantain">Plantain</option>
    <option value="plum">Plum</option>
    <option value="pineapple">Pineapple</option>
    <option value="pluot">Pluot</option>
    <option value="pomegranate">Pomegranate</option>
    <option value="pomelo">Pomelo</option>
    <option value="quince">Quince</option>
    <option value="raspberry">Raspberry</option>
    <option value="rambutan">Rambutan</option>
    <option value="soursop">Soursop</option>
    <option value="starfruit">Starfruit</option>
    <option value="strawberry">Strawberry</option>
    <option value="tamarind">Tamarind</option>
    <option value="tangelo">Tangelo</option>
    <option value="tangerine">Tangerine</option>
    <option value="ugli fruit">Ugli fruit</option>
    <option value="watermelon">Watermelon</option>
    <option value="yuzu">Yuzu</option>
    <option value="white currant">White currant</option></select>
  <template x-if="$combobox.isLoaded">
    <div class="relative mt-2">
      <div class="flex w-full">
        <input x-combobox:input class="pr-10 p-2 bg-white w-full h-10 rounded-sm border focus:outline focus:outline-offset-4 focus:outline-4 focus:!outline-blue-800 selection:!rounded-t-sm data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4" placeholder="- Select or Type -">
        <div class="absolute z-10 inset-y-0 right-0 flex">
          <button x-combobox:toggle class="h-full px-1 flex items-center focus:outline focus:-outline-offset-4 focus:outline-4 focus:outline-blue-40v/60 bg-transparent">
            <template x-if="$combobox.isOpen">
              <img alt="chevron up icon" class="size-[20px]" src="/assets/icons/arrow_open-285fae6c.svg" />
            </template>
            <template x-if="!$combobox.isOpen">
              <img alt="chevron down icon" class="size-[20px]" src="/assets/icons/arrow_closed-bb3c1d86.svg" />
            </template>
          </button>
        </div>
      </div>
      <ul x-combobox:list class="!list-none !absolute border !border-t-0 border-gray-60 bg-white max-h-52 overflow-y-scroll w-full z-10">
        <template x-for="option in $combobox.allOptions" :key="option.value">
          <li x-combobox:item class="p-2 !m-0 cursor-pointer aria-selected:bg-blue-60v data-active:outline data-active:outline-4 data-active:!outline-blue-800 data-active:-outline-offset-4" x-text="option.label"></li>
        </template>
        <template x-if="$combobox.noResults">
          <li class="p-2 cursor-not-allowed">
            No results found
          </li>
        </template>
      </ul>
    </div>
  </template>
</div>
1
2
custom_model = TestModel.new(favorite_fruits: "orange")
render(ComboboxComponent.new(form: form(model: custom_model), method: :favorite_fruits, label: I18n.t(:favorite_fruits), help_text: I18n.t(:fruit_help_text), collection: self.class.combobox_fruit_options, item_value_method: :value, item_label_method: :label))

No notes provided.

No params configured.