Documentation

Browse source code
On this page

Form Elements

Bootstrap documentation

Classic Inputs

<div class="mb-3">
  <label class="form-label">Text</label>
  <input type="text" class="form-control" name="example-text-input" placeholder="Input placeholder">
</div>
<div class="mb-3">
  <label class="form-label">Password</label>
  <input type="text" class="form-control" name="example-password-input" placeholder="Input placeholder">
</div>

Form control rounded

<div class="mb-3">
  <label class="form-label">Form control rounded</label>
  <input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text..">
  <div class="input-icon">
    <input type="text" class="form-control form-control-rounded" placeholder="Search…">
    <span class="input-icon-addon">
      <!-- SVG icon code -->
    </span>
  </div>
</div>

Form control flush

<div class="mb-3">
  <label class="form-label">Form control flush</label>
  <input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text..">
</div>

Input with icon

<div class="mb-3">
  <label class="form-label">Icon input</label>
  <div class="input-icon mb-3">
    <input type="text" class="form-control" placeholder="Search…">
    <span class="input-icon-addon">
      <!-- SVG icon code -->
    </span>
  </div>
  <div class="input-icon mb-3">
    <span class="input-icon-addon">
      <!-- SVG icon code -->
    </span>
    <input type="text" class="form-control" placeholder="Username">
  </div>
</div>
<div class="mb-3">
  <label class="form-label">Loader input</label>
  <div class="input-icon mb-3">
    <input type="text" class="form-control" placeholder="Loading…">
    <span class="input-icon-addon">
      <div class="spinner-border spinner-border-sm text-muted" role="status"></div>
    </span>
  </div>
  <div class="input-icon mb-3">
    <span class="input-icon-addon">
      <div class="spinner-border spinner-border-sm text-muted" role="status"></div>
    </span>
    <input type="text" class="form-control" placeholder="Loading…">
  </div>
</div>

Separated inputs

<div class="mb-3">
  <label class="form-label">Separated inputs</label>
  <div class="row row-sm">
    <div class="col">
      <input type="text" class="form-control" placeholder="Search for…">
    </div>
    <div class="col-auto">
      <a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
        <!-- SVG icon code -->
      </a>
    </div>
  </div>
</div>

Textarea and select

Select
Select multiple
<div class="mb-3">
  <label class="form-label">Textarea</label>
  <textarea class="form-control" name="example-textarea" placeholder="Textarea placeholder"></textarea>
</div>
<div class="mb-3">
  <div class="form-label">Select</div>
  <select class="form-select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
<div class="mb-3">
  <div class="form-label">Select multiple</div>
  <select class="form-select" multiple>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

Validation states

Invalid feedback
<div class="mb-3">
  <label class="form-label">Validation States</label>
  <input type="text" class="form-control is-valid mb-2" placeholder="Valid State..">
  <input type="text" class="form-control is-invalid" placeholder="Invalid State..">
  <div class="invalid-feedback">Invalid feedback</div>
</div>

Subtle validation states

<div class="mb-3">
  <label class="form-label">Validation States</label>
  <input type="text" class="form-control is-valid is-valid-lite mb-2" placeholder="Valid State..">
  <input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..">
</div>

Input size

<div class="mb-3">
  <label class="form-label">Input sizing</label>
  <input class="form-control form-control-lg mb-2" type="text" placeholder=".form-control-lg">
  <input class="form-control mb-2" type="text" placeholder="Default input">
  <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
</div>

Image check

