altinn-designsystem/dist/patterns/03-maler-altinnett-innlogging-skjema-legg-til-bruker/03-maler-altinnett-innlogging-skjema-legg-til-bruker.markup-only.html

Altinn Design system based on Pattern Lab.

<!-- START: 03-maler-altinnett-innlogging-skjema-legg-til-bruker -->
<div class="modal-content">
  <div class="modal-header a-modal-header">
    <div class="a-iconText a-iconText-background a-iconText-large">
      <div class="a-iconText-icon">
        <i class="ai a-icon" aria-hidden="true"></i>
      </div>
      <h1 class="a-iconText-text mb-0">
        <span class="a-iconText-text-large">Legg til bruker</span>
      </h1>
    </div>
  </div>

  <div class="modal-body a-modal-body">

    <p class="lead mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    <div class="row mb-3">
      <div class="col-12 col-lg-8">
        <!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->

        <div class="form-group a-form-group   mb-2">

          <label class="a-form-label  " for="first-name-id">Fornavn</label>

          <div class="a-form-group-items input-group   ">


            <input class="form-control  
         " type="text" name="input-field" data-val="true" id="first-name-id">




          </div>



        </div>

        <!-- END: 00-atomer-01-forms-10-tekst-input -->

        <!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->

        <div class="form-group a-form-group   mb-2">

          <label class="a-form-label  " for="surname-id">Etternavn</label>

          <div class="a-form-group-items input-group   ">


            <input class="form-control  
         " type="text" name="input-field" data-val="true" id="surname-id">




          </div>



        </div>

        <!-- END: 00-atomer-01-forms-10-tekst-input -->

        <!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->

        <div class="form-group a-form-group   mb-5">

          <label class="a-form-label  " for="email-id">E-post</label>

          <div class="a-form-group-items input-group   ">


            <input class="form-control  
         " type="email" name="input-field" data-val="true" id="email-id" data-val-regex="Feil epost verdier" data-val-regex-pattern="((&#39;[^&#39;]+&#39;)|(([a-zA-Z0-9!#$%&amp;&#39;*+-&#x3D;?^_&#x60;{|}~])+(.([a-zA-Z0-9!#$%&amp;&#39;*+-&#x3D;?^_&#x60;{|}~])+)*))@((((([a-zA-Z0-9æøåÆØÅ]([a-zA-Z0-9-æøåÆØÅ]{0,61})[a-zA-Z0-9æøåÆØÅ].)|[a-zA-Z0-9æøåÆØÅ].){1,9})([a-zA-Z]{2,14}))|((d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})))">




          </div>



        </div>

        <!-- END: 00-atomer-01-forms-10-tekst-input -->

        <!-- START: 00-atomer-01-forms-08-radioknapp-hjelpetekst -->
        <fieldset class="form-group ">

          <legend class="a-legend">Hvilke rettigheter skal brukeren ha?
            <span class="a-titleExtra"><a href="javascript:void(0)" tabindex="0" class="a-linkArea a-helpIconButton a-helpIconButton--blue a-js-togglePopoverIcons" role="button" data-toggle="popover" data-animation="false" data-target="#myPopup" data-placement="bottom" data-trigger="click" data-popover-content="popoverWithIconToggle" data-original-title=""><i class="ai ai-circle-plus a-js-popoverIconInitial " aria-hidden="true"></i><i class="ai ai-circle-minus  a-js-popoverIconExpanded " aria-hidden="true" style="display: none;"></i><span class="sr-only">Vis mer info</span>
            </a>
            <div id="popoverWithIconToggle" style="display: none">Hjelptekst</div>
            </span>
          </legend>


          <div class="custom-control custom-radio a-custom-radio   ">
            <input type="radio" id="radio111" name="customRadio" value="radio111" class="custom-control-input">
            <label class="custom-control-label a-radioButtons-title" for="radio111">Lesetilgang


      </label>
          </div>
          <div class="custom-control custom-radio a-custom-radio   ">
            <input type="radio" id="radio211" name="customRadio" value="radio211" class="custom-control-input">
            <label class="custom-control-label a-radioButtons-title" for="radio211">Lese- og skrivetilgang


      </label>
          </div>
          <div class="custom-control custom-radio a-custom-radio   ">
            <input type="radio" id="radio311" name="customRadio" value="radio311" class="custom-control-input">
            <label class="custom-control-label a-radioButtons-title" for="radio311">Administrator, lese- og skrivetilgang


      </label>
          </div>

        </fieldset>

        <!-- END: 00-atomer-01-forms-08-radioknapp-hjelpetekst -->

      </div>
    </div>

    <div>
      <button class="a-btn " data-enable-dirty-popover="true" data-toggle="altinn-modal" data-action="next" data-url="../../patterns/03-maler-altinnett-innlogging-kvittering-bruker-lagt-til/03-maler-altinnett-innlogging-kvittering-bruker-lagt-til.markup-only.html"
        data-target="#modal" data-is-success="true">
                Legg til bruker
            </button>
      <a class="ml-3" data-toggle="altinn-modal" data-action="close" data-target="#modal" href="#">Avbryt</a>
    </div>
    <div class="row mt-3">
    </div>
  </div>
</div>

<!-- END: 03-maler-altinnett-innlogging-skjema-legg-til-bruker -->