<!-- Radio Buttons -->
<form action="/" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="JdM3emfPqmD2PS8pgfGGia5F_3Llx0i7O9oQv3EJZJG4iMVvOkKypEgnF7iMreHvqQBInZLDtU8mnQYf8XvT7w" autocomplete="off" />
  <fieldset class="fieldset-group"   x-data x-init="Alpine.store('pineapple_pizza_preference', '');">
    <legend class="sr-only">Do you like pineapple on pizza?</legend>
    <div class="cfa-stack-med"><input type="hidden" name="form_component_preview_test_model[pineapple_pizza_preference]" value="" autocomplete="off" />
      <div class="form_item"><input x-model="$store.pineapple_pizza_preference" class="cfa-radio" type="radio" value="yes" name="form_component_preview_test_model[pineapple_pizza_preference]" id="form_component_preview_test_model_pineapple_pizza_preference_yes" /><label for="form_component_preview_test_model_pineapple_pizza_preference_yes">Yes</label></div>
      <div class="form_item"><input x-model="$store.pineapple_pizza_preference" class="cfa-radio" type="radio" value="no" name="form_component_preview_test_model[pineapple_pizza_preference]" id="form_component_preview_test_model_pineapple_pizza_preference_no" /><label for="form_component_preview_test_model_pineapple_pizza_preference_no">No</label></div>
    </div>
  </fieldset>
  <div class="contents"
     x-data="{condition: false, announcement: '', ready: false, announceTimer: null}"
     x-effect="condition = $store.pineapple_pizza_preference === 'yes' ||
                           (Array.isArray($store.pineapple_pizza_preference) && $store.pineapple_pizza_preference.includes('yes'))"
     x-init="$nextTick(() => ready = true);
    $watch('condition', visible => {
    if (!ready) return;
    const message = 'Followup banana question is now ' + (visible ? 'visible' : 'hidden');
    clearTimeout(announceTimer);
    announcement = '';
    announceTimer = setTimeout(() => {
    announcement = message;
    announceTimer = setTimeout(() => announcement = '', 5000);
    }, 50);
    })">
    <p class="sr-only" aria-live="assertive" aria-atomic="true" role="alert" x-text="announcement"></p>
    <div x-cloak x-show="condition" class="cfa-stack-med">
      But why!?
    </div>
  </div>
</form>
<!-- Checkboxes -->
<form action="/" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="HYYTqL9807xErlgvRVetVEjsUc9YD5US49zV61GrXN6A3eG94vHLePq0YL5IC8oyT6nmIC8LaOb-m8NL0dnroA" autocomplete="off" />
  <fieldset class="fieldset-group"   x-data x-init="Alpine.store('favorite_fruits', []);">
    <legend class="sr-only">What are your favorite fruits?</legend>
    <div class="cfa-stack-med">
      <input type="hidden" name="form_component_preview_test_model[favorite_fruits][]" value="" autocomplete="off" />
      <div class="form_item"><span class="cfa-checkbox-wrap relative inline-flex h-6 w-6"><input x-model="$store.favorite_fruits" class="cfa-checkbox h-6 w-6 rounded" type="checkbox" value="orange" name="form_component_preview_test_model[favorite_fruits][]" id="form_component_preview_test_model_favorite_fruits_orange" /><svg class="cfa-icon absolute inset-0 pointer-events-none text-icon-default" width="24" height="24" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#check"></use></svg></span><label for="form_component_preview_test_model_favorite_fruits_orange">Orange</label></div>
      <div class="form_item"><span class="cfa-checkbox-wrap relative inline-flex h-6 w-6"><input x-model="$store.favorite_fruits" class="cfa-checkbox h-6 w-6 rounded" type="checkbox" value="banana" name="form_component_preview_test_model[favorite_fruits][]" id="form_component_preview_test_model_favorite_fruits_banana" /><svg class="cfa-icon absolute inset-0 pointer-events-none text-icon-default" width="24" height="24" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#check"></use></svg></span><label for="form_component_preview_test_model_favorite_fruits_banana">Banana</label></div>
      <div class="form_item"><span class="cfa-checkbox-wrap relative inline-flex h-6 w-6"><input x-model="$store.favorite_fruits" class="cfa-checkbox h-6 w-6 rounded" type="checkbox" value="apple" name="form_component_preview_test_model[favorite_fruits][]" id="form_component_preview_test_model_favorite_fruits_apple" /><svg class="cfa-icon absolute inset-0 pointer-events-none text-icon-default" width="24" height="24" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#check"></use></svg></span><label for="form_component_preview_test_model_favorite_fruits_apple">Apple</label></div>
  </div>
    <div class="mt-cfa-sm">
    </div>
  </fieldset>
  <div class="contents"
     x-data="{condition: false, announcement: '', ready: false, announceTimer: null}"
     x-effect="condition = $store.favorite_fruits === 'banana' ||
                           (Array.isArray($store.favorite_fruits) && $store.favorite_fruits.includes('banana'))"
     x-init="$nextTick(() => ready = true);
    $watch('condition', visible => {
    if (!ready) return;
    const message = 'Followup banana question is now ' + (visible ? 'visible' : 'hidden');
    clearTimeout(announceTimer);
    announcement = '';
    announceTimer = setTimeout(() => {
    announcement = message;
    announceTimer = setTimeout(() => announcement = '', 5000);
    }, 50);
    })">
    <p class="sr-only" aria-live="assertive" aria-atomic="true" role="alert" x-text="announcement"></p>
    <div x-cloak x-show="condition" class="cfa-stack-med">
      But why!?
    </div>
  </div>
