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
<div class="" x-data="{
          editing: false,
          edit() {
            this.editing = true
            this.$nextTick(() => this.$root.querySelector('[data-obfuscated-input]')?.focus())
  },
  cancel() {
  this.editing = false
  this.$root.querySelectorAll('[data-obfuscated-input]').forEach((input) => { input.value = '' })
  }
  }">
  <div x-show="!editing" x-cloak class="cfa-stack-sm">
    <div class="cfa-stack-sm">
      <p class="label block">Routing number</p>
      <p aria-hidden="true">•••••0021</p>
      <span class="sr-only">ending in 0021</span>
    </div>
    <button type="button" class="btn btn--secondary btn--small" x-on:click="edit()">
      Edit
    </button>
  </div>
  <div x-show="editing" x-cloak class="cfa-stack-med">
    <div class="cfa-stack-sm">
      <label class="label block" for="form_component_preview_test_model_routing_number">Routing number</label>
      <input class="w-full max-w-sm" aria-required="true" data-obfuscated-input="" value="" x-bind:disabled="!editing" disabled="disabled" inputmode="numeric" autocomplete="off" type="text" name="form_component_preview_test_model[routing_number]" id="form_component_preview_test_model_routing_number" />
    </div>
    <div class="cfa-stack-sm">
      <label class="label block" for="form_component_preview_test_model_routing_number_confirmation">Confirm routing number</label>
      <input class="w-full max-w-sm" aria-required="true" data-obfuscated-input="" value="" x-bind:disabled="!editing" disabled="disabled" inputmode="numeric" autocomplete="off" type="text" name="form_component_preview_test_model[routing_number_confirmation]" id="form_component_preview_test_model_routing_number_confirmation" />
    </div>
    <button type="button" class="btn btn--secondary btn--small" x-on:click="cancel()">
      Cancel
    </button>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
model = TestModel.new(routing_number: "021000021")
render(InputComponent.new(
  form: form(model:),
  method: :routing_number,
  label: "Routing number",
  confirmation_method: :routing_number_confirmation,
  confirmation_label: "Confirm routing number",
  obfuscate: true,
  input_attrs: {inputmode: "numeric", autocomplete: "off"}
))

No notes provided.

No params configured.