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="IJRVQjVkZm9YG66A455SWCeQu2rvjnuPrdZ4tHnaMmgRwyCT1694xDuImxr_W4HLR9stU39-ecOmorkn7oPxKg" 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 thevalue: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.:disabledor:'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 |
|---|---|---|
|
— |
|
|
|
— |
|