<div class="mb-3">
  <label class="form-label">Image Check</label>
  <div class="row row-sm">
    <div class="col-6 col-sm-4">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <img src="..." alt="Breakfast served with tea, bread and eggs" class="form-imagecheck-image">
        </span>
      </label>
    </div>
    <div class="col-6 col-sm-4">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input"  checked/>
        <span class="form-imagecheck-figure">
          <img src="..." alt="Book, fairy lights" class="form-imagecheck-image">
        </span>
      </label>
    </div>
    <div class="col-6 col-sm-4">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <img src="..." alt="Healthy Dinner" class="form-imagecheck-image">
        </span>
      </label>
    </div>
    <div class="col-6 col-sm-4">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input"  checked/>
        <span class="form-imagecheck-figure">
          <img src="..." alt="Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water" class="form-imagecheck-image">
        </span>
      </label>
    </div>
    <div class="col-6 col-sm-4">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck" type="checkbox" value="5" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <img src="..." alt="Beautiful blonde woman on a wooden pier by the lake" class="form-imagecheck-image">
        </span>
      </label>
    </div>
    <div class="col-6 col-sm-4">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck" type="checkbox" value="6" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <img src="..." alt="Still life of mandarin oranges with leaves" class="form-imagecheck-image">
        </span>
      </label>
    </div>
    <div class="col-6 col-sm-4">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck" type="checkbox" value="7" class="form-imagecheck-input"  checked/>
        <span class="form-imagecheck-figure">
          <img src="..." alt="Blonde woman having a healthy snack at the wooden pier" class="form-imagecheck-image">
        </span>
      </label>
    </div>
    <div class="col-6 col-sm-4">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck" type="checkbox" value="8" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <img src="..." alt="Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed" class="form-imagecheck-image">
        </span>
      </label>
    </div>
    <div class="col-6 col-sm-4">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck" type="checkbox" value="9" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <img src="..." alt="Overhead view of macarons on a marble slab" class="form-imagecheck-image">
        </span>
      </label>
    </div>
  </div>
</div>

Input color

<div class="mb-3">
  <label class="form-label">Color Input</label>
  <div class="row row-sm">
    <div class="col-auto">
      <label class="form-colorinput">
        <input name="color" type="radio" value="dark" class="form-colorinput-input" />
        <span class="form-colorinput-color bg-dark"></span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-colorinput form-colorinput-light">
        <input name="color" type="radio" value="white" class="form-colorinput-input"  checked/>
        <span class="form-colorinput-color bg-white"></span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-colorinput">
        <input name="color" type="radio" value="blue" class="form-colorinput-input" />
        <span class="form-colorinput-color bg-blue"></span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-colorinput">
        <input name="color" type="radio" value="azure" class="form-colorinput-input" />
        <span class="form-colorinput-color bg-azure"></span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-colorinput">
        <input name="color" type="radio" value="indigo" class="form-colorinput-input" />
        <span class="form-colorinput-color bg-indigo"></span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-colorinput">
        <input name="color" type="radio" value="purple" class="form-colorinput-input" />
        <span class="form-colorinput-color bg-purple"></span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-colorinput">
        <input name="color" type="radio" value="pink" class="form-colorinput-input" />
        <span class="form-colorinput-color bg-pink"></span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-colorinput">
        <input name="color" type="radio" value="red" class="form-colorinput-input" />
        <span class="form-colorinput-color bg-red"></span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-colorinput">
        <input name="color" type="radio" value="orange" class="form-colorinput-input" />
        <span class="form-colorinput-color bg-orange"></span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-colorinput">
        <input name="color" type="radio" value="yellow" class="form-colorinput-input" />
        <span class="form-colorinput-color bg-yellow"></span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-colorinput">
        <input name="color" type="radio" value="lime" class="form-colorinput-input" />
        <span class="form-colorinput-color bg-lime"></span>
      </label>
    </div>
  </div>
</div>

Input color picker

<div class="mb-3">
  <label class="form-label">Color picker</label>
  <input type="color" class="form-control form-control-color" value="#206bc4" title="Choose your color">
</div>

Datalists

<div class="mb-3">
  <label class="form-label">Datalist example</label>
  <input class="form-control" list="datalistOptions" placeholder="Type to search..."/>
  <datalist id="datalistOptions">
    <option value="Aruba"/>
    <option value="Afghanistan"/>
    <option value="Angola"/>
    <option value="Anguilla"/>
    <option value="Albania"/>
    <option value="Andorra"/>
    <option value="United Arab Emirates"/>
    <option value="Argentina"/>
    <option value="Armenia"/>
    <option value="American Samoa"/>
  </datalist>
</div>

Custom selectboxes

<div class="mb-3">
  <label class="form-label">Simple selectgroup</label>
  <div class="form-selectgroup">
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked>
      <span class="form-selectgroup-box">HTML</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input">
      <span class="form-selectgroup-box">CSS</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input">
      <span class="form-selectgroup-box">PHP</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input">
      <span class="form-selectgroup-box">JavaScript</span>
    </label>
  </div>
