Cfa Ui Components

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
<div class="cfa-stack-sm">
  <span class="field_with_errors"><label class="label block" for="form_component_preview_test_model_base">Email</label></span>
  <span class="field_with_errors"><input class="w-full max-w-sm" aria-required="true" aria-invalid="true" aria-describedby="form_component_preview_test_model_base_error" type="text" name="form_component_preview_test_model[base]" id="form_component_preview_test_model_base" /></span>
  <p id="form_component_preview_test_model_base_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>
      We couldn't find an account for that email address. Try with your phone number or get started here.
    </span>
  </p>
</div>
1
2
3
custom_model = TestModel.new
custom_model.errors.add(:base, "We couldn't find an account for that email address. Try with your phone number or get started here.")
render(InputComponent.new(form: form(model: custom_model), method: :base, label: I18n.t("preview.email")))

A long, wrapping error message: shows the icon top-aligned with the first line of text. Single-line messages (see with_error) center the icon instead.

No params configured.