Phoenix Reisen Styleguide
Example

Markup
<form>
  <label class="textfield">
    <input type="text" />
    <span class="textfield__label">Name</span>
  </label>
  <label class="radio">
    <input type="radio" name="example" />
    <span class="radio__label">Desktop</span>
  </label>
  <label class="radio">
    <input type="radio" name="example" />
    <span class="radio__label">Mobile</span>
  </label>
  <label class="select">
    <select name="select">
      <option disabled="disabled" selected="selected">Bitte wählen</option>
      <option>MS Amadea</option>
      <option>MS Amera</option>
      <option>MS Artania</option>
      <option>MS Albatros</option>
      <option>MS Deutschland</option>
    </select>
    <span class="select__label" for="select">Lieblingsschiff</span>
  </label>
  <label class="textfield">
    <textarea></textarea>
    <span class="textfield__label">Comments</span>
  </label>
  <label class="checkbox">
    <input type="checkbox" />
    <span class="checkbox__label">Check mich!</span>
  </label>
  <br/>
  <div class="mt3">
    <input class="btn btn--primary" type="submit" value="Abschicken" />
    <button class="btn btn--primary" disabled="disabled">
      <i class="fas fa-spinner fa-spin mr1"></i> Abschicken
    </button>
    <button class="btn btn--success" disabled="disabled">
      <i class="fas fa-check mr1"></i> Gekauft
    </button>
    <button class="btn btn--secondary">Abbrechen</button>
  </div>
  <div class="mt3">
    <button class="btn btn--warning">Löschen</button>
    <button class="btn btn--danger">Alles löschen</button>
    <button class="btn btn--link"><i class="fas fa-home mr1"></i> Zurück</button>
  </div>
</form>
Source: src/components/_forms.scss, line 1
Examples
Default styling
.disabled
disabled
Markup
<label class="radio [modifier class]">
  <input
    type="radio"
    name=""
    value=""
    checked=""
    onclick=""
  />
  <span class="radio__label">Radio</span>
</label>
Source: src/components/_forms.scss, line 242
Examples
Default styling
.disabled
disabled
Markup
<label class="checkbox [modifier class]">
  <input
    name=""
    value=""
    checked=""
    onclick=""
    type="checkbox"
  />
  <span class="checkbox__label">
    Checkbox
  </span>
</label>
Source: src/components/_forms.scss, line 280
Example
Markup
<label class="switch">
  <span class="switch__input">
    <input
      name=""
      value=""
      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>
Source: src/components/_forms.scss, line 321
Examples
Default styling
.disabled
disabled
Markup
<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="" oninput="" value="" placeholder="..." maxlength=""></textarea>
  <span class="textfield__label">Textarea</span>
</label>
Source: src/components/_forms.scss, line 406
Examples
Default styling
.disabled
disabled
Markup
<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>
Source: src/components/_forms.scss, line 434

400.6 #permalink Validierung

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Hervorhebung durch Warnfarbe bei fehlerhafter Eingabe, meistens instant während des Tippens.

Example
Markup
<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>
Source: src/components/_forms.scss, line 479
Example
Markup
<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>
Source: src/components/_forms.scss, line 524