</div>
<div class="mb-3">
  <label class="form-label">Icon input</label>
  <div class="form-selectgroup">
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked>
      <span class="form-selectgroup-box"><!-- SVG icon code -->
      </span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="moon" class="form-selectgroup-input">
      <span class="form-selectgroup-box"><!-- SVG icon code -->
      </span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="cloud-rain" class="form-selectgroup-input">
      <span class="form-selectgroup-box"><!-- SVG icon code -->
      </span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="cloud" class="form-selectgroup-input">
      <span class="form-selectgroup-box"><!-- SVG icon code -->
      </span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="Other" class="form-selectgroup-input">
      <span class="form-selectgroup-box">Other</span>
    </label>
  </div>
</div>
<div class="mb-3">
  <label class="form-label">Selectgroup with icons and text</label>
  <div class="form-selectgroup">
    <label class="form-selectgroup-item">
      <input type="radio" name="icons" value="home" class="form-selectgroup-input" checked>
      <span class="form-selectgroup-box"><!-- SVG icon code -->
        Home</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="radio" name="icons" value="users" class="form-selectgroup-input">
      <span class="form-selectgroup-box"><!-- SVG icon code -->
        Users</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="radio" name="icons" value="circle" class="form-selectgroup-input">
      <span class="form-selectgroup-box"><!-- SVG icon code -->
        Circle</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="radio" name="icons" value="square" class="form-selectgroup-input">
      <span class="form-selectgroup-box"><!-- SVG icon code -->
        Square</span>
    </label>
  </div>
</div>
<div class="mb-3">
  <label class="form-label">Different style</label>
  <div class="form-selectgroup form-selectgroup-pills">
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked>
      <span class="form-selectgroup-box">HTML</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input">
      <span class="form-selectgroup-box">CSS</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input">
      <span class="form-selectgroup-box">PHP</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input">
      <span class="form-selectgroup-box">JavaScript</span>
    </label>
  </div>
</div>

Advanced selectboxes

<div class="mb-3">
  <label class="form-label">Payment method</label>
  <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
    <label class="form-selectgroup-item flex-fill">
      <input type="radio" name="form-payment" value="visa" class="form-selectgroup-input">
      <div class="form-selectgroup-box d-flex align-items-center p-3">
        <div class="mr-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div>
          <span class="payment payment-provider-visa payment-sm mr-2"></span>
          ending in <strong>7998</strong>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="radio" name="form-payment" value="mastercard" class="form-selectgroup-input" checked>
      <div class="form-selectgroup-box d-flex align-items-center p-3">
        <div class="mr-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div>
          <span class="payment payment-provider-mastercard payment-sm mr-2"></span>
          ending in <strong>2807</strong>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="radio" name="form-payment" value="paypal" class="form-selectgroup-input">
      <div class="form-selectgroup-box d-flex align-items-center p-3">
        <div class="mr-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div>
          <span class="payment payment-provider-paypal payment-sm mr-2"></span>
        </div>
      </div>
    </label>
  </div>