</form>
<!-- Select -->
<form action="/" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="SsmTkJmpepwjTn_4ZklWmInU1sXAuokzhnBNIFLnxyDXkmGFxCRiWJ1UR2lrFTH-jpFhKre-dMebN1uA0pVwXg" autocomplete="off" />
  <div class="cfa-stack-sm" x-data x-init="Alpine.store('favorite_fruits', '');">
    <label id="form_component_preview_test_model_favorite_fruits-label" class="label block" for="form_component_preview_test_model_favorite_fruits">Favorite fruits</label>
    <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="false"
      
      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>
  </div>
  <div class="contents"
     x-data="{condition: false, announcement: '', ready: false, announceTimer: null}"
     x-effect="condition = $store.favorite_fruits === 'banana' ||
                           (Array.isArray($store.favorite_fruits) && $store.favorite_fruits.includes('banana'))"
     x-init="$nextTick(() => ready = true);
    $watch('condition', visible => {
    if (!ready) return;
    const message = 'Followup banana question is now ' + (visible ? 'visible' : 'hidden');
    clearTimeout(announceTimer);
    announcement = '';
    announceTimer = setTimeout(() => {
    announcement = message;
    announceTimer = setTimeout(() => announcement = '', 5000);
    }, 50);
    })">
    <p class="sr-only" aria-live="assertive" aria-atomic="true" role="alert" x-text="announcement"></p>
    <div x-cloak x-show="condition" class="cfa-stack-med">
      But why!?
    </div>
  </div>
</form>
<!-- Combobox -->
<form action="/" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="HUeVRv-tFZYrkKLCm_GC97s-kgnNc4-byd3l-Eo-bhCAHGdToiANUpWKmlOWreWRvHsl5rp3cm_UmvNYykzZbg" autocomplete="off" />
  <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)">
    <label class="label block" x-combobox:label="" for="form_component_preview_test_model_favorite_fruits">Favorite fruits</label>
    <select x-combobox:values="" aria-invalid="false" aria-required="true" name="form_component_preview_test_model[favorite_fruits]" id="form_component_preview_test_model_favorite_fruits"><option value="">- Select or Type -</option>
      <option value="orange">Orange</option>
      <option value="banana">Banana</option>
      <option value="apple">Apple</option></select>
    <template x-if="$combobox.isLoaded">
      <div class="relative">
        <div class="cfa-combobox__field flex w-full">
          <input
          x-combobox:input
          type="text"
          aria-invalid="false"
          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>
    </div>
    <div class="contents"
     x-data="{condition: false, announcement: '', ready: false, announceTimer: null}"
     x-effect="condition = $store.favorite_fruits === 'banana' ||
                           (Array.isArray($store.favorite_fruits) && $store.favorite_fruits.includes('banana'))"
     x-init="$nextTick(() => ready = true);
      $watch('condition', visible => {
      if (!ready) return;
      const message = 'Followup banana question is now ' + (visible ? 'visible' : 'hidden');
      clearTimeout(announceTimer);
      announcement = '';
      announceTimer = setTimeout(() => {
      announcement = message;
      announceTimer = setTimeout(() => announcement = '', 5000);
      }, 50);
      })">
      <p class="sr-only" aria-live="assertive" aria-atomic="true" role="alert" x-text="announcement"></p>
      <div x-cloak x-show="condition" class="cfa-stack-med">
        But why!?
      </div>
    </div>
  </form>