Component Library 2.9.4 (configured with Dummy App)
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<form action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="UibcCJlJg1TBaN5MXRCCs5zglSZtKmo58JpSXX8FpzUJzIdD3063iFsOo57kjgGbveXO9mGkXINUcnc-FBm3FQ" />
  <div class="field field--activity"><label for="lookbook_input_preview_activity">Activity</label>
    <div class="combobox" data-controller="combobox" data-combobox-min-chars-value="0">
      <select data-combobox-target="select" name="lookbook_input_preview[activity]" id="lookbook_input_preview_activity"><option value="">Choose an activity…</option>
        <option value="swimming">Swimming</option>
        <option value="gym">Gym</option>
        <option value="fitness-classes">Fitness classes</option>
        <option value="racket-sports">Racket sports</option>
        <option value="athletics">Athletics</option></select>
      <div class="combobox__ui" hidden data-combobox-target="ui">
        <input type="text"
           class="combobox__input"
           role="combobox"
           aria-expanded="false"
           aria-controls="combobox-00378c89-listbox"
           aria-autocomplete="list"
           aria-label="Activity"
           autocomplete="off"
           placeholder="Choose an activity…"
           value=""
           data-combobox-target="input"
           data-action="focus->combobox#open input->combobox#filter keydown->combobox#keydown change->combobox#containChange">
        <span class="combobox__chevron" aria-hidden="true"><span class="material-symbols-outlined keyboard_arrow_down" data-recite-translate-skip="true"></span></span>
        <ul role="listbox" id="combobox-00378c89-listbox" class="combobox__listbox" hidden data-combobox-target="listbox">
          <li id="combobox-00378c89-option-0"
            role="option"
            class="combobox__option"
            aria-selected="false"
            data-combobox-target="option"
            data-value="swimming"
            data-action="click->combobox#select">Swimming</li>
          <li id="combobox-00378c89-option-1"
            role="option"
            class="combobox__option"
            aria-selected="false"
            data-combobox-target="option"
            data-value="gym"
            data-action="click->combobox#select">Gym</li>
          <li id="combobox-00378c89-option-2"
            role="option"
            class="combobox__option"
            aria-selected="false"
            data-combobox-target="option"
            data-value="fitness-classes"
            data-action="click->combobox#select">Fitness classes</li>
          <li id="combobox-00378c89-option-3"
            role="option"
            class="combobox__option"
            aria-selected="false"
            data-combobox-target="option"
            data-value="racket-sports"
            data-action="click->combobox#select">Racket sports</li>
          <li id="combobox-00378c89-option-4"
            role="option"
            class="combobox__option"
            aria-selected="false"
            data-combobox-target="option"
            data-value="athletics"
            data-action="click->combobox#select">Athletics</li>
          <li class="combobox__no-results"
          role="option"
          aria-disabled="true"
          hidden
          data-combobox-target="noResults">No matches</li>
        </ul>
      </div>
    </div>
  </div>
</form>
1
2
3
4
5
6
7
8
9
10
effective_required = required || error
effective_value = error ? "none" : value
field = effective_required ? FIELD.merge("required" => true) : FIELD
field = field.merge("icon" => "search") if icon
field = field.merge("min_chars" => min_chars)
field = field.merge("preview_values" => %w[swimming gym]) if preview
attrs = (effective_value && effective_value != "none") ? { FIELD["name"].to_sym => effective_value } : {}
model = build_input_preview_model(schema: [ field ], **attrs)
model = with_validation_errors(model) if error
render_input_preview(field:, model:)

No notes provided.

Param Description Input

—

—

—

—

—

—
No Figma design linked. Add @figma_node_id <id> (or @figma <url>) to the preview class or scenario docstring.