</div>
<div class="mb-3">
  <label class="form-label">Project Manager</label>
  <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
    <label class="form-selectgroup-item flex-fill">
      <input type="checkbox" name="form-project-manager[]" value="1" class="form-selectgroup-input" >
      <div class="form-selectgroup-box d-flex align-items-center p-3">
        <div class="mr-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div class="form-selectgroup-box-content d-flex align-items-center">
          <span class="avatar mr-3" style="background-image: url(...)"></span>
          <div class="lh-sm">
            <div class="strong">Paweł Kuna</div>
            <div class="text-muted">UI Designer</div>
          </div>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="checkbox" name="form-project-manager[]" value="2" class="form-selectgroup-input"  checked>
      <div class="form-selectgroup-box d-flex align-items-center p-3">
        <div class="mr-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div class="form-selectgroup-box-content d-flex align-items-center">
          <span class="avatar mr-3">JL</span>
          <div class="lh-sm">
            <div class="strong">Jeffie Lewzey</div>
            <div class="text-muted">Chemical Engineer</div>
          </div>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="checkbox" name="form-project-manager[]" value="3" class="form-selectgroup-input" >
      <div class="form-selectgroup-box d-flex align-items-center p-3">
        <div class="mr-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div class="form-selectgroup-box-content d-flex align-items-center">
          <span class="avatar mr-3" style="background-image: url(...)"></span>
          <div class="lh-sm">
            <div class="strong">Mallory Hulme</div>
            <div class="text-muted">Geologist IV</div>
          </div>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="checkbox" name="form-project-manager[]" value="4" class="form-selectgroup-input" >
      <div class="form-selectgroup-box d-flex align-items-center p-3">
        <div class="mr-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div class="form-selectgroup-box-content d-flex align-items-center">
          <span class="avatar mr-3" style="background-image: url(...)"></span>
          <div class="lh-sm">
            <div class="strong">Dunn Slane</div>
            <div class="text-muted">Research Nurse</div>
          </div>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="checkbox" name="form-project-manager[]" value="5" class="form-selectgroup-input" >
      <div class="form-selectgroup-box d-flex align-items-center p-3">
        <div class="mr-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div class="form-selectgroup-box-content d-flex align-items-center">
          <span class="avatar mr-3" style="background-image: url(...)"></span>
          <div class="lh-sm">
            <div class="strong">Emmy Levet</div>
            <div class="text-muted">VP Product Management</div>
          </div>
        </div>
      </div>
    </label>
  </div>
</div>

Toggle switches

Toggle switches
Single switch
<div class="mb-3">
  <div class="form-label">Toggle switches</div>
  <label class="form-check form-switch">
    <input class="form-check-input" type="checkbox" checked>
    <span class="form-check-label">Option 1</span>
  </label>
  <label class="form-check form-switch">
    <input class="form-check-input" type="checkbox">
    <span class="form-check-label">Option 2</span>
  </label>
  <label class="form-check form-switch">
    <input class="form-check-input" type="checkbox">
    <span class="form-check-label">Option 3</span>
  </label>
</div>
<div class="mb-3">
  <div class="form-label">Single switch</div>
  <label class="form-check form-switch">
    <input class="form-check-input" type="checkbox">
    <span class="form-check-label">I agree with terms and conditions</span>
  </label>
</div>

Radios

Radios
Inline Radios
<div class="mb-3">
  <div class="form-label">Radios</div>
  <div>
    <label class="form-check">
      <input class="form-check-input" type="radio" checked>
      <span class="form-check-label">Option 1</span>
    </label>
    <label class="form-check">
      <input class="form-check-input" type="radio">
      <span class="form-check-label">Option 2</span>
    </label>
    <label class="form-check">
      <input class="form-check-input" type="radio" disabled>
      <span class="form-check-label">Option 3</span>
    </label>
    <label class="form-check">
      <input class="form-check-input" type="radio" checked disabled>
      <span class="form-check-label">Option 4</span>
    </label>
  </div>
</div>
<div class="mb-3">
  <div class="form-label">Inline Radios</div>
  <div>
    <label class="form-check form-check-inline">
      <input class="form-check-input" type="radio" checked>
      <span class="form-check-label">Option 1</span>
    </label>
    <label class="form-check form-check-inline">
      <input class="form-check-input" type="radio">
      <span class="form-check-label">Option 2</span>
    </label>
    <label class="form-check form-check-inline">
      <input class="form-check-input" type="radio" disabled>
      <span class="form-check-label">Option 3</span>
    </label>
  </div>
</div>

Checkboxes

Checkboxes
Inline Checkboxes
<div class="mb-3">
  <div class="form-label">Checkboxes</div>
  <div>
    <label class="form-check">
      <input class="form-check-input" type="checkbox">
      <span class="form-check-label">Checkbox input</span>
    </label>
    <label class="form-check">
      <input class="form-check-input" type="checkbox" disabled>
      <span class="form-check-label">Disabled checkbox input</span>
    </label>
    <label class="form-check">
      <input class="form-check-input" type="checkbox" checked>
      <span class="form-check-label">Checked checkbox input</span>
    </label>
  </div>
</div>
<div class="mb-3">
  <div class="form-label">Inline Checkboxes</div>
  <div>
    <label class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox">
      <span class="form-check-label">Option 1</span>
    </label>
    <label class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" disabled>
      <span class="form-check-label">Option 2</span>
    </label>
    <label class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" checked>
      <span class="form-check-label">Option 3</span>
    </label>
  </div>
