RadioButton

Enhanced radio button field with consistent styling, hint support, and improved accessibility for single-choice selection.

View on GitHub

Usage

<%= form_with url: root_path do |f| %>
  <%= f.group class: "form__radio_collection" do %>
    <%= f.radio_button :plan, "basic" %>
    <%= f.radio_button :plan, "pro" %>
  <% end %>
  <%= f.radio_buttons_collection(:country_id, countries, :id, :name) %>
<% end %>

Props

Prop	Type	Default	Description
`label`	`String \| false`	`humanized value`	Custom label text. Set to `false` to hide the label.
`hint`	`String`	`nil`	Helper text displayed below the radio button.
`error`	`String`	`nil`	Manual error message. ActiveRecord errors are displayed automatically.
`checked`	`Boolean`	`false`	Pre-select the radio button.
`disabled`	`Boolean`	`false`	Disable the radio button.

Also accepts any HTML attributes via **options (e.g., id:, data:, aria:). class: is also supported for custom styling.

Examples

Basic Radio Buttons

<%= form_with url: root_path do |f| %>
  <%= f.group class: "form__radio_collection" do %>
    <%= f.radio_button :plan, "basic" %>
    <%= f.radio_button :plan, "pro", checked: true %>
    <%= f.radio_button :plan, "enterprise" %>
  <% end %>
<% end %>

Radio Button Collection

<%= form_with url: root_path do |f| %>
  <%= f.radio_buttons_collection(:country_id, ISO3166::Country.find_all_countries_by_subregion("Northern America"), :alpha2, :common_name) %>
<% end %>

Label customization

<%= form_with url: root_path do |f| %>
  <%= f.group class: "form__radio_collection" do %>
    <%= f.radio_button :custom_label, "custom", label: "Custom Label Text" %>
    <%= f.radio_button :custom_label, "with_link", label: "I agree to the #{link_to 'terms and conditions', '#', class: 'link'}".html_safe %>
    <%= f.radio_button :custom_label, "default" %>
  <% end %>
<% end %>

Hint messages

<%= form_with url: root_path do |f| %>
  <%= f.group class: "form__radio_collection" do %>
    <%= f.radio_button :receive_emails, "yes", hint: "I agree to receive marketing emails" %>
    <%= f.radio_button :receive_emails, "no", hint: "I do not agree to receive marketing emails" %>
  <% end %>
<% end %>

Disabled State

<%= form_with url: root_path do |f| %>
  <%= f.group class: "form__radio_collection" do %>
    <%= f.radio_button :disabled_group, "Option 1", disabled: true %>
    <%= f.radio_button :disabled_group_2, "Option 2", checked: true, disabled: true %>
  <% end %>
<% end %>

Validation

<% user = User.new %>
<% user.errors.add(:validation, "is required") %>
<%= form_with model: user, url: root_path do |f| %>
  <%= f.group class: "form__radio_collection" do %>
    <%= f.radio_button :validation, "standard" %>
    <%= f.radio_button :validation, "custom", error: "Custom error" %>
  <% end %>
<% end %>