Primer ViewComponents v0.35.1

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<form action="/foo" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="m0yfUkE8UrFc6sbcgIesNYOn3qLu5YmtEakbNwkos9ZC_6TiwrATkTzePdQT_bZPVdvtVGn-PINEH7wpN9-Ucg" autocomplete="off" />
  <div class="FormControl-spacingWrapper">
    <div data-view-component="true">
      <primer-text-field class="FormControl width-full FormControl--fullWidth">
        <label class="FormControl-label" for="first_name">
          First name
          <span aria-hidden="true">*</span>
        </label>
        <div class="FormControl-input-wrap">
          <input aria-required="true" aria-describedby="validation-010e108d-6147-49f5-82c1-ddc14d7634e0 caption-010e108d-6147-49f5-82c1-ddc14d7634e0" data-target="primer-text-field.inputElement " class="FormControl-input FormControl-medium" type="text" name="first_name" id="first_name" />
        </div>
        <div class="FormControl-inlineValidation" id="validation-010e108d-6147-49f5-82c1-ddc14d7634e0" hidden="hidden">
          <span class="FormControl-inlineValidation--visual" data-target="primer-text-field.validationSuccessIcon" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
              <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
            </svg></span>
          <span class=" FormControl-inlineValidation--visual" data-target="primer-text-field.validationErrorIcon"><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
              <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
            </svg></span>
          <span></span>
        </div>
        <span class="FormControl-caption" id="caption-010e108d-6147-49f5-82c1-ddc14d7634e0">
          <span class="color-fg-danger">Be honest!</span>
        </span>
      </primer-text-field>
    </div>
    <div data-view-component="true">
      <div class="FormControl-checkbox-wrap">
        <input name="cool" type="hidden" value="0" autocomplete="off" /><input aria-describedby="caption-1b70ad88-7f8a-40e7-a399-c1931330d762" class="FormControl-checkbox" type="checkbox" value="1" name="cool" id="cool" />
        <span class="FormControl-checkbox-labelWrap">
          <label class="FormControl-label" for="cool">
            Are you cool?
          </label>          <span class="FormControl-caption" id="caption-1b70ad88-7f8a-40e7-a399-c1931330d762">
            <span class="color-fg-danger">Check only if you are cool.</span>
          </span>
        </span>
      </div>
    </div>
    <div data-view-component="true">
      <div class="FormControl-radio-group-wrap">
        <fieldset aria-describedby="validation-2a7d2e21-02cf-4a86-aae6-be50fd9dd3a6" class="">
          <div class="mb-2">
          </div>
          <div class="FormControl-spacingWrapper">
            <div class="FormControl-radio-wrap">
              <input aria-describedby="caption-576e8468-2c6f-4846-92fb-a7f7bd27f476" class="FormControl-radio" type="radio" value="young" name="age" id="age_young" />
              <span class="FormControl-radio-labelWrap">
                <label class="FormControl-label" for="age_young">
                  10-15
                </label>          <span class="FormControl-caption" id="caption-576e8468-2c6f-4846-92fb-a7f7bd27f476">
                  <span class="color-fg-danger">A young thing.</span>
                </span>
              </span>
            </div>
            <div class="FormControl-radio-wrap">
              <input aria-describedby="caption-fc2ad31b-bc3c-410c-84bb-2e952850acf6" class="FormControl-radio" type="radio" value="middle_aged" name="age" id="age_middle_aged" />
              <span class="FormControl-radio-labelWrap">
                <label class="FormControl-label" for="age_middle_aged">
                  16-21
                </label>          <span class="FormControl-caption" id="caption-fc2ad31b-bc3c-410c-84bb-2e952850acf6">
                  <span class="color-fg-danger">No longer a spring chicken.</span>
                </span>
              </span>
            </div>
          </div>
        </fieldset>
  
        <div class="mt-2">
          <div class="FormControl-inlineValidation" id="validation-2a7d2e21-02cf-4a86-aae6-be50fd9dd3a6" hidden="hidden">
            <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
                <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
              </svg></span>
            <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
                <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
              </svg></span>
            <span></span>
          </div>
        </div>
      </div>
    </div>
    <div data-view-component="true">
      <div class="FormControl-check-group-wrap">
        <fieldset aria-describedby="validation-fce331b2-b6ea-4c16-b870-94d4570a385e" class="">
          <legend class="FormControl-label">
            Cool places
          </legend>    
          <div class="mb-2">
          </div>
          <div class="FormControl-spacingWrapper">
            <div class="FormControl-checkbox-wrap">
              <input aria-describedby="caption-816141ee-c68e-4af2-9ae2-7ff5898cb866" class="FormControl-checkbox" type="checkbox" value="lopez" name="places[]" id="places_lopez" />
              <span class="FormControl-checkbox-labelWrap">
                <label class="FormControl-label" for="places_lopez">
                  Lopez Island
                </label>          <span class="FormControl-caption" id="caption-816141ee-c68e-4af2-9ae2-7ff5898cb866">
                  <span>Lopez caption</span>
                </span>
              </span>
            </div>
            <div class="FormControl-checkbox-wrap">
              <input aria-describedby="caption-c907de3e-9743-4cc9-af46-8595db29f488" class="FormControl-checkbox" type="checkbox" value="bellevue" name="places[]" id="places_bellevue" />
              <span class="FormControl-checkbox-labelWrap">
                <label class="FormControl-label" for="places_bellevue">
                  Bellevue
                </label>          <span class="FormControl-caption" id="caption-c907de3e-9743-4cc9-af46-8595db29f488">
                  <span>Bellevue caption</span>
                </span>
              </span>
            </div>
            <div class="FormControl-checkbox-wrap">
              <input aria-describedby="caption-2e8436a6-b424-4cbc-b5c1-8a17e6d0a7e6" class="FormControl-checkbox" type="checkbox" value="seattle" name="places[]" id="places_seattle" />
              <span class="FormControl-checkbox-labelWrap">
                <label class="FormControl-label" for="places_seattle">
                  Seattle
                </label>          <span class="FormControl-caption" id="caption-2e8436a6-b424-4cbc-b5c1-8a17e6d0a7e6">
                  <span>Seattle caption</span>
                </span>
              </span>
            </div>
          </div>
        </fieldset>
  
        <div class="mt-2">
          <div class="FormControl-inlineValidation" id="validation-fce331b2-b6ea-4c16-b870-94d4570a385e" hidden="hidden">
            <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
                <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
              </svg></span>
            <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
                <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
              </svg></span>
            <span></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
