Input

Varianter

Fieldset legend
StĂžttetekst for det aktuelle feltet.
Validation message
Validation message
<form class="pkt-form">
  <fieldset class="pkt-fieldset">
    <legend>Fieldset legend</legend>
    <div class="pkt-form-group">
      <label for="exampleInputText" class="pkt-form-label">Text input</label>
      <input type="text" class="pkt-form-input" id="exampleInputText" />
    </div>
    <div class="pkt-form-group">
      <label for="exampleInputEmail" class="pkt-form-label">E-post input</label>
      <div id="helpEmail" class="pkt-form-help">StĂžttetekst for det aktuelle feltet.</div>
      <input
        type="email"
        class="pkt-form-input"
        id="exampleInputEmail"
        aria-describedby="helpEmail"
        placeholder="username@domain.com"
        required
      />
      <div class="pkt-form-validation pkt-form-validation--error">Validation message</div>
    </div>
    <div class="pkt-form-group">
      <label for="exampleInputDate" class="pkt-form-label">Date input</label>
      <input type="date" class="pkt-form-input" id="exampleInputDate" />
      <div class="pkt-form-validation pkt-form-validation--error">Validation message</div>
    </div>
    <div class="pkt-form-group">
      <label for="exampleInputPw" class="pkt-form-label">Password</label>
      <input type="password" class="pkt-form-input" id="exampleInputPw" disabled />
    </div>
    <div class="pkt-form-group">
      <label for="exampleSelect" class="pkt-form-label">Select</label>
      <select class="pkt-select" id="exampleSelect">
        <option selected>Velg ditt foretrukne rammeverk</option>
        <option value="1">Vue.js</option>
        <option value="2">React</option>
        <option value="3">Web components</option>
        <option value="4">Svelte</option>
      </select>
    </div>
    <div class="pkt-form-group">
      <label for="exampleTextarea" class="pkt-form-label">Textarea</label>
      <textarea class="pkt-form-textarea" id="exampleTextarea"></textarea>
    </div>
  </fieldset>
</form>

Les mer