Anchor ViewComponents

Pages

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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<form class="flex flex-col gap-4 pb-10" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="GBGQYy0SxStWgQST7M78jvy1jmSyyU8XK_CehEtotszBX3Pxb1SQ4fgDYXG7LaBbSv3N9JRwg3RUMEfRyHglSQ" autocomplete="off" />
  <div>
    <div class="field_with_errors"><label class="font-semibold text-base text-primary" data-testid="label-name" for="fake_user_name">Name</label></div>
    <div data-testid="form-field-input-name">
      <div class="field_with_errors"><input class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base border-critical" autocomplete="off" data-testid="input-name" aria-describedby="error-name" aria-invalid="true" type="text" name="fake_user[name]" id="fake_user_name" /></div>
    </div>
    <p class="mt-2 text-secondary text-sm">Field hint</p>
    <div role="alert" class="bg-critical-subdued flex gap-2 items-center mt-1 px-2 py-1 rounded text-critical text-sm" data-error="true" data-testid="error-name" data-turbo-temporary="true">
      <!-- Source: Iconoir, added via `bin/add_icon` -->
      <svg width="16" height="16" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true">
        <path d="M20.0429 21H3.95705C2.41902 21 1.45658 19.3364 2.22324 18.0031L10.2662 4.01533C11.0352 2.67792 12.9648 2.67791 13.7338 4.01532L21.7768 18.0031C22.5434 19.3364 21.581 21 20.0429 21Z" stroke="currentColor" stroke-linecap="round"></path>
        <path d="M12 9V13" stroke="currentColor" stroke-linecap="round"></path>
        <path d="M12 17.01L12.01 16.9989" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <p id="error-name">Name can't be blank</p>
    </div>
  </div>
  <div>
    <label class="font-semibold text-base text-primary" data-testid="label-email" required="required" for="fake_user_email">Email</label>
    <div data-testid="form-field-input-email"><input class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" autocomplete="off" data-testid="input-email" type="email" name="fake_user[email]" id="fake_user_email" /></div>
  </div>
  <div>
    <div class="field_with_errors"><label class="font-semibold text-base text-primary" data-testid="label-name" for="fake_user_name">Name</label></div>
    <div data-testid="form-field-input-name">
      <div class="field_with_errors"><input class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base border-critical" autocomplete="off" disabled="disabled" data-testid="input-name" aria-describedby="error-name" aria-invalid="true" type="text" name="fake_user[name]" id="fake_user_name" /></div>
    </div>
    <div role="alert" class="bg-critical-subdued flex gap-2 items-center mt-1 px-2 py-1 rounded text-critical text-sm" data-error="true" data-testid="error-name" data-turbo-temporary="true">
      <!-- Source: Iconoir, added via `bin/add_icon` -->
      <svg width="16" height="16" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true">
        <path d="M20.0429 21H3.95705C2.41902 21 1.45658 19.3364 2.22324 18.0031L10.2662 4.01533C11.0352 2.67792 12.9648 2.67791 13.7338 4.01532L21.7768 18.0031C22.5434 19.3364 21.581 21 20.0429 21Z" stroke="currentColor" stroke-linecap="round"></path>
        <path d="M12 9V13" stroke="currentColor" stroke-linecap="round"></path>
        <path d="M12 17.01L12.01 16.9989" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <p id="error-name">Name can't be blank</p>
    </div>
  </div>
  <div>
    <label class="font-semibold text-base text-primary" data-testid="label-number-stepper" for="fake_user_number_stepper">Number stepper<span class="text-secondary font-normal italic"> (optional)</span></label>
    <div data-testid="form-field-input-number-stepper"><input class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" autocomplete="off" data-testid="input-number-stepper" type="number" name="fake_user[number_stepper]" id="fake_user_number_stepper" /></div>
    <p class="text-base leading-5 mt-1">
      Note: as per our
      <a class="underline hover:no-underline focus:no-underline text-accent hover:text-accent-hover" target="_blank" href="https://github.com/BuoySoftware/guides/blob/main/html/README.md">guides</a>
      we prefer
      <code><%= form.text_field :number_stepper, inputmode: :numeric %></code>,
      shown below.
    </p>
  </div>
  <div>
    <label class="font-semibold text-base text-primary" data-testid="label-numeric" for="fake_user_numeric">Numeric<span class="text-secondary font-normal italic"> (optional)</span></label>
    <div data-testid="form-field-input-numeric"><input class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" autocomplete="off" data-testid="input-numeric" inputmode="numeric" type="text" name="fake_user[numeric]" id="fake_user_numeric" /></div>
  </div>
  <div>
    <div class="field_with_errors"><label class="font-semibold text-base text-primary" data-testid="label-phone" for="fake_user_phone">Phone</label></div>
    <div data-testid="form-field-input-phone">
      <div data-controller="phone-input">
        <div class="field_with_errors"><input class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base border-critical" autocomplete="off" data-action="input->phone-input#update" data-phone-input-target="displayInput" aria-describedby="error-phone" aria-invalid="true" type="tel" name="fake_user[phone]" id="fake_user_phone" /></div>
        <div class="field_with_errors"><input hidden="hidden" data-phone-input-target="submitInput" type="tel" name="fake_user[phone]" id="fake_user_phone" /></div>
      </div>
    </div>
    <div role="alert" class="bg-critical-subdued flex gap-2 items-center mt-1 px-2 py-1 rounded text-critical text-sm" data-error="true" data-testid="error-phone" data-turbo-temporary="true">
      <!-- Source: Iconoir, added via `bin/add_icon` -->
      <svg width="16" height="16" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true">
        <path d="M20.0429 21H3.95705C2.41902 21 1.45658 19.3364 2.22324 18.0031L10.2662 4.01533C11.0352 2.67792 12.9648 2.67791 13.7338 4.01532L21.7768 18.0031C22.5434 19.3364 21.581 21 20.0429 21Z" stroke="currentColor" stroke-linecap="round"></path>
        <path d="M12 9V13" stroke="currentColor" stroke-linecap="round"></path>
        <path d="M12 17.01L12.01 16.9989" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <p id="error-phone">Phone can't be blank</p>
    </div>
  </div>
  <div>
    <label class="font-semibold text-base text-primary" data-testid="label-birthday" for="fake_user_birthday">Birthday<span class="text-secondary font-normal italic"> (optional)</span></label>
    <input class="form-input min-h-[40px] resize-none block w-full rounded" max="9999-12-31" type="date" name="fake_user[birthday]" id="fake_user_birthday" />
  </div>
  <div>
    <label class="font-semibold text-base text-primary" data-testid="label-last-login-at" for="fake_user_last_login_at">Last login at<span class="text-secondary font-normal italic"> (optional)</span></label>
    <input class="form-input min-h-[40px] resize-none block w-full rounded" max="9999-12-31T00:00:00" type="datetime-local" name="fake_user[last_login_at]" id="fake_user_last_login_at" />
  </div>
  <div>
    <label class="font-semibold text-base text-primary" data-testid="label-sunrise-at" for="fake_user_sunrise_at">Sunrise at<span class="text-secondary font-normal italic"> (optional)</span></label>
    <div data-testid="form-field-input-sunrise-at"><input class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" autocomplete="off" data-testid="input-sunrise-at" type="time" name="fake_user[sunrise_at]" id="fake_user_sunrise_at" /></div>
  </div>
  <div>
    <input name="fake_user[allows_email_marketing]" type="hidden" value="0" autocomplete="off" /><input class="form-checkbox rounded border-2 checked:bg-accent shrink-0 m-[3px] !size-4.5 hover:border-gray-600 checked:hover:border-accent-hover checked:hover:bg-accent-hover disabled:border-subdued disabled:checked:bg-subdued disabled:checked:hover:border-subdued" data-testid="checkbox-allows-email-marketing" type="checkbox" value="1" name="fake_user[allows_email_marketing]" id="fake_user_allows_email_marketing" />
    <label class="font-semibold text-base text-primary" data-testid="label-allows-email-marketing" for="fake_user_allows_email_marketing">Allows email marketing</label>
  </div>
  <div>
    <label class="font-semibold text-base text-primary" data-testid="label-choices" for="fake_user_choices">Choices<span class="text-secondary font-normal italic"> (optional)</span></label>
    <div class="relative">
      <select class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" data-testid="select-choices" name="fake_user[choices]" id="fake_user_choices"><option value="" label=" "></option>
        <option value="choice_a">Choice A</option>
        <option value="choice_b">Choice B</option>
        <option value="choice_c">Choice C</option></select>
      <!-- Source: Iconoir, added via `bin/add_icon` -->
      <svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0 absolute top-1/2 -translate-y-1/2 text-secondary pointer-events-none right-4" aria-hidden="true">
        <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </div>
  </div>
  <div>
    <label class="font-semibold text-base text-primary" data-testid="label-choices" for="fake_user_choices">Choices<span class="text-secondary font-normal italic"> (optional)</span></label>
    <div class="relative">
      <input name="fake_user[choices_multiple][]" type="hidden" value="" autocomplete="off" /><select class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" data-testid="select-choices-multiple" data-controller="typeahead-select" multiple="multiple" name="fake_user[choices_multiple][]" id="fake_user_choices_multiple"><option value="" label=" "></option>
        <option value="choice_a">Choice A</option>
        <option value="choice_b">Choice B</option>
        <option value="choice_c">Choice C</option>
        <option value="choice_d">Choice D</option>
        <option value="choice_e">Choice E</option>
        <option value="choice_f">Choice F</option></select>
      <!-- Source: Iconoir, added via `bin/add_icon` -->
      <svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0 absolute top-1/2 -translate-y-1/2 text-secondary pointer-events-none right-4" aria-hidden="true">
        <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </div>
  </div>
  <div>
    <label class="font-semibold text-base text-primary" data-testid="label-typeahead-cities" for="fake_user_typeahead_cities">Typeahead cities<span class="text-secondary font-normal italic"> (optional)</span></label>
    <div class="relative">
      <select class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" data-testid="select-typeahead-cities" data-controller="typeahead-select" name="fake_user[typeahead_cities]" id="fake_user_typeahead_cities"><option value="" label=" "></option>
        <option value="austin">Austin, TX</option>
        <option value="columbus">Columbus, OH</option>
        <option value="nyc">New York City, NY</option></select>
      <!-- Source: Iconoir, added via `bin/add_icon` -->
      <svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0 absolute top-1/2 -translate-y-1/2 text-secondary pointer-events-none right-4" aria-hidden="true">
        <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </div>
  </div>
  <div>
    <label class="font-semibold text-base text-primary" data-testid="label-typeahead-facilities" for="fake_user_typeahead_facilities">Typeahead facilities<span class="text-secondary font-normal italic"> (optional)</span></label>
    <div class="relative">
      <select class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" data-testid="select-typeahead-facilities" data-controller="typeahead-select" name="fake_user[typeahead_facilities]" id="fake_user_typeahead_facilities"><option value="" label=" "></option>
        <optgroup label="Paris"><option value="sulphur_springs">Sulphur Springs</option></optgroup><optgroup label="Test Facility"><option value="mobile_test_facility_1">Mobile Test Facility 1</option>
          <option value="mobile_test_facility_2">Mobile Test Facility 2</option></optgroup><optgroup label="Other"><option value="other">Other</option></optgroup></select>
      <!-- Source: Iconoir, added via `bin/add_icon` -->
      <svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0 absolute top-1/2 -translate-y-1/2 text-secondary pointer-events-none right-4" aria-hidden="true">
        <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </div>
  </div>
  <div>
    <label class="font-semibold text-base text-primary" data-testid="label-months" for="fake_user_months">Months<span class="text-secondary font-normal italic"> (optional)</span></label>
    <div data-controller="autocomplete" data-autocomplete-url-value="/months" role="combobox" class="group relative">
      <div data-testid="form-field-input-months"><input class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" autocomplete="off" data-autocomplete-target="input" data-autocomplete-min-length-value="0" data-action="click->autocomplete#onInputClick" type="text" name="fake_user[months]" id="fake_user_months" /></div>
      <div data-testid="form-field-input-months-id"><input class="hidden" autocomplete="off" data-autocomplete-target="hidden" type="text" name="fake_user[months_id]" id="fake_user_months_id" /></div>
      <ul class="absolute bg-white border border-gray-300 max-h-[200px] mt-2 overflow-y-auto py-2 rounded-md shadow-lg w-full z-10 group-data-[empty='true']:hidden group-data-[loading='true']:hidden [&>li]:py-2 [&>li]:px-3 [&>li]:cursor-pointer *:aria-selected:bg-accent-subdued" data-autocomplete-target="results"></ul>
      <div class="absolute bg-white border border-gray-300 max-h-[200px] mt-2 overflow-y-auto py-2 rounded-md shadow-lg w-full z-10 text-center text-gray-500 hidden group-aria-[expanded][data-empty='true'][data-loading='false']:block">
        No options
      </div>
      <div class="absolute bg-white border border-gray-300 max-h-[200px] mt-2 overflow-y-auto py-2 rounded-md shadow-lg w-full z-10 text-center text-gray-500 hidden group-aria-[expanded][data-loading='true']:block">
        Loading...
      </div>
    </div>
  </div>
  <div>
    <label class="font-semibold text-base text-primary" data-testid="label-comments" for="fake_user_comments">Comments<span class="text-secondary font-normal italic"> (optional)</span></label>
    <div>
      <textarea class="form-input min-h-[40px] resize-none block w-full rounded h-[120px] disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" data-testid="text-area-comments" name="fake_user[comments]" id="fake_user_comments">
