Component

A fieldset is used to group a set of controls. It is typically used to group several radio or checkbox components together, but can be used to create context for any form control types.

iconsStructure

The legend.ray-fieldset__legend element must be the first child fo the fieldset.

<fieldset class="ray-fieldset">
  <legend class="ray-fieldset__legend">Fieldset legend</legend>

  <!-- form controls go here -->
</fieldset>

iconsExample

Spirit Animal 
<fieldset class="ray-fieldset">
  <legend class="ray-fieldset__legend">Spirit Animal</legend>

  <div class="ray-radio">
    <input id="dog" name="animal" type="radio" class="ray-radio__input" />
    <label for="dog" class="ray-radio__label">Dog</label>
  </div>

  <div class="ray-radio">
    <input id="cat" name="animal" type="radio" class="ray-radio__input" />
    <label for="cat" class="ray-radio__label">Cat</label>
  </div>
</fieldset>

iconsExample (RTL)

החיה הרוחנית 
<div dir="rtl">
  <fieldset class="ray-fieldset">
    <legend class="ray-fieldset__legend">החיה הרוחנית</legend>

    <div class="ray-radio">
      <input id="dog-rtl" name="animal" type="radio" class="ray-radio__input" />
      <label for="dog-rtl" class="ray-radio__label">כֶּלֶב</label>
    </div>

    <div class="ray-radio">
      <input id="cat-rtl" name="animal" type="radio" class="ray-radio__input" />
      <label for="cat-rtl" class="ray-radio__label">חֲתוּלָה</label>
    </div>
  </fieldset>
</div>