altinn-designsystem/dist/patterns/01-molekyler-05-forms-03-valgknapper-og-tekstfelt/01-molekyler-05-forms-03-valgknapper-og-tekstfelt.markup-only.html

Altinn Design system based on Pattern Lab.

<!-- START: 01-molekyler-05-forms-03-valgknapper-og-tekstfelt -->
<div class="row mb-1">
  <div class="col-12">
    <!-- START: 00-atomer-01-forms-07-valgknapp-ett-alternativ -->

    <fieldset>
      <legend class="sr-only">Velg et alternativ</legend>


      <div class="a-switch a-switch--small ">

        <input id="checkbutton-1" class="sr-only" type="radio" name="period" value="radiobutton-read" />

        <label for="checkbutton-1" class="a-switch-label ">
	        Siste måned
	      </label>

      </div>


      <div class="a-switch a-switch--small ">

        <input id="checkbutton-2" class="sr-only" type="radio" name="period" value="radiobutton-read" />

        <label for="checkbutton-2" class="a-switch-label ">
	        Siste 6 måneder
	      </label>

      </div>


      <div class="a-switch a-switch--small ">

        <input id="checkbutton-3" class="sr-only" type="radio" name="period" value="radiobutton-read" />

        <label for="checkbutton-3" class="a-switch-label ">
	        Siste 12 måneder
	      </label>

      </div>


      <div class="a-switch a-switch--small ">

        <input id="checkbutton-4" class="sr-only" type="radio" name="period" value="radiobutton-read" />

        <label for="checkbutton-4" class="a-switch-label ">
	        2017
	      </label>

      </div>


      <div class="a-switch a-switch--small ">

        <input id="checkbutton-5" class="sr-only" type="radio" name="period" value="radiobutton-read" />

        <label for="checkbutton-5" class="a-switch-label ">
	        2016
	      </label>

      </div>


      <div class="a-switch a-switch--small ">

        <input id="checkbutton-6" class="sr-only" type="radio" name="period" value="radiobutton-read" />

        <label for="checkbutton-6" class="a-switch-label ">
	        2015
	      </label>

      </div>


      <div class="a-switch a-switch--small ">

        <input id="checkbutton-7" class="sr-only" type="radio" name="period" value="radiobutton-read" />

        <label for="checkbutton-7" class="a-switch-label ">
	        2014
	      </label>

      </div>


      <div class="a-switch a-switch--small ">

        <input id="checkbutton-8" class="sr-only" type="radio" name="period" value="radiobutton-read" />

        <label for="checkbutton-8" class="a-switch-label ">
	        2013
	      </label>

      </div>


      <div class="a-switch a-switch--small ">

        <input id="checkbutton-9" class="sr-only" type="radio" name="period" value="radiobutton-read" />

        <label for="checkbutton-9" class="a-switch-label ">
	        2012
	      </label>

      </div>


      <div class="a-switch a-switch--small ">

        <input id="checkbutton-10" class="sr-only" type="radio" name="period" value="radiobutton-read" />

        <label for="checkbutton-10" class="a-switch-label ">
	        2011
	      </label>

      </div>


      <div class="a-switch a-switch--small ">

        <input id="checkbutton-11" class="sr-only" type="radio" name="period" value="radiobutton-read" />

        <label for="checkbutton-11" class="a-switch-label ">
	        2010
	      </label>

      </div>


      <div class="a-switch a-switch--small ">

        <input id="checkbutton-12" class="sr-only" type="radio" name="period" value="radiobutton-read" />

        <label for="checkbutton-12" class="a-switch-label ">
	        2009
	      </label>

      </div>


      <div class="a-switch a-switch--small ">

        <input id="checkbutton-13" class="sr-only" type="radio" name="period" value="radiobutton-read" />

        <label for="checkbutton-13" class="a-switch-label ">
	        2008
	      </label>

      </div>


      <div class="a-switch a-switch--small ">

        <input id="checkbutton-14" class="sr-only" type="radio" name="period" value="radiobutton-read" />

        <label for="checkbutton-14" class="a-switch-label ">
	        2007
	      </label>

      </div>


    </fieldset>


    <!-- END: 00-atomer-01-forms-07-valgknapp-ett-alternativ -->

  </div>
</div>
<div class="row">
  <div class="col-12 col-md-auto">
    <!-- START: 00-atomer-01-forms-07-valgknapp-ett-alternativ -->

    <fieldset>
      <legend class="sr-only">Velg et alternativ</legend>


      <div class="a-switch a-switch--small a-lh-3 ">

        <input id="checkbutton-15" class="sr-only" type="radio" name="period" value="radiobutton-read" />

        <label for="checkbutton-15" class="a-switch-label ">
	        Velg periode
	      </label>

      </div>


    </fieldset>


    <!-- END: 00-atomer-01-forms-07-valgknapp-ett-alternativ -->

  </div>
  <div class="col-12 col-md-auto">
    <!-- START: 00-atomer-01-forms-60-datovelger JS doc: initializeDatepicker.js. Requires class .form-control.date -->
    <label class="d-inline-block a-w-3-sm-down mr-0 mr-md-1 " for="dateField1">
  <span class="a-input-labelText control-label">
    Fra:
  </span>
</label>
    <div class="d-inline-block form-group a-form-group a-form-group-datepicker">
      <div class="input-group">
        <input type="text" id="dateField1" class="form-control a-hasButton  date" />

        <div class="input-group-prepend a-icon-right">
          <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
          <i class="ai ai-date   "></i>


          <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

        </div>
      </div>
    </div>

    <!-- END: 00-atomer-01-forms-60-datovelger -->

  </div>
  <div class="col-12 col-md-auto">
    <!-- START: 00-atomer-01-forms-60-datovelger JS doc: initializeDatepicker.js. Requires class .form-control.date -->
    <label class="d-inline-block a-w-3-sm-down mr-0 mr-md-1 " for="dateField2">
  <span class="a-input-labelText control-label">
    Til:
  </span>
</label>
    <div class="d-inline-block form-group a-form-group a-form-group-datepicker">
      <div class="input-group">
        <input type="text" id="dateField2" class="form-control a-hasButton  date" />

        <div class="input-group-prepend a-icon-right">
          <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
          <i class="ai ai-date   "></i>


          <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

        </div>
      </div>
    </div>

    <!-- END: 00-atomer-01-forms-60-datovelger -->

  </div>
</div>

<!-- END: 01-molekyler-05-forms-03-valgknapper-og-tekstfelt -->