Forms

Inputs, selects, checkboxes, radios, progress, range, meter.

Text input

<label for="bp-text">Label</label>
<span class="label-hint">Optional helper text.</span>
<input type="text" id="bp-text" placeholder="Placeholder text">

Email, URL, password, search

Number, tel, date, time

Colour

File

Textarea

Select

Checkbox — inline

Checkboxes — fieldset

<fieldset class="checkboxes">
  <legend>Pick any that apply</legend>
  <div class="checkbox-input">
    <input type="checkbox" id="bp-check-1">
    <label for="bp-check-1">Option one</label>
  </div>
</fieldset>

Radio buttons

Range

Button

Progress

Meter

Invalid input

Inputs automatically show an outline when :invalid and unfocused.