</div>

Range input

<div class="mb-3">
  <label class="form-label">Range input</label>
  <input type="range" class="form-range mb-2" value="40" min="0" max="100" step="10">
  <div class="form-range mb-2" id="range-simple"></div>
  <div class="form-range mb-2" id="range-connect"></div>
  <div class="form-range mb-2 text-green" id="range-color"></div>
</div>

Fieldset

<fieldset class="form-fieldset">
  <div class="mb-3">
    <label class="form-label">Full name<span class="form-required">*</span></label>
    <input type="text" class="form-control" autocomplete="off"/>
  </div>
  <div class="mb-3">
    <label class="form-label">Company<span class="form-required">*</span></label>
    <input type="text" class="form-control"  autocomplete="off"/>
  </div>
  <div class="mb-3">
    <label class="form-label">Email<span class="form-required">*</span></label>
    <input type="email" class="form-control"  autocomplete="off"/>
  </div>
  <div class="">
    <label class="form-label">Phone number</label>
    <input type="tel" class="form-control" autocomplete="off"/>
  </div>
</fieldset>

Input group

@
.tabler.io
https://
.tabler.io 
<div class="mb-3">
  <label class="form-label">Input group</label>
  <div class="input-group mb-2">
    <div class="input-group-prepend">
      <span class="input-group-text">
        @
      </span>
    </div>
    <input type="text" class="form-control"  placeholder="username" >
  </div>
  <div class="input-group mb-2">
    <input type="text" class="form-control"  placeholder="subdomain" >
    <div class="input-group-append">
      <span class="input-group-text">
        .tabler.io
      </span>
    </div>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">
        https://
      </span>
    </div>
    <input type="text" class="form-control"  placeholder="subdomain" >
    <div class="input-group-append">
      <span class="input-group-text">
        .tabler.io
      </span>
    </div>
  </div>
</div>

Input with checkbox or radios

<div class="mb-3">
  <label class="form-label">Input with checkbox or radios</label>
  <div class="input-group mb-2">
    <div class="input-group-prepend">
      <span class="input-group-text">
        <input class="form-check-input m-0" type="checkbox" checked>
      </span>
    </div>
    <input type="text" class="form-control" >
  </div>
  <div class="input-group">
    <input type="text" class="form-control" >
    <div class="input-group-append">
      <span class="input-group-text">
        <input class="form-check-input m-0" type="radio" checked>
      </span>
    </div>
  </div>
</div>

Input with prepended or appended text

https://tabler.io/users/
.tabler.io 
<div class="mb-3">
  <label class="form-label">Input with prepended text</label>
  <div class="input-group input-group-flat mb-2">
    <div class="input-group-prepend">
      <span class="input-group-text">
        https://tabler.io/users/
      </span>
    </div>
    <input type="text" class="form-control pl-0"  value="yourfancyusername">
  </div>
  <div class="input-group input-group-flat">
    <input type="text" class="form-control text-right pr-0"  value="yourfancydomain">
    <div class="input-group-append">
      <span class="input-group-text">
        .tabler.io
      </span>
    </div>
  </div>
</div>
Show password 
<div class="mb-3">
  <label class="form-label">Input with appended link</label>
  <div class="input-group input-group-flat">
    <input type="password" class="form-control"  value="ultrastrongpassword">
    <div class="input-group-append">
      <span class="input-group-text">
        <a href="#" class="input-group-link">Show password</a>
      </span>
    </div>
  </div>
</div>
<div class="mb-3">
  <label class="form-label">Input with appended icon links</label>
  <div class="input-group input-group-flat">
    <input type="text" class="form-control" >
    <div class="input-group-append">
      <span class="input-group-text">
        <a href="#" class="link-secondary" title="Clear search" data-toggle="tooltip"><!-- SVG icon code -->
        </a>
        <a href="#" class="link-secondary ml-2" title="Search settings" data-toggle="tooltip"><!-- SVG icon code -->
        </a>
        <a href="#" class="link-secondary ml-2 disabled" title="Add notification" data-toggle="tooltip"><!-- SVG icon code -->
        </a>
      </span>
    </div>
  </div>
</div>