Paper 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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<fieldset style="--pc-vertical-stack-align: ;--pc-vertical-stack-order: column;--pc-vertical-stack-gap-xs: var(--p-space-4);--pc-vertical-stack-gap-md: var(--p-space-0)" class="Polaris-VerticalStack Polaris-VerticalStack--fieldsetReset">
  <legend style="--pc-box-border-color: transparent;--pc-box-border-style: solid;--pc-box-padding-block-end-xs: var(--p-space-5);--pc-box-padding-block-end-md: var(--p-space-1)" class="Polaris-Box">
    While the customer is checking out
  </legend>
  <ul style="--pc-vertical-stack-align: ;--pc-vertical-stack-order: column;--pc-vertical-stack-gap-xs: var(--p-space-4);--pc-vertical-stack-gap-md: var(--p-space-0)" class="Polaris-VerticalStack Polaris-VerticalStack--listReset">
    <li>
      <div>
        <label class="Polaris-Choice">
          <span class="Polaris-Choice__Control">
            <span class="Polaris-Checkbox">
              <input type="checkbox" name="question[]" id="question_" value="shipping" aria-checked="false" class="Polaris-Checkbox__Input" />
              <span class="Polaris-Checkbox__Backdrop"></span>
              <span class="Polaris-Checkbox__Icon">
                <span class="Polaris-Icon">
                  <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path d="M14.723 6.237a.94.94 0 0 1 .053 1.277l-5.366 6.193a.834.834 0 0 1-.611.293.83.83 0 0 1-.622-.264l-2.927-3.097a.94.94 0 0 1 0-1.278.82.82 0 0 1 1.207 0l2.297 2.43 4.763-5.498a.821.821 0 0 1 1.206-.056Z"></path></svg>
                </span>
              </span>
            </span>
          </span>
          <span class="Polaris-Choice__Label">
            Use the shipping address as the billing address by default
          </span>
        </label>
        <div class="Polaris-Choice__Descriptions">
          <div class="Polaris-Choice__HelpText">
            <span class="Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--subdued Polaris-Text--regular">
              Reduces the number of fields required to check out. The billing address can still be edited.
            </span>        </div>
        </div>
      </div>
    </li>
    <li>
      <div>
        <label class="Polaris-Choice">
          <span class="Polaris-Choice__Control">
            <span class="Polaris-Checkbox">
              <input type="checkbox" name="question[]" id="question_" value="confirmation" aria-checked="false" class="Polaris-Checkbox__Input" />
              <span class="Polaris-Checkbox__Backdrop"></span>
              <span class="Polaris-Checkbox__Icon">
                <span class="Polaris-Icon">
                  <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path d="M14.723 6.237a.94.94 0 0 1 .053 1.277l-5.366 6.193a.834.834 0 0 1-.611.293.83.83 0 0 1-.622-.264l-2.927-3.097a.94.94 0 0 1 0-1.278.82.82 0 0 1 1.207 0l2.297 2.43 4.763-5.498a.821.821 0 0 1 1.206-.056Z"></path></svg>
                </span>
              </span>
            </span>
          </span>
          <span class="Polaris-Choice__Label">
            Require a confirmation step
          </span>
        </label>
        <div class="Polaris-Choice__Descriptions">
          <div class="Polaris-Choice__HelpText">
            <span class="Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--subdued Polaris-Text--regular">
              Customers must review their order details before purchasing.
            </span>        </div>
        </div>
      </div>
    </li>
  </ul>
</fieldset>
1
2
3
4
5
6
7
8
9
10
11
12
<%= paper_choice_list(title: "While the customer is checking out", name: :question) do |choice| %>
  <% choice.with_checkbox(
    label: "Use the shipping address as the billing address by default",
    value: "shipping",
    help_text: "Reduces the number of fields required to check out. The billing address can still be edited.",
  ) %>
  <% choice.with_checkbox(
    label: "Require a confirmation step",
    value: "confirmation",
    help_text: "Customers must review their order details before purchasing.",
  ) %>
<% end %>

No notes provided.

No params configured.