Rails simple_form：如何让单选按钮在前、标签在后且不被包裹

在Rails应用中使用simple_form的enum_help插件渲染枚举为单选按钮时，生成的HTML会将单选按钮包裹在标签内部，想要实现单选按钮在前、对应标签在后的布局（示例如下）。自定义wrapper后未达到预期效果，求正确配置方法。

当前生成的HTML #

<!-- 这个是对应simple_form初始化器中b.label的"label" -->
<label class="enum_radio_buttons optional">Rating</label>
<span class="radio radio radio">
  <label for="book_rating_favourite">
    <input class="enum_radio_buttons optional" type="radio" value="favourite" name="book[rating]" id="book_rating_favourite" />
    Favourite
  </label>
</span>
<span class="radio radio radio">
  ...
</span>
...

期望的HTML #

<label class="enum_radio_buttons optional">Rating</label>
<span class="radio radio radio">
  <input class="enum_radio_buttons optional" type="radio" value="favourite" name="book[rating]" id="book_rating_favourite" />
  <label for="book_rating_favourite">
    Favourite
  </label>
</span>
<span class="radio radio radio">
  ...
</span>
...

已尝试的自定义wrapper配置（config/initializers/simple_form.rb） #

config.wrappers :enum_radio,
 hint_class: :field_with_hint, error_class: :field_with_errors, valid_class: :field_without_errors do |b|
  # 需要先显示单选按钮，再显示标签，标签不能包裹按钮
  b.use :html5
  b.use :placeholder
  b.use :input

  # 从默认wrapper复制的部分
  b.use :hint,  wrap_with: { tag: :span, class: :hint }
  b.use :error, wrap_with: { tag: :span, class: :error }
end

表单中的使用方式 #

<%= simple_form_for book do |f| %>
  <%= render 'shared/form_errors', form: f %>
  ...
    <div class="form-col">
      <%= f.input :rating, as: :radio_buttons, wrapper: :enum_radio %>
    </div>
  ...
<% end %>

你之前的自定义wrapper未生效，是因为wrapper控制的是整个输入字段的外层结构，而单选按钮与对应标签的嵌套关系，由simple_form内部的radio_button渲染逻辑决定。要实现预期布局，可通过以下两种方式配置：

方法1：全局修改配置 #

在config/initializers/simple_form.rb中添加或修改该配置，全局改变所有单选按钮的渲染规则：

# 让单选按钮的标签不再包裹输入框，改为独立渲染
config.label_radio_button = false

方法2：针对单个字段配置 #

若不想全局修改，仅对该枚举字段生效，可在表单调用时添加选项：

<%= f.input :rating, as: :radio_buttons, wrapper: :enum_radio, label_radio_button: false %>

效果验证 #

配置完成后重启Rails服务器，刷新页面即可得到期望的HTML结构：输入框不再被标签包裹，独立显示在标签前方。你的自定义wrapper可保留，用于控制外层结构样式，与该配置互不冲突。

内容的提问来源于stack exchange，提问作者tkhobbes