400 #permalink Formulare

<label class="radio [modifier class]">
  <input
    type="radio"
    name=""
    checked=""
    onclick=""
  />
  <span class="radio__label">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
  </span>
</label>

<label class="checkbox [modifier class]">
  <input
    name=""
    checked=""
    onclick=""
    type="checkbox"
  />
  <span class="checkbox__label">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
  </span>
</label>

<label class="switch">
  <span class="switch__input">
    <input
      name=""
      checked=""
      onclick=""
      type="checkbox"
    />
    <span class="switch__slider"></span>
  </span>
  <span class="switch__label">
    Licht an oder aus, das ist hier die Frage. Lorem ipsum dolor sit amet, consetetur
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
  </span>
</label>

<label class="textfield [modifier class]">
  <input
    type="text"
    name=""
    value=""
    oninput=""
    maxlength=""
    autocomplete=""
    placeholder="..."
  />
  <span class="textfield__label">Input</span>
</label>
<label class="textfield [modifier class]">
  <textarea
    name=""
    value=""
    oninput=""
    maxlength=""
    placeholder="...">
  </textarea>
  <span class="textfield__label">Textarea</span>
</label>

<div class="textfield-with-button">
  <label class="textfield ">
    <input
      type="text"
      name=""
      value=""
      oninput=""
      maxlength=""
      autocomplete=""
      placeholder="..."
    />
    <span class="textfield__label">Input</span>
  </label>
  <button class="btn btn--primary"
      <i class="fas fa-check mr2"></i>
      <span>Speichern</span>
  </button>
</div>

<label class="select [modifier class]">
  <select name="" onchange="">
    <option selected="">Select</option>
    <option value="">Option 1</option>
    <option value="">Option 2</option>
    <option value="">Option 3</option>
  </select>
  <span class="select__label">Select Label</span>
</label>

<div>
  <label class="textfield">
    <input type="text" />
    <span class="textfield__label alert--warning">
      Buchungsnr... Bitte nur Ziffern
    </span>
  </label>
  <label class="textfield">
    <textarea></textarea>
    <span class="textfield__label alert--warning">
      Kommentar
    </span>
  </label>
  <div class="mb3">
    <label class="radio alert--warning">
      <input type="radio" name="example" />
      <span class="radio__label">Entweder</span>
    </label>
    <label class="radio alert--warning">
      <input type="radio" name="example" />
      <span class="radio__label">Oder</span>
    </label>
  </div>
  <div class="mb3">
    <label class="checkbox alert--warning">
      <input type="checkbox" />
      <span class="checkbox__label">Check mich!</span>
    </label>
  </div>
  <button disabled="disabled">
    Senden
  </button>
</div>

<div class="form-box">
  <label class="textfield">
    <input type="text" />
    <span class="textfield__label">Input</span>
  </label>
  <label class="textfield">
    <textarea></textarea>
    <span class="textfield__label">Textarea</span>
  </label>
  <button>Senden</button>
</div>