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
<!-- Default -->
<fieldset class="fieldset-group"   x-data x-init="Alpine.store('pineapple_pizza_preference_default', '');">
  <legend class="sr-only">Do you like pineapple on pizza?</legend>
  <div class="cfa-stack-med"><input type="hidden" name="radio_default[pineapple_pizza_preference]" value="" autocomplete="off" />
    <div class="form_item"><input x-model="$store.pineapple_pizza_preference_default" class="cfa-radio" id="radio_default_pineapple_pizza_preference_yes_default" type="radio" value="yes" name="radio_default[pineapple_pizza_preference]" /><label for="radio_default_pineapple_pizza_preference_yes_default">Yes</label></div>
    <div class="form_item"><input x-model="$store.pineapple_pizza_preference_default" class="cfa-radio" id="radio_default_pineapple_pizza_preference_no_default" type="radio" value="no" name="radio_default[pineapple_pizza_preference]" /><label for="radio_default_pineapple_pizza_preference_no_default">No</label></div>
  </div>
</fieldset>
<!-- Horizontal -->
<fieldset class="fieldset-group"   x-data x-init="Alpine.store('pineapple_pizza_preference_horizontal', '');">
  <legend class="sr-only">Do you like pineapple on pizza?</legend>
  <div class="flex items-center gap-cfa-lg"><input type="hidden" name="radio_horizontal[pineapple_pizza_preference]" value="" autocomplete="off" />
    <div class="form_item"><input x-model="$store.pineapple_pizza_preference_horizontal" class="cfa-radio" id="radio_horizontal_pineapple_pizza_preference_yes_horizontal" type="radio" value="yes" name="radio_horizontal[pineapple_pizza_preference]" /><label for="radio_horizontal_pineapple_pizza_preference_yes_horizontal">Yes</label></div>
    <div class="form_item"><input x-model="$store.pineapple_pizza_preference_horizontal" class="cfa-radio" id="radio_horizontal_pineapple_pizza_preference_no_horizontal" type="radio" value="no" name="radio_horizontal[pineapple_pizza_preference]" /><label for="radio_horizontal_pineapple_pizza_preference_no_horizontal">No</label></div>
  </div>
</fieldset>
<!-- With Legend -->
<fieldset class="fieldset-group"   x-data x-init="Alpine.store('pineapple_pizza_preference_with_legend', '');">
  <legend class="sr-only">Radio group label</legend>
  <div class="cfa-stack-med"><input type="hidden" name="radio_with_legend[pineapple_pizza_preference]" value="" autocomplete="off" />
    <div class="form_item"><input x-model="$store.pineapple_pizza_preference_with_legend" class="cfa-radio" id="radio_with_legend_pineapple_pizza_preference_yes_with_legend" type="radio" value="yes" name="radio_with_legend[pineapple_pizza_preference]" /><label for="radio_with_legend_pineapple_pizza_preference_yes_with_legend">Yes</label></div>
    <div class="form_item"><input x-model="$store.pineapple_pizza_preference_with_legend" class="cfa-radio" id="radio_with_legend_pineapple_pizza_preference_no_with_legend" type="radio" value="no" name="radio_with_legend[pineapple_pizza_preference]" /><label for="radio_with_legend_pineapple_pizza_preference_no_with_legend">No</label></div>
  </div>
</fieldset>
<!-- Horizontal With Legend -->
<fieldset class="fieldset-group"   x-data x-init="Alpine.store('pineapple_pizza_preference_horizontal_with_legend', '');">
  <legend class="sr-only">Radio group label</legend>
  <div class="flex items-center gap-cfa-lg"><input type="hidden" name="radio_horizontal_with_legend[pineapple_pizza_preference]" value="" autocomplete="off" />
    <div class="form_item"><input x-model="$store.pineapple_pizza_preference_horizontal_with_legend" class="cfa-radio" id="radio_horizontal_with_legend_pineapple_pizza_preference_yes_horizontal_with_legend" type="radio" value="yes" name="radio_horizontal_with_legend[pineapple_pizza_preference]" /><label for="radio_horizontal_with_legend_pineapple_pizza_preference_yes_horizontal_with_legend">Yes</label></div>
    <div class="form_item"><input x-model="$store.pineapple_pizza_preference_horizontal_with_legend" class="cfa-radio" id="radio_horizontal_with_legend_pineapple_pizza_preference_no_horizontal_with_legend" type="radio" value="no" name="radio_horizontal_with_legend[pineapple_pizza_preference]" /><label for="radio_horizontal_with_legend_pineapple_pizza_preference_no_horizontal_with_legend">No</label></div>
  </div>