</textarea>
    </div>
  </div>
  <div>
    <label class="font-semibold text-base text-primary" data-testid="label-default-submit-button" required="required" for="fake_user_Default submit button">Default submit button</label>
    <button type="submit" class="btn btn-primary" data-testid="submit-button">
      Submit
    </button>
  </div>
  <div>
    <label class="font-semibold text-base text-primary" data-testid="label-custom-submit-button" required="required" for="fake_user_Custom submit button">Custom submit button</label>
    <button type="submit" class="btn btn-critical" data-testid="custom-button-button">
      Custom button
    </button>
  </div>
</form>
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<%= anchor_form_with model:, url: false, class: "pb-10" do |form| %>
  <%= tag.div do %>
    <%= form.label :name %>
    <%= form.text_field :name %>
    <%= form.hint "Field hint" %>
    <%= form.error_message_for :name %>
  <% end %>
  <%= tag.div do %>
    <%= form.label :email, nil, required: true %>
    <%= form.email_field :email %>
    <%= form.error_message_for :email %>
  <% end %>
  <%= tag.div do %>
    <%= form.label :name %>
    <%= form.text_field :name, disabled: true %>
    <%= form.error_message_for :name %>
  <% end %>
  <%= tag.div do %>
    <%= form.label :number_stepper %>
    <%= form.number_field :number_stepper %>
    <%= anchor_text class: "mt-1" do %>
      Note: as per our
      <%= anchor_link(
        "guides",
        href: "https://github.com/BuoySoftware/guides/blob/main/html/README.md",
        target: "_blank",
      ) %>
      we prefer
      <code><%= form.text_field :number_stepper, inputmode: :numeric %></code>,
      shown below.
    <% end %>
    <%= form.error_message_for :number_stepper %>
  <% end %>
  <%= tag.div do %>
    <%= form.label :numeric %>
    <%= form.text_field :numeric, inputmode: :numeric %>
    <%= form.error_message_for :numeric %>
  <% end %>
  <%= tag.div do %>
    <%= form.label :phone %>
    <%= form.phone_field :phone %>
    <%= form.error_message_for :phone %>
  <% end %>
  <%= tag.div do %>
    <%= form.label :birthday %>
    <%= form.date_field :birthday %>
    <%= form.error_message_for :birthday %>
  <% end %>
  <%= tag.div do %>
    <%= form.label :last_login_at %>
    <%= form.datetime_field :last_login_at %>
    <%= form.error_message_for :last_login_at %>
  <% end %>
  <%= tag.div do %>
    <%= form.label :sunrise_at %>
    <%= form.time_field :sunrise_at %>
    <%= form.error_message_for :sunrise_at %>
  <% end %>
  <%= tag.div do %>
    <%= form.check_box :allows_email_marketing %>
    <%= form.label :allows_email_marketing %>
    <%= form.error_message_for :allows_email_marketing %>
  <% end %>
  <%= tag.div do %>
    <%= form.label :choices %>
    <%= form.select(
      :choices,
      {
        "Choice A" => "choice_a",
        "Choice B" => "choice_b",
        "Choice C" => "choice_c",
      },
      { include_blank: true }
    ) %>
    <%= form.error_message_for :choices %>
  <% end %>
  <%= tag.div do %>
    <%= form.label :choices %>
    <%= form.typeahead_select(
      :choices_multiple,
      {
        "Choice A" => "choice_a",
        "Choice B" => "choice_b",
        "Choice C" => "choice_c",
        "Choice D" => "choice_d",
        "Choice E" => "choice_e",
        "Choice F" => "choice_f",
      },
      { include_blank: true, multiple: true }
    ) %>
    <%= form.error_message_for :choices %>
  <% end %>
  <%= tag.div do %>
    <%= form.label :typeahead_cities %>
    <%= form.typeahead_select(
      :typeahead_cities,
      {
        "Austin, TX" => "austin",
        "Columbus, OH" => "columbus",
        "New York City, NY" => "nyc",
      },
      { include_blank: true }
    ) %>
    <%= form.error_message_for :typeahead_cities %>
  <% end %>
  <%= tag.div do %>
    <%= form.label :typeahead_facilities %>
    <%= form.typeahead_select(
      :typeahead_facilities,
      [
        ["Paris", [["Sulphur Springs", "sulphur_springs"]]],
        ["Test Facility", [["Mobile Test Facility 1", "mobile_test_facility_1"], ["Mobile Test Facility 2", "mobile_test_facility_2"]]],
        ["Other", [["Other", "other"]]],
      ],
      # Alternatively
      # {
      #   "Paris" => [["Sulphur Springs", "sulphur_springs"]],
      #   "Test Facility" => [["Mobile Test Facility 1", "mobile_test_facility_1"], ["Mobile Test Facility 2", "mobile_test_facility_2"]],
      #   "Other" => [["Other", "other"]],
      # },
      { include_blank: true }
    ) %>
    <%= form.error_message_for :typeahead_facilities %>
  <% end %>
  <%= tag.div do %>
    <%= form.label :months %>
    <%= form.autocomplete_field :months, src: months_path %>
  <% end %>
  <%= tag.div do %>
    <%= form.label :comments %>
    <%= form.text_area :comments %>
    <%= form.error_message_for :comments %>
  <% end %>
  <%= tag.div do %>
    <%= form.label "Default submit button", nil,required: true %>
    <%= form.submit %>
  <% end %>
  <%= tag.div do %>
    <%= form.label "Custom submit button", nil, required: true %>
    <%= form.submit "Custom button", variant: :critical %>
  <% end %>
<% end %>

No notes provided.

No params configured.