How to Use Radio Button in Form Rails in Ruby on Rails
In Ruby on Rails, use the
radio_button helper inside a form builder to create radio buttons. It requires the attribute name and the value for each option, and Rails will handle the selection and submission automatically.Syntax
The radio_button helper is used inside a form builder block. It takes three main arguments: the attribute name, the value for the radio button, and optional HTML options.
- attribute: The model attribute the radio button sets.
- value: The value assigned if this radio button is selected.
- options: Optional HTML attributes like
id,class, orchecked.
erb
<%= form_with model: @user do |form| %> <%= form.radio_button :gender, 'male' %> Male<br> <%= form.radio_button :gender, 'female' %> Female <% end %>
Example
This example shows a simple form for a User model with a gender attribute. Two radio buttons let the user select 'male' or 'female'. When submitted, the selected value is saved to the gender attribute.
erb
<!-- app/views/users/_form.html.erb --> <%= form_with model: @user, local: true do |form| %> <p>Select Gender:</p> <%= form.radio_button :gender, 'male' %> <%= form.label :gender_male, 'Male' %><br> <%= form.radio_button :gender, 'female' %> <%= form.label :gender_female, 'Female' %><br> <%= form.submit 'Save' %> <% end %>
Output
<form action="/users" method="post">
<p>Select Gender:</p>
<input type="radio" value="male" name="user[gender]" id="user_gender_male">
<label for="user_gender_male">Male</label><br>
<input type="radio" value="female" name="user[gender]" id="user_gender_female">
<label for="user_gender_female">Female</label><br>
<input type="submit" value="Save">
</form>
Common Pitfalls
Common mistakes include:
- Not using the form builder's
radio_buttonhelper, which can cause name or id mismatches. - Forgetting to add labels linked to radio buttons for accessibility.
- Not setting the
checkedstate properly, which Rails handles automatically if the model attribute matches the value.
erb
<!-- Wrong: Missing form builder and labels --> <input type="radio" name="gender" value="male"> Male<br> <input type="radio" name="gender" value="female"> Female<br> <!-- Right: Using form builder and labels --> <%= form.radio_button :gender, 'male' %> <%= form.label :gender_male, 'Male' %><br> <%= form.radio_button :gender, 'female' %> <%= form.label :gender_female, 'Female' %><br>
Quick Reference
Tips for using radio buttons in Rails forms:
- Always use
form.radio_buttoninside a form builder block. - Pair each radio button with a
form.labelfor better accessibility. - Rails auto-selects the radio button matching the model's attribute value.
- Use
local: trueinform_withfor synchronous form submission during development.
Key Takeaways
Use the form builder's radio_button helper with attribute and value to create radio buttons.
Always add labels linked to radio buttons for accessibility and clarity.
Rails automatically checks the radio button matching the model's attribute value.
Avoid manually writing radio inputs to prevent name and id mismatches.
Use local: true in form_with for easier testing during development.