RPF Design System for Rails
x
1
2
3
4
5
6
7
8
<form class="new_person" id="new_person" action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="BNdKAcCbFjwI7DSc1qO0DlMuHT7Z4cmhpVGpQvGGm5w-7cnvw9tHCCebqttgK6Mgww6QYkTg8DnOHudYo91VDA" autocomplete="off" />
  <fieldset class="rpf-fieldset"><legend class="rpf-label">Sort by<small class="rpf-label__hint">Please select which berry to sort by</small></legend>
    <div class="rpf-fieldset__inputs">
      <label class="rpf-input-radio"><input id="person_berry_raspberry" name="person[berry]" type="radio" checked="checked" value="raspberry">Raspberry 🍓</label>
      <label class="rpf-input-radio"><input id="person_berry_gooseberry" name="person[berry]" type="radio" value="gooseberry">Gooseberry 🥝</label>
    </div>
  </fieldset>
</form>
1
2
3
4
5
6
<%= form_for model, url: '#', builder: DesignSystem::FormBuilder do |f| %>
  <%= f.rpf_fieldset :berry, error:, modifiers:, **attrs do %>
    <%= f.rpf_radio_input :berry, value: 'raspberry' %>
    <%= f.rpf_radio_input :berry, value: 'gooseberry' %>
  <% end %>
<% end %>

Fieldset Component (with radio buttons)

See with_checkboxes for more details.

Param Description Input

—

—