Inputs

<div><label class="form-label" for="in-1">Full name</label><input id="in-1" name="in-1" type="text" placeholder="Maya Lindqvist" class="form-control"></div>
<div>
  <label class="form-label" for="in-2">Email</label><input id="in-2" name="in-2" type="email" placeholder="you@company.com" class="form-control"><div class="form-text" id="in-2-hint">We never share it.</div>
</div>

<div>
  <label class="form-label" for="in-3">Search</label>
  <div class="field">
    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
    <input id="in-3" name="in-3" type="text" placeholder="Search">
    <kbd>⌘K</kbd>
  </div>
</div>
<div>
  <label class="form-label" for="in-4">Website</label>
  <div class="field">
    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
    <input id="in-4" name="in-4" type="text" placeholder="northwind">
    <span class="addon">.com</span>
  </div>
</div>

<input id="in-5" name="in-5" type="text" placeholder="Small" class="form-control form-control-sm">
<input id="in-6" name="in-6" type="text" placeholder="Default" class="form-control">
<input id="in-7" name="in-7" type="text" placeholder="Large" class="form-control form-control-lg">

<div><label class="form-label" for="in-8">Disabled</label><input id="in-8" name="in-8" type="text" value="Cannot change" disabled class="form-control"></div>
<div><label class="form-label" for="in-9">Read only</label><input id="in-9" name="in-9" type="text" value="VT-1040" readonly class="form-control"></div>

<div>
  <label class="form-label" for="in-10">Message</label><textarea id="in-10" name="in-10" class="form-control" rows="4" placeholder="Write something…"></textarea>
</div>

<div>
  <label class="form-label" for="in-11">Password</label>
  <div>
    <div class="field">
      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
      <input id="in-11" name="in-11" type="password" autocomplete="new-password" aria-describedby="in-11-strength" data-strength="in-11-strength">
      <button type="button" class="field-btn" aria-label="Show password" aria-pressed="false" data-toggle-password="in-11"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
    </div>
    <div class="strength" id="in-11-strength" data-score="0" aria-live="polite">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <span>Use 8 or more characters with a mix of letters, numbers and symbols</span>
    </div>
  </div>
</div>