0
0
RailsHow-ToBeginner · 3 min read

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, or checked.
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_button helper, which can cause name or id mismatches.
  • Forgetting to add labels linked to radio buttons for accessibility.
  • Not setting the checked state 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_button inside a form builder block.
  • Pair each radio button with a form.label for better accessibility.
  • Rails auto-selects the radio button matching the model's attribute value.
  • Use local: true in form_with for 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.