Forms

<div class="b-field">
  <label class="b-label" for="i-1">Email</label>
  <input class="b-input" id="i-1" type="email" placeholder="you@company.com">
  <span class="b-help">We'll never share this address.</span>
</div>

<div class="b-field">
  <label class="b-label" for="i-search">Search</label>
  <input class="b-input b-search" id="i-search" type="search" placeholder="Search docs">
</div>

<div class="b-stack" style="--b-stack-gap: var(--b-2)">
  <input class="b-input b-input-sm" placeholder="Small">
  <input class="b-input" placeholder="Default">
  <input class="b-input b-input-lg" placeholder="Large">
</div>

<select class="b-select" aria-label="Choose a fruit">
  <option>Apple</option>
  <option>Banana</option>
  <option>Cherry</option>
</select>

<textarea class="b-textarea" placeholder="Type — I grow with you."></textarea>

<div class="b-input-group">
  <span class="b-addon">https://</span>
  <input class="b-input" placeholder="example.com">
  <button class="b-btn">Verify</button>
</div>

<label class="b-switch"><input type="checkbox" checked><span>Email notifications</span></label>

<div class="b-stack" style="--b-stack-gap: var(--b-2)">
  <label class="b-check"><input type="checkbox"> Subscribe</label>
  <label class="b-check"><input type="checkbox" checked> Send weekly digest</label>
  <label class="b-check"><input type="radio" name="r-demo"> Email</label>
  <label class="b-check"><input type="radio" name="r-demo" checked> SMS</label>
</div>

<input type="range" class="b-range" aria-label="Volume">

<div class="b-field">
  <label class="b-label" for="i-err">Username</label>
  <input class="b-input" id="i-err" aria-invalid="true" value="taken">
  <span class="b-error">That username is already taken.</span>
</div>

<label class="b-label" data-required>Email</label>

<fieldset class="b-fieldset">
  <legend>Billing</legend>
  <div class="b-stack" style="--b-stack-gap: var(--b-3)">
    <input class="b-input" placeholder="Card number">
    <div class="b-cluster">
      <input class="b-input" placeholder="MM/YY" style="flex:1">
      <input class="b-input" placeholder="CVC" style="flex:1">
    </div>
  </div>
</fieldset>

<input class="b-input" disabled value="Read-only" aria-label="Disabled input example">