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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!-- Default -->
<fieldset class="fieldset-group"   x-data x-init="Alpine.store('favorite_fruits_default', []);">
  <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_default" class="cfa-checkbox h-6 w-6 rounded" id="form_component_preview_test_model_favorite_fruits_orange_default" type="checkbox" value="orange" name="form_component_preview_test_model[favorite_fruits][]" /><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_default">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_default" class="cfa-checkbox h-6 w-6 rounded" id="form_component_preview_test_model_favorite_fruits_banana_default" type="checkbox" value="banana" name="form_component_preview_test_model[favorite_fruits][]" /><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_default">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_default" class="cfa-checkbox h-6 w-6 rounded" id="form_component_preview_test_model_favorite_fruits_apple_default" type="checkbox" value="apple" name="form_component_preview_test_model[favorite_fruits][]" /><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_default">Apple</label></div>
  </div>
  <div class="mt-cfa-sm">
  </div>
</fieldset>
<!-- Prefilled -->
<fieldset class="fieldset-group"   x-data x-init="Alpine.store('favorite_fruits_prefilled', ["apple", "orange"]);">
  <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_prefilled" class="cfa-checkbox h-6 w-6 rounded" id="form_component_preview_test_model_favorite_fruits_orange_prefilled" type="checkbox" value="orange" checked="checked" name="form_component_preview_test_model[favorite_fruits][]" /><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_prefilled">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_prefilled" class="cfa-checkbox h-6 w-6 rounded" id="form_component_preview_test_model_favorite_fruits_banana_prefilled" type="checkbox" value="banana" name="form_component_preview_test_model[favorite_fruits][]" /><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_prefilled">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_prefilled" class="cfa-checkbox h-6 w-6 rounded" id="form_component_preview_test_model_favorite_fruits_apple_prefilled" type="checkbox" value="apple" checked="checked" name="form_component_preview_test_model[favorite_fruits][]" /><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_prefilled">Apple</label></div>
  </div>
  <div class="mt-cfa-sm">
  </div>
</fieldset>
<!-- With Error -->
<fieldset class="fieldset-group"  aria-describedby="form_component_preview_test_model_favorite_fruits_error" x-data x-init="Alpine.store('favorite_fruits_with_error', []);">
  <legend class="sr-only">What are your favorite fruits?</legend>
  <div class="cfa-stack-med has-error">
    <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"><span class="field_with_errors"><input x-model="$store.favorite_fruits_with_error" class="cfa-checkbox h-6 w-6 rounded cfa-checkbox--error" id="form_component_preview_test_model_favorite_fruits_orange_with_error" type="checkbox" value="orange" name="form_component_preview_test_model[favorite_fruits][]" /></span><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_with_error">Orange</label></div>
    <div class="form_item"><span class="cfa-checkbox-wrap relative inline-flex h-6 w-6"><span class="field_with_errors"><input x-model="$store.favorite_fruits_with_error" class="cfa-checkbox h-6 w-6 rounded cfa-checkbox--error" id="form_component_preview_test_model_favorite_fruits_banana_with_error" type="checkbox" value="banana" name="form_component_preview_test_model[favorite_fruits][]" /></span><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_with_error">Banana</label></div>
    <div class="form_item"><span class="cfa-checkbox-wrap relative inline-flex h-6 w-6"><span class="field_with_errors"><input x-model="$store.favorite_fruits_with_error" class="cfa-checkbox h-6 w-6 rounded cfa-checkbox--error" id="form_component_preview_test_model_favorite_fruits_apple_with_error" type="checkbox" value="apple" name="form_component_preview_test_model[favorite_fruits][]" /></span><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_with_error">Apple</label></div>
  </div>
  <div class="mt-cfa-sm">
    <p id="form_component_preview_test_model_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>
  </div>
