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
<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">ID number</p> <p aria-hidden="true">•••••4567</p> <span class="sr-only">ending in 4567</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_state_id_number">ID number</label> <input class="w-full max-w-sm" aria-required="true" data-obfuscated-input="" value="" x-bind:disabled="!editing" disabled="disabled" autocomplete="off" type="text" name="form_component_preview_test_model[state_id_number]" id="form_component_preview_test_model_state_id_number" /> </div> <button type="button" class="btn btn--secondary btn--small" x-on:click="cancel()"> Cancel </button> </div></div>1
2
model = TestModel.new(state_id_number: "D1234567")render(InputComponent.new(form: form(model:), method: :state_id_number, label: "ID number", obfuscate: true, input_attrs: {autocomplete: "off"}))No notes provided.
No params configured.