</fieldset>
<!-- Prefilled -->
<fieldset class="fieldset-group"   x-data x-init="Alpine.store('pineapple_pizza_preference_prefilled', 'yes');">
  <legend class="sr-only">Do you like pineapple on pizza?</legend>
  <div class="cfa-stack-med"><input type="hidden" name="radio_prefilled[pineapple_pizza_preference]" value="" autocomplete="off" />
    <div class="form_item"><input x-model="$store.pineapple_pizza_preference_prefilled" class="cfa-radio" id="radio_prefilled_pineapple_pizza_preference_yes_prefilled" type="radio" value="yes" checked="checked" name="radio_prefilled[pineapple_pizza_preference]" /><label for="radio_prefilled_pineapple_pizza_preference_yes_prefilled">Yes</label></div>
    <div class="form_item"><input x-model="$store.pineapple_pizza_preference_prefilled" class="cfa-radio" id="radio_prefilled_pineapple_pizza_preference_no_prefilled" type="radio" value="no" name="radio_prefilled[pineapple_pizza_preference]" /><label for="radio_prefilled_pineapple_pizza_preference_no_prefilled">No</label></div>
  </div>
</fieldset>
<!-- With Error -->
<fieldset class="fieldset-group"  aria-describedby="radio_with_error_pineapple_pizza_preference_error" x-data x-init="Alpine.store('pineapple_pizza_preference_with_error', '');">
  <legend class="sr-only">Do you like pineapple on pizza?</legend>
  <div class="cfa-stack-med"><input type="hidden" name="radio_with_error[pineapple_pizza_preference]" value="" autocomplete="off" />
    <div class="form_item"><span class="field_with_errors"><input x-model="$store.pineapple_pizza_preference_with_error" class="cfa-radio cfa-radio--error" id="radio_with_error_pineapple_pizza_preference_yes_with_error" type="radio" value="yes" name="radio_with_error[pineapple_pizza_preference]" /></span><label for="radio_with_error_pineapple_pizza_preference_yes_with_error">Yes</label></div>
    <div class="form_item"><span class="field_with_errors"><input x-model="$store.pineapple_pizza_preference_with_error" class="cfa-radio cfa-radio--error" id="radio_with_error_pineapple_pizza_preference_no_with_error" type="radio" value="no" name="radio_with_error[pineapple_pizza_preference]" /></span><label for="radio_with_error_pineapple_pizza_preference_no_with_error">No</label></div>
  </div>
    
  <div class="mt-cfa-sm">
    <p id="radio_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="24" height="24" 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>
<!-- With Warning -->
<fieldset class="fieldset-group"  aria-describedby="radio_with_warning_pineapple_pizza_preference_warning" x-data x-init="Alpine.store('pineapple_pizza_preference_with_warning', '');">
  <legend class="sr-only">Do you like pineapple on pizza?</legend>
  <div class="cfa-stack-med"><input type="hidden" name="radio_with_warning[pineapple_pizza_preference]" value="" autocomplete="off" />
    <div class="form_item"><input x-model="$store.pineapple_pizza_preference_with_warning" class="cfa-radio cfa-radio--warning" id="radio_with_warning_pineapple_pizza_preference_yes_with_warning" type="radio" value="yes" name="radio_with_warning[pineapple_pizza_preference]" /><label for="radio_with_warning_pineapple_pizza_preference_yes_with_warning">Yes</label></div>
    <div class="form_item"><input x-model="$store.pineapple_pizza_preference_with_warning" class="cfa-radio cfa-radio--warning" id="radio_with_warning_pineapple_pizza_preference_no_with_warning" type="radio" value="no" name="radio_with_warning[pineapple_pizza_preference]" /><label for="radio_with_warning_pineapple_pizza_preference_no_with_warning">No</label></div>
  </div>
    
  <div class="mt-cfa-sm">
    <p id="radio_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="24" height="24" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#warning"></use></svg>
      </span>
      <span>Message goes here.</span>
    </p>
  </div>
