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
<!-- Bordered -->
<fieldset class="fieldset-group"   x-data x-init="Alpine.store('pineapple_pizza_preference_bordered', '');">
  <legend class="sr-only">Do you like pineapple on pizza?</legend>
  <div class="cfa-stack-med"><input type="hidden" name="radio_bordered[pineapple_pizza_preference]" value="" autocomplete="off" />
    <div class="form_item form_item--bordered"><input x-model="$store.pineapple_pizza_preference_bordered" class="cfa-radio" id="radio_bordered_pineapple_pizza_preference_yes_bordered" type="radio" value="yes" name="radio_bordered[pineapple_pizza_preference]" /><label for="radio_bordered_pineapple_pizza_preference_yes_bordered">Yes</label></div>
    <div class="form_item form_item--bordered"><input x-model="$store.pineapple_pizza_preference_bordered" class="cfa-radio" id="radio_bordered_pineapple_pizza_preference_no_bordered" type="radio" value="no" name="radio_bordered[pineapple_pizza_preference]" /><label for="radio_bordered_pineapple_pizza_preference_no_bordered">No</label></div>
  </div>
</fieldset>
<!-- Bordered With Warning -->
<fieldset class="fieldset-group"  aria-describedby="radio_bordered_with_warning_pineapple_pizza_preference_warning" x-data x-init="Alpine.store('pineapple_pizza_preference_bordered_with_warning', '');">
  <legend class="sr-only">Do you like pineapple on pizza?</legend>
  <div class="cfa-stack-med"><input type="hidden" name="radio_bordered_with_warning[pineapple_pizza_preference]" value="" autocomplete="off" />
    <div class="form_item form_item--bordered form_item--warning"><input x-model="$store.pineapple_pizza_preference_bordered_with_warning" class="cfa-radio cfa-radio--warning" id="radio_bordered_with_warning_pineapple_pizza_preference_yes_bordered_with_warning" type="radio" value="yes" name="radio_bordered_with_warning[pineapple_pizza_preference]" /><label for="radio_bordered_with_warning_pineapple_pizza_preference_yes_bordered_with_warning">Yes</label></div>
    <div class="form_item form_item--bordered form_item--warning"><input x-model="$store.pineapple_pizza_preference_bordered_with_warning" class="cfa-radio cfa-radio--warning" id="radio_bordered_with_warning_pineapple_pizza_preference_no_bordered_with_warning" type="radio" value="no" name="radio_bordered_with_warning[pineapple_pizza_preference]" /><label for="radio_bordered_with_warning_pineapple_pizza_preference_no_bordered_with_warning">No</label></div>
  </div>
    
  <div class="mt-cfa-sm">
    <p id="radio_bordered_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>
<!-- Bordered With Error And Warning -->
<fieldset class="fieldset-group"  aria-describedby="radio_bordered_with_error_and_warning_favorite_fruits_error radio_bordered_with_error_and_warning_favorite_fruits_warning" x-data x-init="Alpine.store('favorite_fruits_bordered_with_error_and_warning', '');">
  <legend class="sr-only">Which fruits?</legend>
  <div class="cfa-stack-med"><input type="hidden" name="radio_bordered_with_error_and_warning[favorite_fruits]" value="" autocomplete="off" />
    <div class="form_item form_item--bordered form_item--warning"><span class="field_with_errors"><input x-model="$store.favorite_fruits_bordered_with_error_and_warning" class="cfa-radio cfa-radio--error" id="radio_bordered_with_error_and_warning_favorite_fruits_orange_bordered_with_error_and_warning" type="radio" value="orange" name="radio_bordered_with_error_and_warning[favorite_fruits]" /></span><label for="radio_bordered_with_error_and_warning_favorite_fruits_orange_bordered_with_error_and_warning">Orange</label></div>
    <div class="form_item form_item--bordered form_item--warning"><span class="field_with_errors"><input x-model="$store.favorite_fruits_bordered_with_error_and_warning" class="cfa-radio cfa-radio--error" id="radio_bordered_with_error_and_warning_favorite_fruits_banana_bordered_with_error_and_warning" type="radio" value="banana" name="radio_bordered_with_error_and_warning[favorite_fruits]" /></span><label for="radio_bordered_with_error_and_warning_favorite_fruits_banana_bordered_with_error_and_warning">Banana</label></div>
    <div class="form_item form_item--bordered form_item--warning"><span class="field_with_errors"><input x-model="$store.favorite_fruits_bordered_with_error_and_warning" class="cfa-radio cfa-radio--error" id="radio_bordered_with_error_and_warning_favorite_fruits_apple_bordered_with_error_and_warning" type="radio" value="apple" name="radio_bordered_with_error_and_warning[favorite_fruits]" /></span><label for="radio_bordered_with_error_and_warning_favorite_fruits_apple_bordered_with_error_and_warning">Apple</label></div>
  </div>
    
  <div class="mt-cfa-sm">
    <p id="radio_bordered_with_error_and_warning_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>
    <p id="radio_bordered_with_error_and_warning_favorite_fruits_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
# Bordered
render(RadioButtonsComponent.new(form: form(scope: :radio_bordered), method: :pineapple_pizza_preference, collection: self.class.yes_no_options, item_value_method: :value, item_label_method: :label, bordered: true, scope: "bordered", legend: "Do you like pineapple on pizza?"))
# Bordered With Warning
render(RadioButtonsComponent.new(form: form(scope: :radio_bordered_with_warning), method: :pineapple_pizza_preference, collection: self.class.yes_no_options, item_value_method: :value, item_label_method: :label, bordered: true, warning_message: "Message goes here.", scope: "bordered_with_warning", legend: "Do you like pineapple on pizza?"))
# Bordered With Error And Warning
custom_model = TestModel.new
custom_model.valid?
render(RadioButtonsComponent.new(form: form(model: custom_model, scope: :radio_bordered_with_error_and_warning), method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, bordered: true, warning_message: "Message goes here.", scope: "bordered_with_error_and_warning", legend: "Which fruits?"))

No notes provided.

No params configured.