Web Designer Wall

Snippets Buttons

Bootstrap 5 Form Controls: Inputs, Range, Switch and Colour

A gallery of form controls in matching cards: text, select, radio, checkbox and switch, range, colour, buttons and textarea. The range and colour pickers show their live value.

Bootstrap 5 No jQuery Feb 2020 2.6K views 

<section class="wdw-stage">
  <div class="container" style="max-width:920px">
    <div class="text-center mb-4">
      <span class="wdw-eyebrow">Form controls</span>
      <h1 class="wdw-heading h3 mt-1 mb-0">Every input, one style</h1>
    </div>
    <form class="row g-3" id="fcForm" novalidate>
      <div class="col-md-5">
        <div class="wdw-card-sm p-3 h-100">
          <div class="form-floating">
            <input id="fcText" type="text" class="form-control" placeholder="Your name">
            <label for="fcText">Your name</label>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="wdw-card-sm p-3 h-100">
          <div class="form-floating">
            <select id="fcSelect" class="form-select">
              <option>Hello</option><option>Bonjour</option><option>Hola</option>
            </select>
            <label for="fcSelect">Greeting</label>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="wdw-card-sm p-3 h-100">
          <span class="ctl-label" id="fcRadioLbl">Billing</span>
          <div role="radiogroup" aria-labelledby="fcRadioLbl" class="seg d-flex gap-1 p-1 rounded-pill">
            <input class="btn-check" type="radio" name="plan" id="r1" autocomplete="off" checked><label class="btn btn-sm rounded-pill flex-fill" for="r1">Monthly</label>
            <input class="btn-check" type="radio" name="plan" id="r2" autocomplete="off"><label class="btn btn-sm rounded-pill flex-fill" for="r2">Yearly</label>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-5">
        <div class="wdw-card-sm p-3 h-100">
          <div class="d-flex justify-content-between align-items-center"><label for="fcRange" class="ctl-label mb-0">Volume</label><output id="fcOut" for="fcRange" class="range-bubble">50</output></div>
          <input id="fcRange" type="range" class="form-range mt-2" min="0" max="100" value="50" style="--fill:50%">
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="wdw-card-sm p-3 h-100">
          <span class="ctl-label">Notifications</span>
          <div class="form-check form-switch fs-5 d-flex align-items-center gap-2 ps-0">
            <input class="form-check-input big-switch m-0" type="checkbox" role="switch" id="c2" aria-describedby="swState">
            <label class="form-check-label fs-6 fw-semibold" for="c2"><span id="swState">Off</span></label>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-4">
        <div class="wdw-card-sm p-3 h-100">
          <span class="ctl-label">Newsletter</span>
          <div class="form-check"><input class="form-check-input" type="checkbox" id="c1" checked><label class="form-check-label" for="c1">Subscribe</label></div>
        </div>
      </div>
      <div class="col-md-8">
        <div class="wdw-card-sm p-3 h-100">
          <div class="form-floating">
            <textarea id="fcArea" class="form-control" placeholder="Write something" maxlength="120"></textarea>
            <label for="fcArea">Write something</label>
          </div>
          <div class="text-end small wdw-muted mt-1" aria-live="off"><span id="fcCount">0</span>/120</div>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="wdw-card-sm p-3 h-100">
          <span class="ctl-label" id="fcColorLbl">Colour</span>
          <div class="d-flex align-items-center gap-2 flex-wrap">
            <input id="fcColor" type="color" class="swatch" value="#4f46e5" aria-labelledby="fcColorLbl">
            <span id="fcHex" class="small font-monospace text-body-secondary">#4f46e5</span>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="wdw-card-sm p-3 h-100 d-flex flex-column gap-2 justify-content-center">
          <button type="button" class="btn btn-primary rounded-pill" id="fcClick">Click me</button>
          <button type="submit" class="btn btn-outline-primary rounded-pill">Submit</button>
        </div>
      </div>
    </form>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More buttons snippets