1
2
3
<%= primer_form_with(url: "/foo") do |f| %>
  <%= render(CaptionTemplateForm.new(f)) %>
<% end %>

No notes provided.

No params configured.

app/forms/caption_template_form.rb

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
# frozen_string_literal: true
# :nodoc:
class CaptionTemplateForm < ApplicationForm
  form do |name_form|
    name_form.text_field(
      name: :first_name,
      label: "First name",
      required: true
    )
    name_form.check_box(
      name: :cool,
      label: "Are you cool?"
    )
    name_form.radio_button_group(name: :age) do |age_radios|
      age_radios.radio_button(value: "young", label: "10-15")
      age_radios.radio_button(value: "middle_aged", label: "16-21")
    end
    name_form.check_box_group(name: "places", label: "Cool places") do |check_group|
      check_group.check_box(value: "lopez", label: "Lopez Island")
      check_group.check_box(value: "bellevue", label: "Bellevue")
      check_group.check_box(value: "seattle", label: "Seattle")
    end
  end
end

app/forms/caption_template_form/age_middle_aged_caption.html.erb

1
<span class="color-fg-danger">No longer a spring chicken.</span>

app/forms/caption_template_form/age_young_caption.html.erb

1
<span class="color-fg-danger">A young thing.</span>

app/forms/caption_template_form/cool_caption.html.erb

1
<span class="color-fg-danger">Check only if you are cool.</span>

app/forms/caption_template_form/first_name_caption.html.erb

1
<span class="color-fg-danger">Be honest!</span>

app/forms/caption_template_form/places_bellevue_caption.html.erb

1
<span>Bellevue caption</span>

app/forms/caption_template_form/places_lopez_caption.html.erb

1
<span>Lopez caption</span>

app/forms/caption_template_form/places_seattle_caption.html.erb

1
<span>Seattle caption</span>