Organism

Form

  • inprogress

When to use

tbd

When to use

tbd

Show code
Fieldset headline
Fieldset headline
            
              <form class="form">
  <fieldset class="form__fieldset">
    <legend class="form__legend">Fieldset headline</legend>
    <div class="form__row">
      <div class="form__col-12">
        <div class="form-radio">
          <label class="form-radio__container" for="radio1"><input class="form-radio__input" type="radio" value="" id="radio1" name="radioGroup"> Radio one</label> <label class="form-radio__container" for="radio2"><input class="form-radio__input" type="radio" value="" id="radio2" name="radioGroup"> Radio Two</label>
        </div>
      </div>
    </div>
    <div class="form__row">
      <div class="form__col-6">
        <label class="form-group"><span class="form-group__label">From group label</span> <input class="form-text" placeholder="Placeholder"></label>
      </div>
      <div class="form__col-6">
        <label class="form-group"><span class="form-group__label">From group label</span> <span class="form-group__label-optional">(Optional)</span> <input class="form-text" placeholder="Placeholder"></label>
      </div>
    </div>
    <div class="form__row">
      <div class="form__col-6">
        <label class="form-group"><span class="form-group__label">From group label</span> <input class="form-text" placeholder="Placeholder"></label>
      </div>
      <div class="form__col-6">
        <label class="form-group"><span class="form-group__label">From group label</span> <span class="form-group__label-optional">(Optional)</span> <select class="form-select" id="">
          <option class="form-select__item" value="">
            Select an option
          <option class="form-select__item" value="2">
            2
          <option class="form-select__item" value="3">
            3
          <option class="form-select__item" value="4">
            4
          <option class="form-select__item" value="5">
            5
        </select></label>
      </div>
    </div>
  </fieldset>
  <fieldset class="form__fieldset">
    <legend class="form__legend">Fieldset headline</legend>
    <div class="form__row">
      <div class="form__col-6">
        <label class="form-group"><span class="form-group__label">From group label</span> <input class="form-text" placeholder="Placeholder"></label>
      </div>
      <div class="form__col-6">
        <label class="form-group"><span class="form-group__label">From group label</span> <span class="form-group__label-optional">(Optional)</span> <input class="form-text" placeholder="Placeholder"></label>
      </div>
    </div>
    <div class="form__row">
      <div class="form__col-12">
        <label class="form-group"><span class="form-group__label">From group label</span> <span class="form-group__label-optional">(Optional)</span> 
        <textarea class="form-textarea" type="" value="" id="" placeholder="Placeholder" rows=""></textarea></label>
      </div>
    </div>
    <div class="form__row">
      <div class="form__col-12">
        <div class="form-checkbox">
          <label class="form-checkbox__container"><input class="form-checkbox__input" id="" type="checkbox"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id rerum expedita dolor recusandae eligendi sequi natus libero facere quas.</label>
        </div>
      </div>
    </div>
  </fieldset>
</form>

            
          
Name Description
When to use tbd