RPF Design System for Rails
x
1
2
3
4
<form action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="Jm1Twopi6_vJll5x6MAQe1UFMyBgt-maBpKjdhcSHTE-lu5x3A8MdEpJ0YlsVGA3Wl3dy7K_5CxqnxKj0oHkYQ" autocomplete="off" />
  <label class="rpf-input-radio"><input id="berry_raspberry" name="berry" type="radio" value="raspberry">Raspberry</label>
  <label class="rpf-input-radio"><input id="berry_gooseberry" name="berry" type="radio" value="gooseberry">Gooseberry</label>
</form>
1
2
3
4
<%= form_with url: '#', builder: DesignSystem::FormBuilder do |f| %>
  <%= f.rpf_radio_input :berry, value: 'raspberry', label: 'Raspberry', checked:, modifiers:, **attrs %>
  <%= f.rpf_radio_input :berry, value: 'gooseberry', label: 'Gooseberry', modifiers:, **attrs %>
<% end %>

Radio Input Component (without model)

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

This is very similar to the radio input component with a model, but instead the first argument is used as the name attribute.

<%= form_with url: '#', builder: DesignSystem::FormBuilder do |f| %>
  <%= f.rpf_radio_input(:berry, value: 'raspberry', label: 'Raspberry', checked: true) %>
  <%= f.rpf_radio_input(:berry, value: 'gooseberry', label: 'Gooseberry') %>
<% end %>

produces:

<!-- form opening tag goes here --->
<label class="rpf-input-radio">
  <input id="berry_raspberry" name="berry" type="radio" value="raspberry">
  Raspeberry
</label>
<label class="rpf-input-radio">
  <input id="berry_gooseberry" name="berry" type="radio" value="gooseberry">
  Gooseberry
</label>

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

Arguments

  • name - The name in the radio input.
  • value - The value of the radio input.
  • label: - The text to display next to the radio.
  • checked: - Set the checked state.
  • 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.

Param Description Input

—

—