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
<!-- Small Default -->
<fieldset class="fieldset-group"   x-data x-init="Alpine.store('pineapple_pizza_preference_small_default', '');">
  <legend class="sr-only">Do you like pineapple on pizza?</legend>
  <div class="cfa-stack-med"><input type="hidden" name="radio_small_default[pineapple_pizza_preference]" value="" autocomplete="off" />
    <div class="form_item"><input x-model="$store.pineapple_pizza_preference_small_default" class="cfa-radio cfa-radio--small" id="radio_small_default_pineapple_pizza_preference_yes_small_default" type="radio" value="yes" name="radio_small_default[pineapple_pizza_preference]" /><label for="radio_small_default_pineapple_pizza_preference_yes_small_default" class="type-progress-text">Yes</label></div>
    <div class="form_item"><input x-model="$store.pineapple_pizza_preference_small_default" class="cfa-radio cfa-radio--small" id="radio_small_default_pineapple_pizza_preference_no_small_default" type="radio" value="no" name="radio_small_default[pineapple_pizza_preference]" /><label for="radio_small_default_pineapple_pizza_preference_no_small_default" class="type-progress-text">No</label></div>
  </div>
</fieldset>
<!-- Small Prefilled -->
<fieldset class="fieldset-group"   x-data x-init="Alpine.store('pineapple_pizza_preference_small_prefilled', 'yes');">
  <legend class="sr-only">Do you like pineapple on pizza?</legend>
  <div class="cfa-stack-med"><input type="hidden" name="radio_small_prefilled[pineapple_pizza_preference]" value="" autocomplete="off" />
    <div class="form_item"><input x-model="$store.pineapple_pizza_preference_small_prefilled" class="cfa-radio cfa-radio--small" id="radio_small_prefilled_pineapple_pizza_preference_yes_small_prefilled" type="radio" value="yes" checked="checked" name="radio_small_prefilled[pineapple_pizza_preference]" /><label for="radio_small_prefilled_pineapple_pizza_preference_yes_small_prefilled" class="type-progress-text">Yes</label></div>
    <div class="form_item"><input x-model="$store.pineapple_pizza_preference_small_prefilled" class="cfa-radio cfa-radio--small" id="radio_small_prefilled_pineapple_pizza_preference_no_small_prefilled" type="radio" value="no" name="radio_small_prefilled[pineapple_pizza_preference]" /><label for="radio_small_prefilled_pineapple_pizza_preference_no_small_prefilled" class="type-progress-text">No</label></div>
  </div>
</fieldset>
<!-- Small With Error -->
<fieldset class="fieldset-group"  aria-describedby="radio_small_with_error_pineapple_pizza_preference_error" x-data x-init="Alpine.store('pineapple_pizza_preference_small_with_error', '');">
  <legend class="sr-only">Do you like pineapple on pizza?</legend>
  <div class="cfa-stack-med"><input type="hidden" name="radio_small_with_error[pineapple_pizza_preference]" value="" autocomplete="off" />
    <div class="form_item"><span class="field_with_errors"><input x-model="$store.pineapple_pizza_preference_small_with_error" class="cfa-radio cfa-radio--small cfa-radio--error" id="radio_small_with_error_pineapple_pizza_preference_yes_small_with_error" type="radio" value="yes" name="radio_small_with_error[pineapple_pizza_preference]" /></span><label for="radio_small_with_error_pineapple_pizza_preference_yes_small_with_error" class="type-progress-text">Yes</label></div>
    <div class="form_item"><span class="field_with_errors"><input x-model="$store.pineapple_pizza_preference_small_with_error" class="cfa-radio cfa-radio--small cfa-radio--error" id="radio_small_with_error_pineapple_pizza_preference_no_small_with_error" type="radio" value="no" name="radio_small_with_error[pineapple_pizza_preference]" /></span><label for="radio_small_with_error_pineapple_pizza_preference_no_small_with_error" class="type-progress-text">No</label></div>
  </div>
    
  <div class="mt-cfa-sm">
    <p id="radio_small_with_error_pineapple_pizza_preference_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="16" height="16" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#error"></use></svg>
      </span>
      <span>
        Pineapple pizza preference can't be blank
      </span>
    </p>
  </div>
