https://github.com/shivam091/rails_bootstrap_form
Rails form helpers and form builder extensions that make it super easy to build forms in Bootstrap 5 styles.
https://github.com/shivam091/rails_bootstrap_form
bootstrap5 date-helpers form-builder form-helpers form-options-helpers form-validation rails ruby
Last synced: about 1 year ago
JSON representation
Rails form helpers and form builder extensions that make it super easy to build forms in Bootstrap 5 styles.
- Host: GitHub
- URL: https://github.com/shivam091/rails_bootstrap_form
- Owner: shivam091
- License: mit
- Created: 2023-05-15T04:18:13.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-02T15:48:17.000Z (almost 3 years ago)
- Last Synced: 2025-04-24T00:44:52.249Z (about 1 year ago)
- Topics: bootstrap5, date-helpers, form-builder, form-helpers, form-options-helpers, form-validation, rails, ruby
- Language: Ruby
- Homepage:
- Size: 388 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# RailsBootstrapForm
[](https://github.com/shivam091/rails_bootstrap_form/actions/workflows/main.yml)
[](https://badge.fury.io/rb/rails_bootstrap_form)
[](http://rubygems.org/gems/rails_bootstrap_form)
[](https://codeclimate.com/github/shivam091/rails_bootstrap_form/test_coverage)
[](https://codeclimate.com/github/shivam091/rails_bootstrap_form/maintainability)
**rails_bootstrap_form** is a Rails form builder that makes it super easy to integrate [Bootstrap 5](https://getbootstrap.com/) forms into your Rails application.
`rails_bootstrap_form`'s form helpers generate the form field and its label along with all the Bootstrap mark-up required for proper Bootstrap display.
## Minimum Requirements
* Ruby 3.2.2+ (https://www.ruby-lang.org/en/downloads/branches/)
* Rails 7.0+ (https://guides.rubyonrails.org/maintenance_policy.html)
* Bootstrap 5.0+ (https://getbootstrap.com/docs/versions/)
## Installation
Install Bootstrap 5. There are many ways to do this, depending on the asset pipeline you're using in your Rails application.
One way is to use the gem that works with Sprockets. To do so, in a brand new Rails 7.0 application created _without_ the
`--webpacker` option, add the `bootstrap` gem to your `Gemfile`:
```ruby
gem "bootstrap", "~> 5.0"
```
And follow the remaining instructions in the [official bootstrap installation guide](https://github.com/twbs/bootstrap-rubygem#a-ruby-on-rails)
for setting up `application.scss` and `application.js`.
Add the `rails_bootstrap_form` gem to your `Gemfile`:
```ruby
gem "rails_bootstrap_form", "~> 0.9.8"
```
Then:
`bundle install`
Depending on which CSS pre-processor you are using, adding the bootstrap form styles differs slightly.
If you use Rails in the default mode without any pre-processor, you'll have to add the following line to your `application.css` file:
```css
*= require rails_bootstrap_form
```
If you followed the [official bootstrap installation guide](https://github.com/twbs/bootstrap-rubygem#a-ruby-on-rails),
you'll probably have switched to SCSS. In this case add the following line to your `application.scss`:
```scss
@import "rails_bootstrap_form";
```
## Configuration
`rails_bootstrap_form` can be used without any configuration. However, `rails_bootstrap_form` does have an optional configuration file at `config/initializers/rails_bootstrap_form.rb` for setting options that affect all generated forms in an application. This configuration file is created using the generator
by running the command:
```
$ rails generate rails_bootstrap_form:install
```
Example:
```ruby
# config/initializers/rails_bootstrap_form.rb
RailsBootstrapForm.configure do |config|
# to make forms non-compliant with W3C.
config.default_form_attributes = {novalidate: true}
end
```
The current configuration options are:
| Option | Default value | Description |
|---------------------------|------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `default_form_attributes` | | Set this option to `{novalidate: true}` to instruct `rails_bootstrap_form` to skip all HTML 5 validation. |
## Usage
### bootstrap_form_for
To get started, use the `bootstrap_form_for` helper in place of the Rails [`form_for`](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-form_for) helper. Here's an example:
```erb
<%= bootstrap_form_for(@user) do |f| %>
<%= f.email_field :email %>
<%= f.password_field :password %>
<%= f.check_box :remember_me %>
<%= f.primary "Log In" %>
<% end %>
```
This generates the following HTML:
```html
Email address
Password
I accept terms and conditions
You must first accept terms and conditions in order to continue
```
### bootstrap_form_with
To get started, use the `bootstrap_form_with` helper in place of the Rails [`form_with`](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-form_with) helper. Here's an example:
```erb
<%= bootstrap_form_with(model: @user) do |f| %>
<%= f.email_field :email %>
<%= f.password_field :password %>
<%= f.check_box :remember_me %>
<%= f.primary "Log In" %>
<% end %>
```
This generates the following HTML:
```html
Email address
Password
I accept terms and conditions
You must first accept terms and conditions in order to continue
```
## Bootstrap Configuration Options
Here's a list of all possible options you can pass via `bootstrap` option that can be attached to the `bootstrap_form_for`, `bootstrap_form_with`, `fields_for`, or any field helpers inside of it:
| Option | Description | Default value |
| ------ | ------------- | ----------- |
| `disabled` | An option to disable **rails_bootstrap_form** helpers. Default rails form builder element is rendered when set to `true` | `false` |
| `layout` | Controls layout of form and field helpers. It can be `vertical` `horizontal`, or `inline`. | `vertical` |
| `field_class` | A CSS class that will be applied to all form fields. | `nil` |
| `help_text` | Describes help text for the HTML field. Help text is automatically read from translation file. If you want to customize it, you can pass a string. You can also set it `false` if you do not want help text displayed. | `nil` |
| `label_text` | An option to customize automatically generated label text. | `nil` |
| `skip_label` | An option to control whether the label is to be displayed or not. | `false` |
| `hide_label` | An option to control whether the label is only accessible to a screen readers. | `false` |
| `hide_class` | A CSS class that will be used when the label is only accessible to a screen readers. | `visually-hidden` |
| `label_class` | A CSS class that will be applied to all labels when layout is `vertical`. | `form-label` |
| `additional_label_class` | An additional CSS class that will be added along with the existing label css classes. | `nil` |
| `prepend` | Raw or HTML content to be prepended to the field. | `nil` |
| `append` | Raw or HTML content to be appended to the field. | `nil` |
| `additional_input_group_class` | An additional CSS class that will be added to existing input group wrapper css classes. | `nil` |
| `floating` | An option to control whether the field should have a floating label. | `false` |
| `static_field_class` | A CSS class that will be applied to all static fields. | `form-control-plaintext` |
| `switch` | An option to control whether the check box should look like Bootstrap switches. | `false` |
| `wrapper` | An option to control the HTML attributes and options that will be added to a field wrapper. You can set it false if you don't the field to be rendered in a wrapper. | `{}` |
| `size` | An option to control the size of input groups, buttons, labels, and fields. It can be `sm` or `lg`. | `nil` |
| `inline` | An option to group checkboxes and radio buttons on the same horizontal row. If form layout is `inline`, this option doesn't get considered. | `false` |
| `label_col_class` | A CSS class that will be applied to all labels when layout is `horizontal`. | `col-form-label` |
| `label_col_wrapper_class` | A CSS class for label column when layout is `horizontal`. | `col-sm-2` |
| `field_col_wrapper_class` | A CSS class for field column when layout is `horizontal`. | `col-sm-10` |
| `render_as_button` | An option to render submit button using `` instead of ``. | `false` |
Options defined on the form level will apply to all field helpers. Options defined on field helpers takes precedence over form-level options.
Here's an example of a form where one field uses different layout:
```erb
<%= bootstrap_form_for @user do |form| %>
<%= form.text_field :name %>
<%= form.email_field :email %>
<%= form.password_field :password, bootstrap: {layout: :horizontal} %>
<%= form.check_box :terms %>
<%= form.primary "Register" %>
<% end %>
```
This generates the following HTML:
```html
Name
Email address
Password
I accept terms and conditions
You must first accept terms and conditions in order to continue
```
### Disabling Bootstrap
You can completely disable bootstrap and use default form builder by passing `disabled: true` option. For example:
```erb
<%= form.text_field :username, bootstrap: {disabled: true} %>
```
This generates the following HTML:
```html
```
### Disabling wrapper
In some cases, you may need to disable the default wrapper. You can do this by passing `wrapper: false` option:
```erb
<%= form.text_field :name, bootstrap: {wrapper: false} %>
```
This generates the following HTML:
```html
Name
```
### Add additional CSS class
You can use `additional_field_class` option at form or field level to add extra CSS classes to the fields.
```erb
<%= form.text_field :name, autocomplete: "new-name", bootstrap: {additional_field_class: "custom-class"} %>
```
This generates the following HTML:
```html
Name
```
You can also use HTML `class` attribute to add additional CSS class to the single field:
```erb
<%= form.text_field :name, autocomplete: "new-name", class: "custom-class" %>
```
This generates the following HTML:
```html
Name
```
Here `additional_field_class` option takes precedance over HTML `class` attribute:
```erb
<%= form.text_field :name, autocomplete: "new-name", bootstrap: {additional_field_class: "custom-class"}, class: "html-class" %>
```
This generates the following HTML:
```html
Name
```
## Supported Form Helpers
This gem wraps most of the form field helpers. Here's the current list:
```
check_box collection_check_boxes collection_radio_buttons
collection_select color_field date_field
date_select datetime_field datetime_local_field
datetime_select email_field file_field
grouped_collection_select hidden_field month_field
number_field password_field phone_field
radio_button range_field rich_text_area
search_field select static_field
telephone_field text_area text_field
time_field time_select time_zone_select
url_field week_field weekday_select
```
## Supported Form Layouts
### Vertical Layout
This layout is default layout for the form in which labels are above the fields. In this layout, labels and fields take 100% of the width.
Here's an example of how it looks like:
```erb
<%= bootstrap_form_for @user do |form| %>
<%= form.email_field :email %>
<%= form.password_field :password %>
<%= form.primary "Sign in" %>
<% end %>
```
This generates the following HTML:
```html
Email address
Password
```
### Horizontal Layout
If you want to align label and field side by side, you can use horizontal layout for the form.
You can optionally override `label_col_wrapper_class` and `field_col_wrapper_class` (they default to `col-sm-2` and `col-sm-10`) at either form level
or field level if want to customize space between label and field.
Here's an example of how it looks like by default:
```erb
<%= bootstrap_form_for @user, bootstrap: {layout: :horizontal} do |form| %>
<%= form.email_field :email %>
<%= form.password_field :password %>
<%= form.primary "Sign in" %>
<% end %>
```
This generates the following HTML:
```html
Email address
Password
```
The `label_col_wrapper_class` and `field_col_wrapper_class` css classes can also be customized per control:
```erb
<%= bootstrap_form_for @user, bootstrap: {layout: :horizontal} do |form| %>
<%= form.text_field :name %>
<%= form.email_field :username, bootstrap: {label_col_wrapper_class: "col-sm-2", field_col_wrapper_class: "col-sm-6"} %>
<%= form.password_field :password %>
<%= form.fields_for :address, include_id: false do |address_form| %>
<%= address_form.select :country_id, options_for_select(::Country.pluck(:name, :id), address_form.object.country_id),
{include_blank: "Select Country"} %>
<% end %>
<%= form.primary "Register" %>
<% end %>
```
This generates the following HTML:
```html
Name
Username
Password
Country
Select Country
India
Ireland
United States
United Kingdom
```
### Inline Layout
You may choose to render form elements in one line. Please note that this layout won't render all form elements perfectly. Things like errors messages and help text won't show up right.
Here's an example of how it looks like:
```erb
<%= bootstrap_form_for @user, bootstrap: {layout: :inline} do |form| %>
<%= form.email_field :email %>
<%= form.password_field :password %>
<%= form.primary "Sign in" %>
<% end %>
```
This generates the following HTML:
```html
Email address
Password
```
## Components
`rails_bootstrap_form` internally supports below components which act as helpers to build fields and their wrappers.
### Labels
By default, Rails takes label text from locale file. You can use `label_text` option to change label text
generated by the Rails.
```erb
<%= form.password_field :password, bootstrap: {label_text: "New password"} %>
```
This generates the following HTML:
```html
New password
```
To hide a label, you can set `hide_label: true` option. This adds the `visually-hidden` class, which keeps your labels accessible
to those using screen readers.
```erb
<%= form.password_field :password, bootstrap: {hide_label: true} %>
```
This generates the following HTML:
```html
Password
```
To skip a label, you can set `skip_label: true` option. This will not render label in a field wrapper.
```erb
<%= form.password_field :password, bootstrap: {skip_label: true} %>
```
This generates the following HTML:
```html
```
To add additional CSS class to the label, you can use `additional_label_class` option.
```erb
<%= form.password_field :password, bootstrap: {additional_label_class: "text-danger"} %>
```
This generates the following HTML:
```html
Password
```
### Help Text
The help text is useful when you want to provide helpful information about a field. By default, `rails_bootstrap_form` takes help text from locale file.
If you want to show information regarding any field, you need to add it in locale file of your application. You can also use HTML content for help text.
```yml
en:
activerecord:
help_texts:
user:
password: "A strong password should be at least twelve characters long with combination of uppercase letters, lowercase letters, numbers, and symbols"
```
```erb
<%= form.password_field :password %>
```
This generates the following HTML:
```html
Password
A strong password should be at least twelve characters long with combination of uppercase letters, lowercase letters, numbers, and symbols
```
You can customize the help text using `help_text` option:
```erb
<%= form.password_field :password, bootstrap: {help_text: "Password should not be disclosed to anyone."} %>
```
This generates the following HTML:
```html
Password
Password should not be disclosed to anyone.
```
You can also disable help text by setting `help_text: false` option:
```erb
<%= form.password_field :password, help_text: false %>
```
This generates the following HTML:
```html
Password
```
### Input Groups
Input groups allow prepending and appending arbitrary html or text to the field.
You can use `prepend` and/or `append` options to attach addons to input fields:
```erb
<%= form.number_field :expected_ctc, bootstrap: {prepend: "₹", append: ".00"} %>
```
This generates the following HTML:
```html
Expected CTC
₹
.00
```
If you want to attach multiple addons to the input, pass them as an array:
```erb
<%= form.number_field :expected_ctc, bootstrap: {prepend: ["Gross", "₹"], append: [".00", "per annum"]} %>
```
This generates the following HTML:
```html
Expected CTC
Gross
₹
.00
per annum
```
You can also prepend and append buttons. Note that these buttons must contain the `btn` class to generate the correct markup.
```erb
<%= form.text_field :search, bootstrap: {append: form.secondary("Search")} %>
```
This generates the following HTML:
```html
Search
```
To add additional CSS class to the input group wrapper, you can use `additional_input_group_class` option.
```erb
<%= form.number_field :expected_ctc, bootstrap: {prepend: "₹", append: ".00", additional_input_group_class: "custom-class"} %>
```
This generates the following HTML:
```html
Expected CTC
₹
.00
```
You can customize size of the input group using `size` option. Input group supports `sm` and `lg` values.
```erb
<%= form.number_field :expected_ctc, bootstrap: {prepend: "₹", append: ".00", size: :sm} %>
```
This generates the following HTML:
```html
Expected CTC
₹
.00
```
## Form Helpers
Our form helpers accept the same arguments as the default Rails form helpers.
In order to apply addition options of `rails_bootstrap_form`, `bootstrap` object is passed in `options` argument of the helper.
Here's an example of how you pass the arguments for each form helper:
### check_box
Our `check_box` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-check_box).
except it don't accept a `block` as an argument and renders check box and label for you.
```erb
<%= form.check_box :remember_me %>
```
This generates the following HTML:
```html
Keep me signed in
```
You can set `switch: true` option if you want check box to look like switches.
```erb
<%= form.check_box :remember_me, bootstrap: {switch: true} %>
```
This generates the following HTML:
```html
Keep me signed in
```
This helper also renders help text if `help_text` option is set or information of the field is added to the locale file:
```erb
<%= form.check_box :terms, required: true %>
```
This generates the following HTML:
```html
I accept terms and conditions
You must first accept terms and conditions in order to continue
```
### color_field
Our `color_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-color_field).
```erb
<%= form.color_field :favorite_color %>
```
This generates the following HTML:
```html
Favorite color
```
### date_field
Our `date_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-date_field).
```erb
<%= form.date_field :interview_date %>
```
This generates the following HTML:
```html
Interview date
```
### datetime_field
Our `datetime_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-datetime_field).
```erb
<%= form.datetime_field :interview_datetime %>
```
This generates the following HTML:
```html
Interview date & time
```
### datetime_local_field
Our `datetime_local_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-datetime_local_field).
```erb
<%= form.datetime_local_field :interview_datetime %>
```
This generates the following HTML:
```html
Interview date & time
```
### email_field
Our `email_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-email_field).
```erb
<%= form.email_field :email %>
```
This generates the following HTML:
```html
Email address
```
### fields_for
Our `fields_for` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-fields_for).
`rails_bootstrap_form` allows us to set `bootstrap` option just like `bootstrap_form_for` and `bootstrap_form_with`. By setting this option on `fields_for`, it applies to all the fields defined for that nested form:
```erb
<%= bootstrap_form_for @user do |form| %>
<%= form.email_field :email, autocomplete: "new-email" %>
<%= form.password_field :password, autocomplete: "new-password", bootstrap: {layout: :horizontal} %>
<%= form.phone_field :mobile_number %>
<%= form.fields_for :address, include_id: false, bootstrap: {layout: :horizontal} do |address_form| %>
<%= address_form.select :country_id, options_for_select(::Country.pluck(:name, :id), address_form.object.country_id),
{include_blank: "Select Country"} %>
<% end %>
<%= form.check_box :terms, required: true %>
<%= form.primary "Register" %>
<% end %>
```
This generates the following HTML:
```html
Email address
Please use official email address
Password
Mobile number
Country
Select Country
India
Ireland
United States
United Kingdom
Spain
France
Canada
I accept terms and conditions
You must first accept terms and conditions in order to continue
```
By setting `bootstrap` option on `bootstrap_form_for` or `bootstrap_form_with`, this option also applies to all the fields defined in fields_for block:
```erb
<%= bootstrap_form_for @user, bootstrap: {layout: :horizontal} do |form| %>
<%= form.email_field :email, autocomplete: "new-email" %>
<%= form.password_field :password, autocomplete: "new-password" %>
<%= form.phone_field :mobile_number %>
<%= form.fields_for :address, include_id: false do |address_form| %>
<%= address_form.select :country_id, options_for_select(::Country.pluck(:name, :id), address_form.object.country_id),
{include_blank: "Select Country"} %>
<% end %>
<%= form.check_box :terms, required: true %>
<%= form.primary "Register" %>
<% end %>
```
This generates the following HTML:
```html
Email address
Please use official email address
Password
Mobile number
Country
Select Country
India
Ireland
United States
United Kingdom
Spain
France
Canada
I accept terms and conditions
You must first accept terms and conditions in order to continue
```
Options specified at the field level take precedence over those specified at the fields_for level, which take precedence over those specified at the form level.
### file_field
Our `file_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-file_field).
```erb
<%= form.file_field :avatar %>
```
This generates the following HTML:
```html
Avatar
```
### hidden_field
The `hidden_field` helper in `rails_bootstrap_form` calls the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-hidden_field) directly, and does no additional mark-up.
### month_field
Our `month_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-month_field).
```erb
<%= form.month_field :birth_month %>
```
This generates the following HTML:
```html
Birth month
```
### number_field
Our `number_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-number_field).
```erb
<%= form.number_field :expected_ctc %>
```
This generates the following HTML:
```html
Expected CTC
```
### password_field
Our `password_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-password_field).
```erb
<%= form.password_field :password %>
```
This generates the following HTML:
```html
Password
```
### phone_field
Our `phone_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-phone_field).
```erb
<%= form.phone_field :mobile_number %>
```
This generates the following HTML:
```html
Mobile number
```
### radio_button
Our `radio_button` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-radio_button).
This helper will render check box and label for you.
```erb
<%= form.radio_button :gender, :male, bootstrap: {label_text: "Male"} %>
```
This generates the following HTML:
```html
Male
```
This helper also renders help text if `help_text` option is set or information of the field is added to the locale file:
```erb
<%= form.radio_button :gender, :male, bootstrap: {label_text: "Male", help_text: "Please select your gender"} %>
```
This generates the following HTML:
```html
Male
Please select your gender
```
### range_field
Our `range_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-range_field).
```erb
<%= form.range_field :excellence %>
```
This generates the following HTML:
```html
Excellence
```
### rich_text_area
Our `rich_text_area` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-rich_text_area). This editor is also known as `Trix Editor`.
```erb
<%= form.rich_text_area :life_story %>
```
This generates the following HTML:
```html
Life story
```
### search_field
Our `search_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-search_field).
```erb
<%= form.search_field :search %>
```
This generates the following HTML:
```html
Search
```
### telephone_field
Our `telephone_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-telephone_field).
```erb
<%= form.telephone_field :mobile_number %>
```
This generates the following HTML:
```html
Mobile number
```
### text_field
Our `text_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-text_field).
```erb
<%= form.text_field :name %>
```
This generates the following HTML:
```html
Name
```
### text_area
Our `text_area` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-text_area).
```erb
<%= form.text_area :street %>
```
This generates the following HTML:
```html
Street
```
### time_field
Our `time_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-time_field).
```erb
<%= form.time_field :interview_time %>
```
This generates the following HTML:
```html
Interview time
```
### url_field
Our `url_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-url_field).
```erb
<%= form.url_field :blog_url %>
```
This generates the following HTML:
```html
Blog URL
```
### week_field
Our `week_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-week_field).
```erb
<%= form.week_field :winter_holiday_week %>
```
This generates the following HTML:
```html
Winter holiday week
```
## Form Options Helpers
Our form options helpers accept the same arguments as the default Rails form options helpers.
In order to apply addition options of `rails_bootstrap_form`, `bootstrap` object is passed in `options` argument of the helper.
Here's an example of how you pass the arguments for each form option helper:
### select
Our `select` helper accepts the same arguments as the [default Rails helper](http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-select).
Here's an example of how you pass both options and html_options hashes:
```erb
<%= form.select :fruit_id, options_for_select(::Fruit.pluck(:name, :id), form.object.fruit_id), {include_blank: "Select fruit", bootstrap: {size: :sm, help_text: false}}, {onchange: "this.form.submit();"} %>
```
This generates the following HTML:
```html
Favorite fruit
Select fruit
Mango
Apple
Orange
Watermelon
```
### collection_select
Our `collection_select` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-collection_select).
Here's an example of how you pass both options and html_options hashes:
```erb
<%= form.collection_select :fruit_id, ::Fruit.all, :id, :name, {include_blank: "Select fruit", bootstrap: {help_text: false}}, {selected: form.object.fruit_id, onchange: "this.form.submit();"} %>
```
This generates the following HTML:
```html
Favorite fruit
Select fruit
Mango
Apple
Orange
Watermelon
```
### grouped_collection_select
Our `grouped_collection_select` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-grouped_collection_select).
Here's an example of how you pass both options and html_options hashes:
```erb
<%= form.grouped_collection_select :city, ::Country.includes(:cities), :cities, :name, :id, :name, {include_blank: "Select city", bootstrap: {floating: true}}, {onchange: "this.form.submit();"} %>
```
This generates the following HTML:
```html
Select city
Mumbai
New Delhi
Kolkata
Chennai
Dublin
Galway
Cork
Belfast
New York
Los Angeles
San Francisco
Chicago
...
...
City
```
### time_zone_select
Our `time_zone_select` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-time_zone_select).
Here's an example of how you pass both options and html_options hashes:
```erb
<%= form.time_zone_select :timezone, ::ActiveSupport::TimeZone.all, {include_blank: "Select time zone", bootstrap: {label_text: "Preferred time zone"}}, {onchange: "this.form.submit();"} %>
```
This generates the following HTML:
```html
Preferred time zone
Select time zone
(GMT-12:00) International Date Line West
(GMT-11:00) American Samoa
(GMT-11:00) Midway Island
(GMT-10:00) Hawaii
(GMT-09:00) Alaska
(GMT-08:00) Pacific Time (US & Canada)
(GMT-08:00) Tijuana
(GMT-07:00) Arizona
...
...
```
### weekday_select
Our `weekday_select` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-weekday_select).
Here's an example of how you pass both options and html_options hashes:
```erb
<%= form.weekday_select :weekly_off, {selected: "Monday", bootstrap: {label_text: "Week off"}}, {onchange: "this.form.submit();"} %>
```
This generates the following HTML:
```html
Week off
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
```
### collection_check_boxes
This helper provides a way to create collection of check boxes. This helper accepts same arguments as [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-collection_check_boxes) except it don't accept a `block` as
an argument and takes care of rendering labels, check boxes, and wrapper for you. `collection_check_boxes` are rendered by default for multiple option selections, but you can turn them into single selections by passing `options[:multiple] = false`.
```erb
<%= form.collection_check_boxes :skill_ids, ::Skill.all, :id, :name, {bootstrap: {layout: :horizontal, inline: true}, onchange: "this.form.submit();"}, {} %>
```
This generates the following HTML:
```html
Skills
Communication
Problem Solving
Leadership
Writing
Creativity
Time Management
Team Work
Negotiation
Decision Making
Management
Select your strong skills
```
_If form layout is inline, `collection_check_boxes` always render `inline` check boxes._
### collection_radio_buttons
This helper provides a way to create collection of radio buttons. This helper accepts same arguments as [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-collection_radio_buttons) except it don't accept a `block` as
an argument and takes care of rendering labels, radio button, and wrapper for you.
```erb
<%= form.collection_radio_buttons :fruit_id, ::Fruit.all, :id, :name, {checked: form.object.fruit_id, bootstrap: {layout: :horizontal, inline: true}}, {} %>
```
This generates the following HTML:
```html
Favorite fruit
Select your favorite fruit
```
_If form layout is inline, `collection_check_boxes` always render `inline` check boxes._
## Date Helpers
The multiple selects that the date and time helpers (`date_select`, `time_select`, `datetime_select`) generate are wrapped inside a `fieldset.rails-bootstrap-forms-[date|time|datetime]-select` tag.
This is because Bootstrap automatically styles our controls as blocks. This wrapper fixes this defining these selects as `inline-block` and a width of `auto`.
In order to apply addition options of `rails_bootstrap_form`, `bootstrap` object is passed in `options` argument of the helper.
### date_select
Our `date_select` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-date_select).
Here's an example of how you pass both options and html_options hashes:
```erb
<%= form.date_select :interview_date, {selected: form.object.interview_date, bootstrap: {label_text: "Choose interview date"}}, {onchange: "this.form.submit();"} %>
```
This generates the following HTML:
```html
Choose interview date
2018
2019
2020
2021
2022
2023
...
...
January
February
March
April
May
...
...
1
2
3
4
5
6
7
8
...
...
```
### time_select
Our `time_select` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-time_select).
Here's an example of how you pass both options and html_options hashes:
```erb
<%= form.time_select :interview_time, {selected: form.object.interview_time, bootstrap: {label_text: "Choose interview time"}}, {onchange: "this.form.submit();"} %>
```
This generates the following HTML:
```html
Choose interview time
00
01
02
03
04
...
...
:
00
01
02
03
04
05
...
...
```
### datetime_select
Our `datetime_select` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-datetime_select).
Here's an example of how you pass both options and html_options hashes:
```erb
<%= form.datetime_select :interview_datetime, {selected: form.object.interview_datetime, bootstrap: {label_text: "Choose interview date & time"}}, {onchange: "this.form.submit();"} %>
```
This generates the following HTML:
```html
Choose interview date & time
2018
2019
2020
2021
...
...
January
February
March
April
...
...
1
2
3
4
5
6
...
...
—
00
01
02
03
04
...
...
:
00
01
02
03
04
...
...
```
## Submit Buttons
`rails_bootstrap_form` allows to easily create submit button for the form. `rails_bootstrap_form` supports three color variants for submit buttons: `secondary`, `primary`, and `danger`. Submit buttons are supported in `vertical`, `horizontal`, and `inline` layout.
Submit buttons in inline form are wrapped inside `div.col-12` to properly align on small width devices.
```erb
<%= form.secondary "Search" %>
<%= form.primary "Register" %>
<%= form.danger "Delete" %>
```
This generates the following HTML:
```html
```
It is also possible to pass additional classes to the button helpers using HTML `class` attribute and that class will be
added along with default class of the submit helper.
```erb
<%= form.primary "Register", class: "register-button" %>
```
This generates the following HTML:
```html
```
To render submit helper as a button helper, you can set `render_as_button: true` option or pass a block.
```erb
<%= form.primary "Register", bootstrap: {render_as_button: true} %>
<%= form.secondary do %>
Sign in
<% end %>
```
This generates the following HTML:
```html
Register
Sign in
```
## Static controls
`rails_bootstrap_form` provides form helper `static_field` to render static controls which internally uses [text_field](#text_field) form helper.
It sets `readonly` and `disabled` attributes on the text field. By default, `static_field` applies `form-control-plaintext`
CSS class to the control but you can change it by using option `static_field_class`.
You can create a static controls like this:
```erb
<%= form.static_field :email %>
```
This generates the following HTML:
```html
Email address
```
_`static_field` supports all the bootstrap options which are supported by `text_field`._
## Floating Labels
The `floating` option can be used to enable Bootstrap floating labels. This option is supported on text fields, text areas and dropdowns. Here's an example:
```erb
<%= bootstrap_form_for @user, bootstrap: {floating: true} do |form| %>
<%= form.text_field :name %>
<%= form.email_field :username %>
<%= form.password_field :password %>
<%= form.fields_for :address, include_id: false do |address_form| %>
<%= address_form.text_area :street %>
<%= address_form.select :country_id, options_for_select(::Country.pluck(:name, :id), address_form.object.country_id),
{include_blank: "Select Country"} %>
<% end %>
<%= form.primary "Register" %>
<% end %>
```
This generates the following HTML:
```html
Name
Username
Password
Street
Select Country
India
Ireland
United States
United Kingdom
Country
```
_`rails_bootstrap_form` automatically disables floating labels for unsupported helpers._
## Validation and Errors
By default, `rails_bootstrap_form` generations in-line errors which appear below the field.
### Inline Errors
By default, fields that have validation errors will be outlined in red and the error will be displayed below the field. Here's an example:
```erb
<%= bootstrap_form_for @user do |form| %>
<%= form.email_field :email %>
<%= form.password_field :password %>
<%= form.primary "Register" %>
<% end %>
```
This generates the following HTML:
```html
Email address
can't be blank
Please use official email address
Password
can't be blank
```
Inline errors are also supported if the field is wrapped inside of input group and has floating label:
```erb
<%= form.text_field :expected_ctc, bootstrap: {floating: true, prepend: "$", append: "0.0"} %>
```
This generates the following HTML:
```html
$
Expected CTC
0.0
can't be blank
```
The `has-validation` CSS class is added to an input group when the field has errors.
The `is-invalid` CSS class is added to floating label container when field with floating label has errors.
## Required Fields
A label that is associated with a mandatory field is automatically annotated with a `required` CSS class. `rails_bootstrap_form` provides styling for required fields.
You're also free to add any appropriate CSS to style required fields as desired.
The label `required` class is determined based on the definition of a presence validator with the associated model attribute. Presently this is one of: `ActiveRecord::Validations::PresenceValidator` or `ActiveModel::Validations::PresenceValidator`.
In cases where this behaviour is undesirable, use the required option to force the class to be present or absent:
```
<%= form.date_field :birth_date, required: false %>
<%= form.url_field :blog_url, required: true %>
```
This generates the following HTML:
```html
Birth date
Blog URL
```
### Required `belongs_to` associations
Adding a form control for a `belongs_to` associated field will automatically pick up the associated presence validator.
```erb
<%= form.collection_radio_buttons :fruit_id, ::Fruit.all, :id, :name, {checked: form.object.fruit_id} %>
```
This generates the following HTML:
```html
Favorite fruit
Select your favorite fruit
```
## Internationalization
`rails_bootstrap_form` follows standard rails conventions so it's i18n-ready. See more [here](http://guides.rubyonrails.org/i18n.html#translations-for-active-record-models)
## Other Tips
### Empty But Visible Labels
Some third party plug-ins require an empty but visible label on an input control. The `hide_label` option generates a label that won't appear on the screen, but it's considered invisible and therefore doesn't work with such a plug-in. An empty label (e.g. `""`) causes the underlying Rails helpers to generate a label based on the field's attribute's name.
The solution is to use a zero-width character for the label, or some other "empty" HTML. For example:
```erb
bootstrap: {label_text: "".html_safe}
```
or
```erb
bootstrap: {label_text: "".html_safe}
```
## Contributing
I welcome contributions. If you wish to contribute in `rails_bootstrap_form`, please review the [Contributing](/CONTRIBUTING.md) document first.
## License
Copyright 2023 [Harshal V. LADHE](https://github.com/shivam091), Released under the MIT License