</fieldset>
<!-- With Warning -->
<fieldset class="fieldset-group"  aria-describedby="form_component_preview_test_model_favorite_fruits_warning" x-data x-init="Alpine.store('favorite_fruits_with_warning', []);">
  <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_with_warning" class="cfa-checkbox h-6 w-6 rounded cfa-checkbox--warning" id="form_component_preview_test_model_favorite_fruits_orange_with_warning" type="checkbox" value="orange" name="form_component_preview_test_model[favorite_fruits][]" /><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_with_warning">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_with_warning" class="cfa-checkbox h-6 w-6 rounded cfa-checkbox--warning" id="form_component_preview_test_model_favorite_fruits_banana_with_warning" type="checkbox" value="banana" name="form_component_preview_test_model[favorite_fruits][]" /><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_with_warning">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_with_warning" class="cfa-checkbox h-6 w-6 rounded cfa-checkbox--warning" id="form_component_preview_test_model_favorite_fruits_apple_with_warning" type="checkbox" value="apple" name="form_component_preview_test_model[favorite_fruits][]" /><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_with_warning">Apple</label></div>
  </div>
  <div class="mt-cfa-sm">
    <p id="form_component_preview_test_model_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>
<!-- Indeterminate -->
<fieldset class="fieldset-group"   x-data x-init="Alpine.store('favorite_fruits_indeterminate', []);">
  <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_indeterminate" class="cfa-checkbox h-6 w-6 rounded" id="form_component_preview_test_model_favorite_fruits_orange_indeterminate" x-init="$nextTick(() => $el.indeterminate = true)" type="checkbox" value="orange" name="form_component_preview_test_model[favorite_fruits][]" /><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_indeterminate">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_indeterminate" class="cfa-checkbox h-6 w-6 rounded" id="form_component_preview_test_model_favorite_fruits_banana_indeterminate" type="checkbox" value="banana" name="form_component_preview_test_model[favorite_fruits][]" /><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_indeterminate">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_indeterminate" class="cfa-checkbox h-6 w-6 rounded" id="form_component_preview_test_model_favorite_fruits_apple_indeterminate" type="checkbox" value="apple" name="form_component_preview_test_model[favorite_fruits][]" /><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_indeterminate">Apple</label></div>
  </div>
  <div class="mt-cfa-sm">
  </div>
</fieldset>
<!-- Disabled Item -->
<fieldset class="fieldset-group"   x-data x-init="Alpine.store('favorite_fruits_disabled_item', []);">
  <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_disabled_item" class="cfa-checkbox h-6 w-6 rounded" id="form_component_preview_test_model_favorite_fruits_orange_disabled_item" disabled="disabled" type="checkbox" value="orange" name="form_component_preview_test_model[favorite_fruits][]" /><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_disabled_item" class="text-text-disabled">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_disabled_item" class="cfa-checkbox h-6 w-6 rounded" id="form_component_preview_test_model_favorite_fruits_banana_disabled_item" type="checkbox" value="banana" name="form_component_preview_test_model[favorite_fruits][]" /><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_disabled_item">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_disabled_item" class="cfa-checkbox h-6 w-6 rounded" id="form_component_preview_test_model_favorite_fruits_apple_disabled_item" type="checkbox" value="apple" name="form_component_preview_test_model[favorite_fruits][]" /><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_disabled_item">Apple</label></div>
  </div>
  <div class="mt-cfa-sm">
  </div>
</fieldset>
<!-- Mixed States -->
<fieldset class="fieldset-group"   x-data x-init="Alpine.store('favorite_fruits_mixed_states', []);">
  <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_mixed_states" class="cfa-checkbox h-6 w-6 rounded" id="form_component_preview_test_model_favorite_fruits_orange_mixed_states" x-init="$nextTick(() => $el.indeterminate = true)" type="checkbox" value="orange" name="form_component_preview_test_model[favorite_fruits][]" /><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_mixed_states">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_mixed_states" class="cfa-checkbox h-6 w-6 rounded" id="form_component_preview_test_model_favorite_fruits_banana_mixed_states" type="checkbox" value="banana" name="form_component_preview_test_model[favorite_fruits][]" /><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_mixed_states">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_mixed_states" class="cfa-checkbox h-6 w-6 rounded" id="form_component_preview_test_model_favorite_fruits_apple_mixed_states" disabled="disabled" type="checkbox" value="apple" name="form_component_preview_test_model[favorite_fruits][]" /><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_mixed_states" class="text-text-disabled">Apple</label></div>
  </div>
  <div class="mt-cfa-sm">
  </div>
