RPF Design System for Rails
x
1
2
3
4
<form class="new_person" id="new_person" action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="zaw3eYJKFG9hobVSKolJ7sgPfZhZ0iYCMQH_VqFSgLSUL4oVu5uCN1gH7IFiti4ytkBke8FzrQr2yDbfPN27Lg" autocomplete="off" />
  <label class="rpf-input-radio"><input id="person_berry_raspberry" name="person[berry]" type="radio" value="raspberry">Raspberry 🍓</label>
  <label class="rpf-input-radio"><input id="person_berry_gooseberry" name="person[berry]" type="radio" value="gooseberry">Gooseberry 🥝</label>
</form>
1
2
3
4
<%= form_for model, url: '#', builder: DesignSystem::FormBuilder do |f| %>
  <%= f.rpf_radio_input :berry, value: 'raspberry', modifiers:, **attrs %>
  <%= f.rpf_radio_input :berry, value: 'gooseberry', modifiers:, **attrs %>
<% end %>

Radio Input Component (with model)

rpf_radio_input(:method_name, label:, value:,
                checked: false, modifiers: nil, **attrs)

This is based on DesignSystem::Form::RadioInputComponent and the same attributes are used in both.

This component should be used in a form builder context. It is designed require as little configuration as possible, and works best with a model.

e.g.

<%= form_for @person, url: '#', builder: DesignSystem::FormBuilder do |f| %>
  <%= f.rpf_radio_input :berry, value: 'raspberry' %>
  <%= f.rpf_radio_input :berry, value: 'gooseberry' %>
<% end %>

Assuming @person.berry returns raspberry, this produces:

<!-- form opening tag goes here --->
<label class="rpf-input-radio">
  <input id="person_berry_raspberry" name="person[berry]" type="radio" value="raspberry" checked>
  Raspeberry
</label>
<label class="rpf-input-radio">
  <input id="person_berry_gooseberry" name="person[berry]" type="radio" value="gooseberry">
  Gooseberry
</label>

Arguments

  • method_name - The name of the method on the model. If the returned value matches the value: argument then the radio will be checked.
  • label: - The text to display next to the radio. This is required.
  • value: - The value to send when the radio is checked. This is required.
  • checked: - Set the checked state manually.
  • modifiers: - Additional classes to apply to the radio, e.g. :disabled or :'full-width'

It also accepts all the usual HTML attributes for a radio input, e.g. id, class, data- etc.

Default label and translations

The label is translated using the helpers.options scope, e.g. helpers.options.person.berry.raspberry.

Param Description Input

—

—