This repository was archived by the owner on Dec 12, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7
Input Fields
cgebken edited this page Nov 9, 2020
·
10 revisions
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:


More info
| 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 |
<%= f.check_box :terms_and_conditions, label: 'I accept the terms and conditions' %>
More info
| 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 |
<%= f.email_field :email, label: 'Your email' %>
More info
| 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' |
<%= f.file_field :avatar, label: 'Your avatar', hint: 'Max. 100MB', data: { button_text: 'Choose avatar', no_file_text: 'No avatar chosen' } %>
More info
| 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 |
<%= f.number_field :age, label: 'Your age' %>
More info
| 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 |
<%= f.password_field :password, label: 'Your password', hint: 'Must contain letters and numbers.' %>
More info
| 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 |
<%= 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' %>
More info
| 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 |
<%= f.text_field :name, label: 'Your name' %>
More info
| 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 |
<%= f.select :locale, options_for_select([['German', 'de-DE'], ['UK English', 'en-GB']]), {}, label: 'Select your preferred locale' %>- Home
- Getting Started
- Configuration
-
Customization
- Rails
- CSS
- JavaScript
- Forms
- How-to articles