</fieldset>
<!-- Mixed States With Error And Warning -->
<fieldset class="fieldset-group"  aria-describedby="form_component_preview_test_model_favorite_fruits_error form_component_preview_test_model_favorite_fruits_warning" x-data x-init="Alpine.store('favorite_fruits_mixed_states_with_error_and_warning', []);">
  <legend class="sr-only">What are your favorite fruits?</legend>
  <div class="cfa-stack-med has-error">
    <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"><span class="field_with_errors"><input x-model="$store.favorite_fruits_mixed_states_with_error_and_warning" class="cfa-checkbox h-6 w-6 rounded cfa-checkbox--error" id="form_component_preview_test_model_favorite_fruits_orange_mixed_states_with_error_and_warning" x-init="$nextTick(() => $el.indeterminate = true)" type="checkbox" value="orange" name="form_component_preview_test_model[favorite_fruits][]" /></span><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_mixed_states_with_error_and_warning">Orange</label></div>
    <div class="form_item"><span class="cfa-checkbox-wrap relative inline-flex h-6 w-6"><span class="field_with_errors"><input x-model="$store.favorite_fruits_mixed_states_with_error_and_warning" class="cfa-checkbox h-6 w-6 rounded cfa-checkbox--error" id="form_component_preview_test_model_favorite_fruits_banana_mixed_states_with_error_and_warning" type="checkbox" value="banana" name="form_component_preview_test_model[favorite_fruits][]" /></span><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_mixed_states_with_error_and_warning">Banana</label></div>
    <div class="form_item"><span class="cfa-checkbox-wrap relative inline-flex h-6 w-6"><span class="field_with_errors"><input x-model="$store.favorite_fruits_mixed_states_with_error_and_warning" class="cfa-checkbox h-6 w-6 rounded cfa-checkbox--error" id="form_component_preview_test_model_favorite_fruits_apple_mixed_states_with_error_and_warning" disabled="disabled" type="checkbox" value="apple" name="form_component_preview_test_model[favorite_fruits][]" /></span><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_mixed_states_with_error_and_warning" class="text-text-disabled">Apple</label></div>
  </div>
  <div class="mt-cfa-sm">
    <p id="form_component_preview_test_model_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="form_component_preview_test_model_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
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# Default
render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, scope: "default", legend: "What are your favorite fruits?"))
# Prefilled
custom_model = TestModel.new(favorite_fruits: ["apple", "orange"])
render(CheckboxesComponent.new(form: form(model: custom_model), method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, scope: "prefilled", legend: "What are your favorite fruits?"))
# With Error
custom_model = TestModel.new
custom_model.valid?
render(CheckboxesComponent.new(form: form(model: custom_model), method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, scope: "with_error", legend: "What are your favorite fruits?"))
# With Warning
render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, warning_message: "Message goes here.", scope: "with_warning", legend: "What are your favorite fruits?"))
# Indeterminate
render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, item_states: {"orange" => :indeterminate}, scope: "indeterminate", legend: "What are your favorite fruits?"))
# Disabled Item
render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, item_states: {"orange" => :disabled}, scope: "disabled_item", legend: "What are your favorite fruits?"))
# Mixed States
render(CheckboxesComponent.new(form:, method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, item_states: {"orange" => :indeterminate, "apple" => :disabled}, scope: "mixed_states", legend: "What are your favorite fruits?"))
# Mixed States With Error And Warning
custom_model = TestModel.new
custom_model.valid?
render(CheckboxesComponent.new(form: form(model: custom_model), method: :favorite_fruits, collection: self.class.fruit_options, item_value_method: :value, item_label_method: :label, warning_message: "Message goes here.", item_states: {"orange" => :indeterminate, "apple" => :disabled}, scope: "mixed_states_with_error_and_warning", legend: "What are your favorite fruits?"))

No notes provided.

No params configured.