Cfa Ui 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<div x-data x-combobox class="max-w-sm cfa-stack-sm"
   x-init="Alpine.store('favorite_fruits', '')"
   @change="Alpine.store('favorite_fruits', $event.target.value)">
<span class="field_with_errors"><label class="label block" x-combobox:label="" for="form_component_preview_test_model_favorite_fruits">Favorite fruits</label></span>
<span class="field_with_errors"><select x-combobox:values="" aria-invalid="true" aria-required="true" aria-describedby="form_component_preview_test_model_favorite_fruits_error" name="form_component_preview_test_model[favorite_fruits]" id="form_component_preview_test_model_favorite_fruits"><option value="">- Select or Type -</option>
    <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 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></span>
<template x-if="$combobox.isLoaded">
  <div class="relative">
    <div class="cfa-combobox__field flex w-full">
      <input
        x-combobox:input
        type="text"
        aria-invalid="true"
        class="!pr-10 w-full h-10 data-[invalid]:ring-2 data-[invalid]:ring-error data-[invalid]:border-transparent"
        placeholder="- Select or Type -"
        
      >
        <div class="absolute z-10 inset-y-px right-px flex">
          <button x-combobox:toggle type="button" tabindex="-1" aria-hidden="true" class="cfa-combobox__toggle h-full px-cfa-sm flex items-center bg-transparent">
            <template x-if="$combobox.isOpen">
              <svg class="cfa-icon text-icon-default" width="20" height="20" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#expand_less"></use></svg>
            </template>
            <template x-if="!$combobox.isOpen">
              <svg class="cfa-icon text-icon-default" width="20" height="20" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#expand_more"></use></svg>
            </template>
          </button>
        </div>
      </div>
      <ul x-combobox:list class="cfa-combobox__list !list-none !pl-0 !absolute border !border-t-0 border-border-secondary divide-y divide-border-secondary rounded-b bg-white max-h-72 overflow-y-scroll w-full z-10">
        <template x-for="option in $combobox.allOptions" :key="option.value">
          <li x-combobox:item
            :data-disabled="option.disabled"
            :class="option.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:bg-primary-hover focus-visible:outline-4 focus-visible:-outline-offset-2 focus-visible:outline-focus'"
            class="!h-12 flex items-center !p-cfa-sm !m-0 leading-none aria-selected:bg-primary-hover">
            <span class="block w-full" x-text="option.label"></span>
          </li>
        </template>
        <template x-if="$combobox.noResults">
          <li class="!h-12 flex items-center !p-cfa-sm cursor-not-allowed leading-none">
            <span class="block w-full p-cfa-sm">No results found</span>
          </li>
        </template>
      </ul>
    </div>
  </template>
  <p id="form_component_preview_test_model_favorite_fruits_error" class="form_errors type-body-label flex items-start gap-cfa-sm text-text-body-secondary">
    <span class="flex h-[1lh] shrink-0 items-center">
      <svg class="cfa-icon text-error" width="24" height="24" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#error"></use></svg>
    </span>
    <span>
      Favorite fruits can't be blank
    </span>
  </p>
</div>
1
2
3
custom_model = TestModel.new
custom_model.valid?
render(ComboboxComponent.new(form: form(model: custom_model), method: :favorite_fruits, label: I18n.t("preview.favorite_fruits"), collection: self.class.combobox_fruit_options, item_value_method: :value, item_label_method: :label))

No notes provided.

No params configured.