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
<form action="/" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="M0e1f-FgzpijYGmLTCEWqcE12ACTBnIXRe-W1W0BDnSuHEdqvO3WXB16URpBfXHPxnBv7-QCj-NYqIB17XO5Cg" autocomplete="off" />
  <h2 id="claimed-question-heading">
    Have you been claimed by anyone else on a tax return for 2024?
  </h2>
  <p>
    Explanation of what it means to be claimed.
  </p>
  <div class="cfa-card bg-white border border-border-secondary rounded-lg p-cfa-lg">
    <fieldset class="fieldset-group" aria-labelledby="claimed-question-heading"  x-data x-init="Alpine.store('pineapple_pizza_preference', '');">
      <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>
  <div class="cfa-card bg-white border border-border-secondary rounded-lg p-cfa-lg">
    <fieldset class="fieldset-group"   x-data x-init="Alpine.store('pineapple_pizza_preference', '');">
      <legend class="sr-only">Are you filing with your spouse (married filing jointly)?</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>
  <div class="cfa-card bg-white border border-border-secondary rounded-lg p-cfa-lg">
    <div class="cfa-stack-sm">
      <label class="label block" for="form_component_preview_test_model_first_name">First name</label>
      <input class="w-full max-w-sm" aria-required="true" type="text" name="form_component_preview_test_model[first_name]" id="form_component_preview_test_model_first_name" />
    </div>
  </div>
  <div class="cfa-card bg-white border border-border-secondary rounded-lg p-cfa-lg">
    <div class="cfa-stack-sm">
      <label class="label block" for="form_component_preview_test_model_middle_name">Middle name <span class="font-normal">(optional)</span></label>
      <input class="w-full max-w-sm" type="text" name="form_component_preview_test_model[middle_name]" id="form_component_preview_test_model_middle_name" />
    </div>
  </div>
  <div class="cfa-card bg-white border border-border-secondary rounded-lg p-cfa-lg">
    <div class="cfa-stack-sm">
      <label class="label block" for="form_component_preview_test_model_last_name">Last name</label>
      <p id="form_component_preview_test_model_last_name_help" class="help_text">
        Help text
      </p>
      <input class="w-full max-w-sm" aria-required="true" aria-describedby="form_component_preview_test_model_last_name_help" type="text" name="form_component_preview_test_model[last_name]" id="form_component_preview_test_model_last_name" />
    </div>
  </div>
  <div class="cfa-card bg-white border border-border-secondary rounded-lg p-cfa-lg">
    <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>
  <a class="btn btn--primary btn--small" role="button" x-on:keydown.space.prevent="$el.click()" href="#">    Review answers
  </a>
  <a class="btn btn--secondary btn--small" role="button" x-on:keydown.space.prevent="$el.click()" href="#">    Start over
  </a>
  <button name="commit" type="submit" class="btn btn--large btn--primary">Continue</button>
</form>
1
render("non_component_previews/form_example")

No notes provided.

No params configured.