Input
Text inputs are used for freeform data entry.
Basic Input
ready
Inputs use floating labels for a more streamlined layout.

    <div class="p-1">
      <div class="form-group">
        <div class="form-label-group mb-0">
          <input
            type="text"
            id="basicInput"
            class="form-control"
            autofocus="autofocus"
            placeholder="label"
          />
          <label for="basicInput">Label</label>
        </div>
        <small id="basicInputHelp" class="form-text text-muted"
          >Help text for this field.</small
        >
      </div>
    </div>

Basic Input Disabled
ready
Error should highlight and place error message directly below the input.

    <div class="p-1">
      <div class="form-group">
        <div class="form-label-group mb-0">
          <input
            type="text"
            id="basicInput"
            class="form-control"
            autofocus="autofocus"
            placeholder="label"
            value="Disabled field"
            disabled
          />
          <label for="basicInput">Label</label>
        </div>
        <small id="basicInputHelp" class="form-text text-muted">Help text for this field.</small>
      </div>
    </div>

Basic Input Readonly
ready
Read-only text fields display pre-filled text that the user cannot edit

    <div class="p-1">
      <div class="form-group">
        <div class="form-label-group mb-0">
          <input
            type="text"
            id="basicInput"
            class="form-control"
            autofocus="autofocus"
            placeholder="label"
            value="Read-only field"
            readonly
          />
          <label for="basicInput">Label</label>
        </div>
        <small id="basicInputHelp" class="form-text text-muted">Help text for this field.</small>
      </div>
    </div>

Basic Input Invalid
ready
Invalid state should highlight input and place error message directly below the input but above any help text.

    <div class="p-1">
      <div class="form-group">
        <div class="form-label-group mb-0">
          <input
            type="text"
            id="basicInput"
            class="form-control is-invalid"
            autofocus="autofocus"
            placeholder="label"
            required
          />
          <label for="basicInput">Label</label>
        </div>
        <div class="invalid-feedback d-block">Please provide a value.</div>
        <small id="basicInputHelp" class="form-text text-muted">Help text for this field.</small>
      </div>
    </div>

Textarea
ready

    <div class="p-1">
      <div class="form-group">
        <div class="form-label-group mb-0">
          <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Label"></textarea>
          <label for="exampleFormControlTextarea1">Label</label>
        </div>
        <small id="textareaHelp" class="form-text text-muted">Help text for this field.</small>
      </div>
    </div>

Input Group
draft
Attach add-ons to inputs using input groups.

    <div class="p-1">
      <div class="form-group">
        <div class="form-label-group">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">@</span>
          </div>
          <div class="form-label-group-input">
            <input
              type="text"
              class="form-control"
              id="basicInput1"
              placeholder="Label"
              aria-label="Label"
              aria-describedby="basic-addon1"
            />
            <label for="basicInput1">Label</label>
          </div>
        </div>
        <small id="basicInputHelp1" class="form-text text-muted">Help text for this field.</small>
      </div>
      <div class="form-group">
        <div class="form-label-group">
          <div class="form-label-group-input">
            <input
              type="text"
              class="form-control"
              id="basicInput2"
              placeholder="Label"
              aria-label="Label"
              aria-describedby="basic-addon2"
            />
            <label for="basicInput2">Label</label>
          </div>
          <div class="input-group-append">
            <span class="input-group-text" id="basic-addon2">@example.com</span>
          </div>
        </div>
        <small id="basicInputHelp2" class="form-text text-muted"
          >Help text for this field.</small
        >
      </div>
    </div>

Button Input Group
draft
Input group with button add-ons.

    <div class="p-1">
        <div class="form-group">
            <div class="form-label-group mb-0">
                <div class="form-label-group-input">
                    <input type="text" id="buttonInputGroup1" class="form-control" placeholder="Label" />
                    <label for="buttonInputGroup1">Label</label>
                </div>
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button">Button</button>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="form-label-group mb-0">
                <div class="input-group-prepend">
                    <button class="btn btn-outline-secondary" type="button"><i class="material-icons material-icons-outlined">visibility_off</i></button>
                    <button class="btn btn-outline-secondary" type="button"><i class="material-icons material-icons-outlined">copy</i></button>
                    <button class="btn btn-outline-secondary" type="button"><i class="material-icons material-icons-outlined">sync</i></button>
                </div>
                <div class="form-label-group-input">
                    <input type="text" id="buttonInputGroup2" class="form-control" placeholder="Label" />
                    <label for="buttonInputGroup2">Label</label>
                </div>
            </div>
        </div>
    </div>

Button with Dropdowns Input Group
draft
Input group with button add-ons.

    <div class="p-1">
        <div class="form-group">
            <div class="form-label-group mb-0">
                <div class="form-label-group-input">
                    <input type="text" id="buttonInputGroup1" class="form-control pr-0" placeholder="Label" />
                    <label for="buttonInputGroup1" class="pr-0">Label</label>
                </div>
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                        <div role="separator" class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="form-label-group mb-0">
                <div class="input-group-prepend">
                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                        <div role="separator" class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </div>
                <div class="form-label-group-input">
                    <input type="text" id="buttonInputGroup2" class="form-control" placeholder="Label" />
                    <label for="buttonInputGroup2">Label</label>
                </div>
            </div>
        </div>
    </div>