</fieldset>
<!-- Small With Warning -->
<fieldset class="fieldset-group"  aria-describedby="radio_small_with_warning_pineapple_pizza_preference_warning" x-data x-init="Alpine.store('pineapple_pizza_preference_small_with_warning', '');">
  <legend class="sr-only">Do you like pineapple on pizza?</legend>
  <div class="cfa-stack-med"><input type="hidden" name="radio_small_with_warning[pineapple_pizza_preference]" value="" autocomplete="off" />
    <div class="form_item"><input x-model="$store.pineapple_pizza_preference_small_with_warning" class="cfa-radio cfa-radio--small cfa-radio--warning" id="radio_small_with_warning_pineapple_pizza_preference_yes_small_with_warning" type="radio" value="yes" name="radio_small_with_warning[pineapple_pizza_preference]" /><label for="radio_small_with_warning_pineapple_pizza_preference_yes_small_with_warning" class="type-progress-text">Yes</label></div>
    <div class="form_item"><input x-model="$store.pineapple_pizza_preference_small_with_warning" class="cfa-radio cfa-radio--small cfa-radio--warning" id="radio_small_with_warning_pineapple_pizza_preference_no_small_with_warning" type="radio" value="no" name="radio_small_with_warning[pineapple_pizza_preference]" /><label for="radio_small_with_warning_pineapple_pizza_preference_no_small_with_warning" class="type-progress-text">No</label></div>
  </div>
    
  <div class="mt-cfa-sm">
    <p id="radio_small_with_warning_pineapple_pizza_preference_warning" class="form_warning 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-warning" width="16" height="16" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#warning"></use></svg>
      </span>
      <span>Message goes here.</span>
    </p>
  </div>
</fieldset>
<!-- Small With Error And Warning -->
<fieldset class="fieldset-group"  aria-describedby="radio_small_with_error_and_warning_pineapple_pizza_preference_error radio_small_with_error_and_warning_pineapple_pizza_preference_warning" x-data x-init="Alpine.store('pineapple_pizza_preference_small_with_error_and_warning', '');">
  <legend class="sr-only">Do you like pineapple on pizza?</legend>
  <div class="cfa-stack-med"><input type="hidden" name="radio_small_with_error_and_warning[pineapple_pizza_preference]" value="" autocomplete="off" />
    <div class="form_item"><span class="field_with_errors"><input x-model="$store.pineapple_pizza_preference_small_with_error_and_warning" class="cfa-radio cfa-radio--small cfa-radio--error" id="radio_small_with_error_and_warning_pineapple_pizza_preference_yes_small_with_error_and_warning" type="radio" value="yes" name="radio_small_with_error_and_warning[pineapple_pizza_preference]" /></span><label for="radio_small_with_error_and_warning_pineapple_pizza_preference_yes_small_with_error_and_warning" class="type-progress-text">Yes</label></div>
    <div class="form_item"><span class="field_with_errors"><input x-model="$store.pineapple_pizza_preference_small_with_error_and_warning" class="cfa-radio cfa-radio--small cfa-radio--error" id="radio_small_with_error_and_warning_pineapple_pizza_preference_no_small_with_error_and_warning" type="radio" value="no" name="radio_small_with_error_and_warning[pineapple_pizza_preference]" /></span><label for="radio_small_with_error_and_warning_pineapple_pizza_preference_no_small_with_error_and_warning" class="type-progress-text">No</label></div>
  </div>
    
  <div class="mt-cfa-sm">
    <p id="radio_small_with_error_and_warning_pineapple_pizza_preference_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="16" height="16" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#error"></use></svg>
      </span>
      <span>
        Pineapple pizza preference can't be blank
      </span>
    </p>
    <p id="radio_small_with_error_and_warning_pineapple_pizza_preference_warning" class="form_warning 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-warning" width="16" height="16" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#warning"></use></svg>
      </span>
      <span>Message goes here.</span>
    </p>
  </div>
</fieldset>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Small Default
render(RadioButtonsComponent.new(form: form(scope: :radio_small_default), method: :pineapple_pizza_preference, collection: self.class.yes_no_options, item_value_method: :value, item_label_method: :label, small: true, scope: "small_default", legend: "Do you like pineapple on pizza?"))
# Small Prefilled
custom_model = TestModel.new(pineapple_pizza_preference: "yes")
render(RadioButtonsComponent.new(form: form(model: custom_model, scope: :radio_small_prefilled), method: :pineapple_pizza_preference, collection: self.class.yes_no_options, item_value_method: :value, item_label_method: :label, small: true, scope: "small_prefilled", legend: "Do you like pineapple on pizza?"))
# Small With Error
custom_model = TestModel.new
custom_model.valid?
render(RadioButtonsComponent.new(form: form(model: custom_model, scope: :radio_small_with_error), method: :pineapple_pizza_preference, collection: self.class.yes_no_options, item_value_method: :value, item_label_method: :label, small: true, scope: "small_with_error", legend: "Do you like pineapple on pizza?"))
# Small With Warning
render(RadioButtonsComponent.new(form: form(scope: :radio_small_with_warning), method: :pineapple_pizza_preference, collection: self.class.yes_no_options, item_value_method: :value, item_label_method: :label, small: true, warning_message: "Message goes here.", scope: "small_with_warning", legend: "Do you like pineapple on pizza?"))
# Small With Error And Warning
custom_model = TestModel.new
custom_model.valid?
render(RadioButtonsComponent.new(form: form(model: custom_model, scope: :radio_small_with_error_and_warning), method: :pineapple_pizza_preference, collection: self.class.yes_no_options, item_value_method: :value, item_label_method: :label, small: true, warning_message: "Message goes here.", scope: "small_with_error_and_warning", legend: "Do you like pineapple on pizza?"))

No notes provided.

No params configured.