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
<div class="cfa-stack-sm" x-data x-init="Alpine.store('favorite_fruits', '');">
  <span class="field_with_errors"><label id="form_component_preview_test_model_favorite_fruits-label" class="label block" for="form_component_preview_test_model_favorite_fruits">Favorite fruits</label></span>
  <div
    x-data='cfaSelect({"options":[{"label":"Orange","value":"orange"},{"label":"Banana","value":"banana"},{"label":"Apple","value":"apple"}],"value":null,"label":"- Select -","activeIndex":-1,"disabled":false,"buttonId":"form_component_preview_test_model_favorite_fruits","listboxId":"form_component_preview_test_model_favorite_fruits-listbox"})'
    x-effect="Alpine.store('favorite_fruits', value)"
    class="cfa-custom-select select-field__wrapper"
    @click.outside="closeList()"
  >
    <button
      type="button"
      id="form_component_preview_test_model_favorite_fruits"
      role="combobox"
      x-ref="button"
      aria-haspopup="listbox"
      :aria-controls="listboxId"
      :aria-activedescendant="open ? optionId(activeIndex) : null"
      aria-invalid="true"
      aria-describedby="form_component_preview_test_model_favorite_fruits_error"
      aria-required="true"
      :aria-expanded="open.toString()"
      aria-disabled="false"
      tabindex="0"
      @click="toggleList()"
      @keydown="onButtonKeydown($event)"
    >
      <span x-text="label" class="value"></span>
      <span class="chevron-wrap">
        <span class="chevron-icon">
          <svg viewBox="0 0 24 24" fill="none" width="20" height="20" class="cfa-icon text-icon-default" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.59 8.59003L12 13.17L7.41 8.59003L6 10L12 16L18 10L16.59 8.59003Z" fill="currentColor"/></svg>
        </span>
      </span>
    </button>
    <ul
      :id="listboxId"
      x-show="open"
      x-cloak
      role="listbox"
      :aria-labelledby="'form_component_preview_test_model_favorite_fruits-label'"
    >
      <li
          :id="optionId(0)"
          role="option"
          :data-active="activeIndex === 0 ? '' : null"
          :data-focused="activeIndex === 0 && keyboardActive ? '' : null"
          :aria-selected="value === 'orange'"
          @click="selectAt(0)"
          @mouseenter="activeIndex = 0; keyboardActive = false"
        >
        <span class="option-label">Orange</span>
        <span class="option-check" x-show="value === 'orange'" x-cloak>
          <svg class="cfa-icon" width="20" height="20" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#check"></use></svg>
        </span>
      </li>
      <li
          :id="optionId(1)"
          role="option"
          :data-active="activeIndex === 1 ? '' : null"
          :data-focused="activeIndex === 1 && keyboardActive ? '' : null"
          :aria-selected="value === 'banana'"
          @click="selectAt(1)"
          @mouseenter="activeIndex = 1; keyboardActive = false"
        >
        <span class="option-label">Banana</span>
        <span class="option-check" x-show="value === 'banana'" x-cloak>
          <svg class="cfa-icon" width="20" height="20" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#check"></use></svg>
        </span>
      </li>
      <li
          :id="optionId(2)"
          role="option"
          :data-active="activeIndex === 2 ? '' : null"
          :data-focused="activeIndex === 2 && keyboardActive ? '' : null"
          :aria-selected="value === 'apple'"
          @click="selectAt(2)"
          @mouseenter="activeIndex = 2; keyboardActive = false"
        >
        <span class="option-label">Apple</span>
        <span class="option-check" x-show="value === 'apple'" x-cloak>
          <svg class="cfa-icon" width="20" height="20" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#check"></use></svg>
        </span>
      </li>
    </ul>
    <input autocomplete="off" x-model="value" type="hidden" name="form_component_preview_test_model[favorite_fruits]" />
  </div>
  <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(SelectComponent.new(form: form(model: custom_model), method: :favorite_fruits, label: I18n.t("preview.favorite_fruits"), collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label))

No notes provided.

No params configured.