Group Input Bootstrap 5

Grup Input

.input-group Kelas ini adalah wadah yang dapat meningkatkan input dengan menambah ikon, teks, atau tombol di depan atau belakang field input sebagai 'teks bantuan'.

Untuk mengatur gaya teks bantuan khusus, gunakan .input-group-text Tipe:

Example

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Username">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Email Anda">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

Try It Yourself

Ukuran Group Input

Silakan pindahkan .input-group-sm Kelas untuk group input kecil, akan .input-group-lg Untuk group input besar:

Example

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">Kecil</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">Default</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">Besar</span>
  <input type="text" class="form-control">
</div>

Try It Yourself

Beberapa input dan bantuan

Tambah beberapa kontrol input atau plugin:

Example

<!-- Beberapa kontrol input -->
<div class="input-group mb-3">
  <span class="input-group-text">Nama Lengkap</span>
  <input type="text" class="form-control" placeholder="Keluarga">
  <input type="text" class="form-control" placeholder="Nama">
</div>
<!-- Beberapa plugin/teks bantuan -->
<div class="input-group mb-3">
  <span class="input-group-text">Satu</span>
  <span class="input-group-text">Dua</span>
  <span class="input-group-text">Tiga</span>
  <input type="text" class="form-control">
</div>

Try It Yourself

Group Input dengan Kotak Centang dan Tombol Pilihan

Anda juga dapat menggunakan kotak centang atau tombol pilihan untuk menggantikan teks:

Example

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="Some Text">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="Some Text">
</div>

Try It Yourself

Tombol Group Input

Example

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button"> Tombol Dasar</button>
  <input type="text" class="form-control" placeholder="Some Text">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search">
  <button class="btn btn-success" type="submit">Go</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Some Text">
  <button class="btn btn-primary" type="button">OK</button>
  <button class="btn btn-danger" type="button">Cancel</button>
</div>

Try It Yourself

Input Group with Dropdown Button

Add a dropdown button to the input group. Note that you do not need a .dropdown wrapper container as usual.

Example

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown Button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Username">
</div>

Try It Yourself