Shards

The Bootstrap 4 custom controls’ design is changed in Shards without breaking the default markup structure. You can create custom controls using the .custom-control and optionally the .custom-control-label.

Make sure you check out the official Bootstrap 4 documentation on forms if you are interested in building generic forms.

Toggles

One of the new custom controls available in Shards are the custom toggles. You can create custom toggles using the .custom-toggle control modifier class.

<!-- Checked Custom Toggle -->
<div class="custom-control custom-toggle my-2">
  <input type="checkbox" id="customToggle1" name="customToggle1" class="custom-control-input" checked>
  <label class="custom-control-label" for="customToggle1">I'm already toggled!</label>
</div>

<!-- Normal Custom Toggle -->
<div class="custom-control custom-toggle my-2">
  <input type="checkbox" id="customToggle2" name="customToggle2" class="custom-control-input">
  <label class="custom-control-label" for="customToggle2">Toggle me!</label>
</div>

<!-- Disabled Custom Toggle -->
<div class="custom-control custom-toggle my-2">
  <input type="checkbox" id="customToggle3" name="customToggle3" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customToggle3">Oh no! I'm disabled!</label>
</div>

Checkboxes

Custom checkboxes can be created using the .custom-checkbox custom control modifier class.

<!-- Checked Custom Checkbox -->
<div class="custom-control custom-checkbox mb-3">
  <input type="checkbox" class="custom-control-input" id="customCheck1" checked>
  <label class="custom-control-label" for="customCheck1">Checkboxes are cool</label>
</div>

<!-- Normal Custom Checkbox -->
<div class="custom-control custom-checkbox mb-3">
  <input type="checkbox" class="custom-control-input" id="customCheck2">
  <label class="custom-control-label" for="customCheck2">Send me free pizza</label>
</div>

<!-- Disabled Custom Checkbox -->
<div class="custom-control custom-checkbox mb-3">
  <input type="checkbox" class="custom-control-input" id="customCheck3" disabled>
  <label class="custom-control-label" for="customCheck3">Oh no! I'm disabled!</label>
</div>

Radio Buttons

Similarly, custom radio buttons can be created using the .custom-radio control modifier class.

<div class="custom-controls-stacked">
<!-- Checked Custom Radio -->
<div class="custom-control custom-radio mb-3">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" checked>
  <label class="custom-control-label" for="customRadio1">Oh, I'm selected!</label>
</div>

<!-- Disabled Custom Radio -->
<div class="custom-control custom-radio mb-3">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadio2">I'm disabled!</label>
</div>

<!-- Normal Custom Radio -->
<div class="custom-control custom-radio mb-3">
  <input type="radio" id="customRadio3" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio3">Select me!</label>
</div>
</div>

Select Menus

To create custom select menus you can use the default <select> element with the .custom-select class.

<!-- Normal Custom Select -->
<select class="custom-select">
  <option selected>Custom select menu</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<!-- Disabled Custom Select -->
<select class="custom-select" disabled>
  <option selected>Custom select menu</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

File Browsers

<!-- Normal Custom File Selector -->
<div class="custom-file mb-3">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Default custom file input</label>
</div>

<!-- Disabled Custom File Selector -->
<div class="custom-file mb-3">
  <input type="file" class="custom-file-input" id="customFile" disabled>
  <label class="custom-file-label" for="customFile">Disabled custom file input</label>
</div>