Phone Number Input
draft
Phone number inputs have a dropdown to select locale.

    <div class="p-1">
        <div class="form-group">
            <div class="form-label-group mb-0">
                <div class="input-group-prepend">
                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="flag-icon flag-icon-us"></span></button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                        <div role="separator" class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </div>
                <div class="form-label-group-input">
                    <input type="text" id="buttonInputGroup2" class="form-control" placeholder="Phone" value="+1 " />
                    <label for="buttonInputGroup2">Phone</label>
                </div>
            </div>
        </div>
    </div>

Password Input
draft
Password fields should always have a reveal and have their addon absolutely positioned to allow selection on entire component.

    <div class="p-1">

        <div class="form-group">
            <div class="form-label-group form-label-group-password">
                <div class="form-label-group-input">
                    <input type="password" id="passwordInput" class="form-control" placeholder="Password" autofocus />
                    <label for="passwordInput">Password</label>
                </div>
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button"><i class="material-icons material-icons-outlined">visibility_off</i></button>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="form-label-group form-label-group-password">
                <div class="form-label-group-input">
                    <input type="password" id="passwordInput1" class="form-control" placeholder="Password" value="Passw0rd" />
                    <label for="passwordInput">Password</label>
                </div>
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button"><i class="material-icons material-icons-outlined">visibility_off</i></button>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="form-label-group form-label-group-password">
                <div class="form-label-group-input">
                    <input type="text" id="passwordInput1" class="form-control" placeholder="Password" value="Passw0rd" />
                    <label for="passwordInput3">Password</label>
                </div>
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button"><i class="material-icons material-icons-outlined">visibility</i></button>
                </div>
            </div>
        </div>
    </div>

Set Password Input
draft
Use for setting passwords with policy enforcement. On success the policy requirements list are hidden and success alert fades in.

    <div class="p-1">
        <div class="form-group mb-5">
            <div class="form-label-group form-label-group-password">
                <div class="form-label-group-input">
                    <input type="password" id="passwordInput" class="form-control" placeholder="Password" autofocus />
                    <label for="passwordInput">Password</label>
                </div>
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button"><i class="material-icons material-icons-outlined">visibility_off</i></button>
                </div>
            </div>
            <small id="setPasswordInputHelp" class="form-text text-muted py-2">
                <div class="row">
                    <div class="col-sm-6">
                        <ul class="pl-4">
                          <li>One lowercase character</li>
                          <li>One uppercase character</li>
                          <li>One number</li>
                        </ul>
                    </div>
                    <div class="col-sm-6">
                        <ul class="pl-4">
                          <li>One special character (eg. !@#$%^&*)</li>
                          <li>8 characters minimum</li>
                        </ul>
                    </div>
                </div>
            </small>
        </div>
        <div class="form-group mb-5">
            <div class="form-label-group form-label-group-password">
                <div class="form-label-group-input">
                    <input type="password" id="passwordInput" class="form-control" placeholder="Password" value="P@s" />
                    <label for="passwordInput">Password</label>
                </div>
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button"><i class="material-icons material-icons-outlined">visibility_off</i></button>
                </div>
            </div>
            <small id="setPasswordInputHelp" class="form-text text-muted py-2">
                <div class="row">
                    <div class="col-sm-6">
                        <ul class="pl-4">
                          <li class="opacity-30">One lowercase character</li>
                          <li class="opacity-30">One uppercase character</li>
                          <li>One number</li>
                        </ul>
                    </div>
                    <div class="col-sm-6">
                        <ul class="pl-4">
                          <li class="opacity-30">One special character (eg. !@#$%^&*)</li>
                          <li>8 characters minimum</li>
                        </ul>
                    </div>
                </div>
            </small>
        </div>
        <div class="form-group mb-5">
            <div class="form-label-group form-label-group-password">
                <div class="form-label-group-input">
                    <input type="password" id="passwordInput" class="form-control" placeholder="Password" value="P@ssw0rd" />
                    <label for="passwordInput">Password</label>
                </div>
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button"><i class="material-icons material-icons-outlined">visibility_off</i></button>
                </div>
            </div>
            <div class="alert alert-success my-4" role="alert">
                <i class="material-icons material-icons-outlined mr-3">check_circle</i>Your password is secure and you're all set!
            </div>
        </div>
    </div>

Search Input
draft
Search input groups don‘t use floating labels, and like password inputs have their addon absolutely positioned to allow selection on entire component.

    <div class="p-1">
        <div class="form-group">
            <div class="input-group input-group-search">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="search-addon1"><i class="material-icons material-icons-outlined">search</i></span>
                </div>
                <input type="text" class="form-control" id="searchInput1" placeholder="Search" aria-label="Label" aria-describedby="basic-addon1">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary d-none" type="button"><i class="material-icons material-icons-outlined">close</i></button>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group input-group-search">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="search-addon3"><i class="material-icons material-icons-outlined">search</i></span>
                </div>
                <input type="text" class="form-control" id="searchInput1" placeholder="Search" aria-label="Label" aria-describedby="basic-addon3" value="bjensen">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button"><i class="material-icons material-icons-outlined">close</i></button>
                </div>
            </div>
        </div>

    </div>