Cfa Ui Components

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="cfa-stack-sm">
  <div class="flex items-center gap-cfa-sm">
    <span class="cfa-checkbox-wrap relative inline-flex h-6 w-6"><input name="form_component_preview_test_model[pineapple_pizza_preference]" type="hidden" value="" autocomplete="off" /><span class="field_with_errors"><input class="cfa-checkbox h-6 w-6 rounded border-2 border-border-error" aria-required="true" aria-invalid="true" aria-describedby="form_component_preview_test_model_pineapple_pizza_preference_error" type="checkbox" value="1" name="form_component_preview_test_model[pineapple_pizza_preference]" id="form_component_preview_test_model_pineapple_pizza_preference" /></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>
    <span class="field_with_errors"><label for="form_component_preview_test_model_pineapple_pizza_preference">With errors</label></span>
  </div>
  <p id="form_component_preview_test_model_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>
1
2
3
4
5
6
7
8
custom_model = self.class::TestModel.new
custom_model.valid?
render SingleCheckboxComponent.new(
  form: form(model: custom_model),
  method: :pineapple_pizza_preference,
  label: "With errors"
)

No notes provided.

No params configured.