@@ -63,10 +63,10 @@ You probably want to use the same form for creating and editing resources. In Su
6363# app/views/posts/form.rb
6464class Views ::Posts ::Form < Components ::Form
6565 def view_template
66- field (:title ).text
67- field (:body ).textarea(rows: 10 )
68- field (:publish_at ).date
69- field (:featured ).checkbox
66+ Field (:title ).text
67+ Field (:body ).textarea(rows: 10 )
68+ Field (:publish_at ).date
69+ Field (:featured ).checkbox
7070 submit
7171 end
7272end
@@ -118,16 +118,16 @@ Superform includes helpers for all HTML5 input types:
118118``` ruby
119119class UserForm < Components ::Form
120120 def view_template
121- field (:email ).email # type="email"
122- field (:password ).password # type="password"
123- field (:website ).url # type="url"
124- field (:phone ).tel # type="tel"
125- field (:age ).number(min: 18 ) # type="number"
126- field (:birthday ).date # type="date"
127- field (:appointment ).datetime # type="datetime-local"
128- field (:favorite_color ).color # type="color"
129- field (:bio ).textarea(rows: 5 )
130- field (:terms ).checkbox
121+ Field (:email ).email # type="email"
122+ Field (:password ).password # type="password"
123+ Field (:website ).url # type="url"
124+ Field (:phone ).tel # type="tel"
125+ Field (:age ).number(min: 18 ) # type="number"
126+ Field (:birthday ).date # type="date"
127+ Field (:appointment ).datetime # type="datetime-local"
128+ Field (:favorite_color ).color # type="color"
129+ Field (:bio ).textarea(rows: 5 )
130+ Field (:terms ).checkbox
131131 submit
132132 end
133133end
@@ -142,14 +142,14 @@ class Views::Posts::Form < Components::Form
142142 def view_template
143143 div(class : " form-section" ) do
144144 h2 { " Post Details" }
145- field (:title ).text(class : " form-control" )
146- field (:body ).textarea(class : " form-control" , rows: 10 )
145+ Field (:title ).text(class : " form-control" )
146+ Field (:body ).textarea(class : " form-control" , rows: 10 )
147147 end
148148
149149 div(class : " form-section" ) do
150150 h2 { " Publishing" }
151- field (:publish_at ).date(class : " form-control" )
152- field (:featured ).checkbox(class : " form-check-input" )
151+ Field (:publish_at ).date(class : " form-control" )
152+ Field (:featured ).checkbox(class : " form-check-input" )
153153 end
154154
155155 div(class : " form-actions" ) do
@@ -204,8 +204,8 @@ That looks like a LOT of code, and it is, but look at how easy it is to create f
204204# ./app/views/users/form.rb
205205class Users ::Form < Components ::Form
206206 def view_template (& )
207- labeled field (:name ).input
208- labeled field (:email ).input(type: :email )
207+ labeled Field (:name ).input
208+ labeled Field (:email ).input(type: :email )
209209
210210 submit " Sign up"
211211 end
@@ -232,19 +232,19 @@ class AccountForm < Superform::Rails::Form
232232 # Account#owner returns a single object
233233 namespace :owner do |owner |
234234 # Renders input with the name `account[owner][name]`
235- owner.field (:name ).text
235+ owner.Field (:name ).text
236236 # Renders input with the name `account[owner][email]`
237- owner.field (:email ).email
237+ owner.Field (:email ).email
238238 end
239239
240240 # Account#members returns a collection of objects
241241 collection(:members ).each do |member |
242242 # Renders input with the name `account[members][0][name]`,
243243 # `account[members][1][name]`, ...
244- member.field (:name ).input
244+ member.Field (:name ).input
245245 # Renders input with the name `account[members][0][email]`,
246246 # `account[members][1][email]`, ...
247- member.field (:email ).input(type: :email )
247+ member.Field (:email ).input(type: :email )
248248
249249 # Member#permissions returns an array of values like
250250 # ["read", "write", "delete"].
@@ -278,7 +278,7 @@ By default Superform namespaces a form based on the ActiveModel model name param
278278``` ruby
279279class UserForm < Superform ::Rails ::Form
280280 def view_template
281- render field (:email ).input
281+ render Field (:email ).input
282282 end
283283end
284284
@@ -294,7 +294,7 @@ To customize the form namespace, like an ActiveRecord model nested within a modu
294294``` ruby
295295class UserForm < Superform ::Rails ::Form
296296 def view_template
297- render field (:email ).input
297+ render Field (:email ).input
298298 end
299299
300300 def key
@@ -320,10 +320,10 @@ In practice, many of the calls below you'd put inside of a method. This cuts dow
320320class SignupForm < Components ::Form
321321 def view_template
322322 # The most basic type of input, which will be autofocused.
323- field (:name ).input.focus
323+ Field (:name ).input.focus
324324
325325 # Input field with a lot more options on it.
326- field (:email ).input(type: :email , placeholder: " We will sell this to third parties" , required: true )
326+ Field (:email ).input(type: :email , placeholder: " We will sell this to third parties" , required: true )
327327
328328 # You can put fields in a block if that's your thing.
329329 field(:reason ) do |f |
@@ -338,8 +338,8 @@ class SignupForm < Components::Form
338338 # - A single value: "text" renders <option value="text">text</option>
339339 # - nil: renders an empty <option></option>
340340 div do
341- field (:contact ).label { " Would you like us to spam you to death?" }
342- field (:contact ).select (
341+ Field (:contact ).label { " Would you like us to spam you to death?" }
342+ Field (:contact ).select (
343343 [true , " Yes" ], # <option value="true">Yes</option>
344344 [false , " No" ], # <option value="false">No</option>
345345 " Hell no" , # <option value="Hell no">Hell no</option>
@@ -348,8 +348,8 @@ class SignupForm < Components::Form
348348 end
349349
350350 div do
351- field (:source ).label { " How did you hear about us?" }
352- field (:source ).select do |s |
351+ Field (:source ).label { " How did you hear about us?" }
352+ Field (:source ).select do |s |
353353 # Renders a blank option.
354354 s.blank_option
355355 # Pretend WebSources is an ActiveRecord scope with a "Social" category that has "Facebook, X, etc"
@@ -364,26 +364,26 @@ class SignupForm < Components::Form
364364
365365 # Pass nil as first argument to add a blank option at the start
366366 div do
367- field (:country ).label { " Select your country" }
368- field (:country ).select (nil , [1 , " USA" ], [2 , " Canada" ], [3 , " Mexico" ])
367+ Field (:country ).label { " Select your country" }
368+ Field (:country ).select (nil , [1 , " USA" ], [2 , " Canada" ], [3 , " Mexico" ])
369369 end
370370
371371 # Multiple select with multiple: true
372372 # - Adds the HTML 'multiple' attribute
373373 # - Appends [] to the field name (role_ids becomes role_ids[])
374374 # - Includes a hidden input to handle empty submissions
375375 div do
376- field (:role_ids ).label { " Select roles" }
377- field (:role_ids ).select (
376+ Field (:role_ids ).label { " Select roles" }
377+ Field (:role_ids ).select (
378378 [[1 , " Admin" ], [2 , " Editor" ], [3 , " Viewer" ]],
379379 multiple: true
380380 )
381381 end
382382
383383 # Combine multiple: true with nil for blank option
384384 div do
385- field (:tag_ids ).label { " Select tags (optional)" }
386- field (:tag_ids ).select (
385+ Field (:tag_ids ).label { " Select tags (optional)" }
386+ Field (:tag_ids ).select (
387387 nil , [1 , " Ruby" ], [2 , " Rails" ], [3 , " Phlex" ],
388388 multiple: true
389389 )
@@ -393,15 +393,15 @@ class SignupForm < Components::Form
393393 # The relation is passed as a single argument (not splatted)
394394 # OptionMapper extracts the primary key and joins other attributes for the label
395395 div do
396- field (:author_id ).label { " Select author" }
396+ Field (:author_id ).label { " Select author" }
397397 # For User.select(:id, :name), renders <option value="1">Alice</option>
398398 # where id=1 is the primary key and "Alice" is the name attribute
399- field (:author_id ).select (User .select (:id , :name ))
399+ Field (:author_id ).select (User .select (:id , :name ))
400400 end
401401
402402 div do
403- field (:agreement ).label { " Check this box if you agree to give us your first born child" }
404- field (:agreement ).checkbox(checked: true )
403+ Field (:agreement ).label { " Check this box if you agree to give us your first born child" }
404+ Field (:agreement ).checkbox(checked: true )
405405 end
406406
407407 render button { " Submit" }
@@ -416,9 +416,9 @@ If you want to add file upload fields to your form you will need to initialize y
416416class User ::ImageForm < Components ::Form
417417 def view_template
418418 # render label
419- field (:image ).label { " Choose file" }
419+ Field (:image ).label { " Choose file" }
420420 # render file input with accept attribute for png and jpeg images
421- field (:image ).input(type: " file" , accept: " image/png, image/jpeg" )
421+ Field (:image ).input(type: " file" , accept: " image/png, image/jpeg" )
422422 end
423423end
424424
@@ -454,8 +454,8 @@ Then, just like you did in your Erb, you create the form:
454454``` ruby
455455class Admin ::Users ::Form < AdminForm
456456 def view_template (& )
457- labeled field (:name ).tooltip_input
458- labeled field (:email ).tooltip_input(type: :email )
457+ labeled Field (:name ).tooltip_input
458+ labeled Field (:email ).tooltip_input(type: :email )
459459
460460 submit " Save"
461461 end
0 commit comments