RPF Design System for Rails
x
1
2
3
4
5
6
7
<fieldset class="rpf-fieldset"><legend class="rpf-label">Choose your favourite languages<small class="rpf-label__hint">You can choose more than one</small></legend>
  <div class="rpf-fieldset__inputs">
    <label class="rpf-input-checkbox"><input name="language_ruby" value="1" type="checkbox">Ruby</label>
    <label class="rpf-input-checkbox"><input name="language_python" value="1" type="checkbox">Python</label>
    <label class="rpf-input-checkbox"><input name="language_javascript" value="1" type="checkbox">JavaScript</label>
  </div>
</fieldset>
1
2
3
4
5
<%= render DesignSystem::Form::FieldsetComponent.new(label:, modifiers:, hint:, error:) do %>
  <%- checkboxes.each do |checkbox| -%>
    <%= render checkbox %>
  <%- end -%>
<% end %>

Fieldset Component

The fieldset component is used to group related form controls together. It can include a legend, hint and error message.

DesignSystem::Form::FieldsetComponent.new(label: 'Choose your favourite languages',
                                          hint: 'You can choose more than one') do
  # Render content such as radio buttons or checkboxes here
end

produces

<fieldset class="rpf-fieldset">
  <legend class="rpf-label">
    Choose your favourite languages
    <small class="rpf-label__hint">
      You can choose more than one
    </small>
  </legend>
  <!-- Content appears here -->
</fieldset>

Options

  • label - The text to display as the fieldset legend
  • hint - The text to display as a hint below the fieldset legend
  • error - The text to display as an error message below the fieldset
  • modifiers - Additional classes to apply to the checkbox, e.g. :disabled or :'full-width'

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

NB If you set the disabled modifier, then all inputs within the fieldset will be disabled.

NB Also note that the error message needs to be specifically added for the error to show.

Param Description Input

—

—

—

—

—