Input Fields

The form fiels of the BeyondCanvas::FormBuilder support some extended attributes to facilitate the creation of forms. These custom attributes and custom data attributes can be combined with other regular attributes, such us class.

Here, you can find a list of all input fields that are included in Beyond Canvas and the extended custom attributes or custom data attributes they support:

check_box

More info

Supported custom attributes

Custom attribute	Description	Default
label	The label of the checkbox. Shown next to the checkbox.	Humanized field attribute name
hint	A hint that can be used for additional information related to the checkbox (e.g. the consequences of an activated checkbox). Displayed below the checkbox.	nil

Code example:

<%= f.check_box :terms_and_conditions, label: 'I accept the terms and conditions' %>

---

email_field

More info

Supported custom attributes

Custom attribute	Description	Default
label	The label of the email field. Shown above the field.	Humanized field attribute name
hint	A hint that can be used for additional information related to the field (e.g. length restrictions). Displayed below the field.	nil

Code example:

<%= f.email_field :email, label: 'Your email' %>

---

file_field

More info

Supported custom attributes

Custom attribute	Description	Default
label	The label of the file field. Shown above the field.	Humanized field attribute name
hint	A hint that can be used for additional information related to the field (e.g. size restrictions). Displayed below the field.	nil
button_text	The text displayed on the button.	'Choose file'
no_file_text	The text displayed if no file is selected.	'No file chosen'
multiple_selection_text	The text displayed if multiple files are selected. {count} is replaced by the number of selected files.	'{count} files selected'

Code example:

<%= f.file_field :avatar, label: 'Your avatar', hint: 'Max. 100MB', data: { button_text: 'Choose avatar', no_file_text: 'No avatar chosen' } %>

---

number_field

More info

Supported custom attributes

Custom attribute	Description	Default
label	The label of the field. Shown above the field.	Humanized field attribute name
hint	A hint that can be used for additional information related to the field. Displayed below the field.	nil

Code example:

<%= f.number_field :age, label: 'Your age' %>

---

password_field

More info

Supported custom attributes

Custom attribute	Description	Default
label	The label of the password field. Shown above the field.	Humanized field attribute name
hint	A hint that can be used for additional information related to the field (e.g. length restrictions). Displayed below the field.	nil

Code example:

<%= f.password_field :password, label: 'Your password', hint: 'Must contain letters and numbers.' %>

---

radio_button

More info

Supported custom attributes

Custom attribute	Description	Default
label	The label of the radio button. Shown next to the button.	Humanized field attribute name
hint	A hint that can be used for additional information related to the radio button (e.g. the consequences of the selection). Displayed below the button.	nil

Code example:

<%= f.radio_button :stock, 10, label: '10 items', checked: true %>
<%= f.radio_button :stock, 20, label: '20 items' %>
<%= f.radio_button :stock, 30, label: '30 items' %>

---

text_field

More info

Supported custom attributes

Custom attribute	Description	Default
label	The label of the text field. Shown above the field.	Humanized field attribute name
hint	A hint that can be used for additional information related to the text field (e.g. length restrictions). Displayed below the field.	nil

Code example:

<%= f.text_field :name, label: 'Your name' %>

---

select

More info

Supported custom attributes

Custom attribute	Description	Default
label	The label of the selection field. Shown above the field.	Humanized field attribute name
hint	A hint that can be used for additional information related to the selection field (e.g. the consequences of the selection). Displayed below the field.	nil

Code example:

<%= f.select :locale, options_for_select([['German', 'de-DE'], ['UK English', 'en-GB']]), {}, label: 'Select your preferred locale' %>