Sandbox Jekyll documentation

Form Elements

Learn how to use form elements in Sandbox.

Input

<div class="form-floating mb-4">
  <input id="textInputExample" type="text" class="form-control" placeholder="Text Input">
  <label for="textInputExample">Text Input</label>
</div>
<!-- /.form-floating -->

Textarea

<div class="form-floating mb-4">
  <textarea id="textareaExample" class="form-control" placeholder="Textarea" style="height: 150px" required></textarea>
  <label for="textareaExample">Textarea</label>
</div>
<!-- /.form-floating -->

Checks

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault"> Default checkbox </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked"> Checked checkbox </label>
</div>

Radios

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1"> Default radio </label>
</div>
<div class="form-check mb-4">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2"> Default checked radio </label>
</div>

Disabled

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
  <label class="form-check-label" for="flexCheckDisabled"> Disabled checkbox </label>
</div>
<div class="form-check mb-4">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
  <label class="form-check-label" for="flexRadioDisabled"> Disabled radio </label>
</div>

Select

<div class="form-select-wrapper mb-4">
  <select class="form-select" aria-label="Default select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>