</fieldset>
<!-- With Error And Warning -->
<fieldset class="fieldset-group"  aria-describedby="radio_with_error_and_warning_pineapple_pizza_preference_error radio_with_error_and_warning_pineapple_pizza_preference_warning" x-data x-init="Alpine.store('pineapple_pizza_preference_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_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_with_error_and_warning" class="cfa-radio cfa-radio--error" id="radio_with_error_and_warning_pineapple_pizza_preference_yes_with_error_and_warning" type="radio" value="yes" name="radio_with_error_and_warning[pineapple_pizza_preference]" /></span><label for="radio_with_error_and_warning_pineapple_pizza_preference_yes_with_error_and_warning">Yes</label></div>
    <div class="form_item"><span class="field_with_errors"><input x-model="$store.pineapple_pizza_preference_with_error_and_warning" class="cfa-radio cfa-radio--error" id="radio_with_error_and_warning_pineapple_pizza_preference_no_with_error_and_warning" type="radio" value="no" name="radio_with_error_and_warning[pineapple_pizza_preference]" /></span><label for="radio_with_error_and_warning_pineapple_pizza_preference_no_with_error_and_warning">No</label></div>
  </div>
    
  <div class="mt-cfa-sm">
    <p id="radio_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="24" height="24" 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_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="24" height="24" 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
20
21
22
23
24
25
26
27
28
# Default
render(RadioButtonsComponent.new(form: form(scope: :radio_default), method: :pineapple_pizza_preference, collection: self.class.yes_no_options, item_value_method: :value, item_label_method: :label, scope: "default", legend: "Do you like pineapple on pizza?"))
# Horizontal
render(RadioButtonsComponent.new(form: form(scope: :radio_horizontal), method: :pineapple_pizza_preference, collection: self.class.yes_no_options, item_value_method: :value, item_label_method: :label, layout: :horizontal, scope: "horizontal", legend: "Do you like pineapple on pizza?"))
# With Legend
render(RadioButtonsComponent.new(form: form(scope: :radio_with_legend), method: :pineapple_pizza_preference, collection: self.class.yes_no_options, item_value_method: :value, item_label_method: :label, legend: "Radio group label", scope: "with_legend"))
# Horizontal With Legend
render(RadioButtonsComponent.new(form: form(scope: :radio_horizontal_with_legend), method: :pineapple_pizza_preference, collection: self.class.yes_no_options, item_value_method: :value, item_label_method: :label, layout: :horizontal, legend: "Radio group label", scope: "horizontal_with_legend"))
# Prefilled
custom_model = TestModel.new(pineapple_pizza_preference: "yes")
render(RadioButtonsComponent.new(form: form(model: custom_model, scope: :radio_prefilled), method: :pineapple_pizza_preference, collection: self.class.yes_no_options, item_value_method: :value, item_label_method: :label, scope: "prefilled", legend: "Do you like pineapple on pizza?"))
# With Error
custom_model = TestModel.new
custom_model.valid?
render(RadioButtonsComponent.new(form: form(model: custom_model, scope: :radio_with_error), method: :pineapple_pizza_preference, collection: self.class.yes_no_options, item_value_method: :value, item_label_method: :label, scope: "with_error", legend: "Do you like pineapple on pizza?"))
# With Warning
render(RadioButtonsComponent.new(form: form(scope: :radio_with_warning), method: :pineapple_pizza_preference, collection: self.class.yes_no_options, item_value_method: :value, item_label_method: :label, warning_message: "Message goes here.", scope: "with_warning", legend: "Do you like pineapple on pizza?"))
# With Error And Warning
custom_model = TestModel.new
custom_model.valid?
render(RadioButtonsComponent.new(form: form(model: custom_model, scope: :radio_with_error_and_warning), method: :pineapple_pizza_preference, collection: self.class.yes_no_options, item_value_method: :value, item_label_method: :label, warning_message: "Message goes here.", scope: "with_error_and_warning", legend: "Do you like pineapple on pizza?"))

No notes provided.

No params configured.