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
<turbo-frame id="fieldset_preview">
<form action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="stswgQgZ5fxz3ZM0ikDL08K97Y_P4fyPKkEknpW0sgsr1yVqQpAn14K9cBfY5c6u-avTprUecrE08rVlYz_csA" />
<div class="form-inputs">
<fieldset class="fieldset"> <legend>Your details</legend>
<div class="fieldset__fields">
<div class="field field--first_name field--error">
<div class="field_with_errors"><label for="lookbook_input_preview_first_name">First name</label></div>
<div class="field_with_errors"><input required="required" type="text" name="lookbook_input_preview[first_name]" id="lookbook_input_preview_first_name" /></div>
<span class="field-error">is required</span></div>
<div class="field field--last_name field--error">
<div class="field_with_errors"><label for="lookbook_input_preview_last_name">Last name</label></div>
<div class="field_with_errors"><input required="required" type="text" name="lookbook_input_preview[last_name]" id="lookbook_input_preview_last_name" /></div>
<span class="field-error">is required</span></div>
<div class="field field--email field--error">
<div class="field_with_errors"><label for="lookbook_input_preview_email">Email address</label></div>
<div class="field_with_errors"><input required="required" autocomplete="email" type="email" name="lookbook_input_preview[email]" id="lookbook_input_preview_email" /></div>
<span class="field-error">is required</span></div>
</div>
</fieldset>
</div>
<div class="form-actions">
<button class="button primary">
<div class="button-content">
Submit
</div>
</button>
</div>
</form>
</turbo-frame>
1
2
3
model = build_input_preview_model(schema: [ FIELDSET ])
model.valid? # populate errors for preview
render_form(model:)
No Figma design linked. Add @figma_node_id <id> (or @figma <url>) to the preview class or scenario docstring.