On this page

Input groups

Prepend

Text

Prepend
Prepend
Prepend
Prepend
<div class="input-group mb-3">
    <div class="input-group-text">Prepend</div>
    <select class="form-select" id="prepend-text-single-field" data-placeholder="Choose one thing">
        <option></option>
        <option>Reactive</option>
        <option>Solution</option>
        <option>Conglomeration</option>
        <option>Algoritm</option>
        <option>Holistic</option>
    </select>
</div>

<div class="input-group mb-3">
    <div class="input-group-text">Prepend</div>
    <select class="form-select" data-placeholder="Choose anything" id="prepend-text-multiple-field" multiple>
        <option>Christmas Island</option>
        <option>South Sudan</option>
        <option>Jamaica</option>
        <option>Kenya</option>
        <option>French Guiana</option>
        <option>Mayotta</option>
        <option>Liechtenstein</option>
        <option>Denmark</option>
        <option>Eritrea</option>
        <option>Gibraltar</option>
        <option>Saint Helena, Ascension and Tristan da Cunha</option>
        <option>Haiti</option>
        <option>Namibia</option>
        <option>South Georgia and the South Sandwich Islands</option>
        <option>Vietnam</option>
        <option>Yemen</option>
        <option>Philippines</option>
        <option>Benin</option>
        <option>Czech Republic</option>
        <option>Russia</option>
    </select>
</div>
$( '#prepend-text-single-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
} );

$( '#prepend-text-multiple-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    closeOnSelect: false,
} );

Button

<div class="input-group mb-3">
    <button class="btn btn-outline-secondary" type="button">Prepend</button>
    <select class="form-select" id="prepend-button-single-field" data-placeholder="Choose one thing">
        <option></option>
        <option>Reactive</option>
        <option>Solution</option>
        <option>Conglomeration</option>
        <option>Algoritm</option>
        <option>Holistic</option>
    </select>
</div>

<div class="input-group mb-3">
    <button class="btn btn-outline-secondary" type="button">Prepend</button>
    <select class="form-select" data-placeholder="Choose anything" id="prepend-button-multiple-field" multiple>
        <option>Christmas Island</option>
        <option>South Sudan</option>
        <option>Jamaica</option>
        <option>Kenya</option>
        <option>French Guiana</option>
        <option>Mayotta</option>
        <option>Liechtenstein</option>
        <option>Denmark</option>
        <option>Eritrea</option>
        <option>Gibraltar</option>
        <option>Saint Helena, Ascension and Tristan da Cunha</option>
        <option>Haiti</option>
        <option>Namibia</option>
        <option>South Georgia and the South Sandwich Islands</option>
        <option>Vietnam</option>
        <option>Yemen</option>
        <option>Philippines</option>
        <option>Benin</option>
        <option>Czech Republic</option>
        <option>Russia</option>
    </select>
</div>
$( '#prepend-button-single-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
} );

$( '#prepend-button-multiple-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    closeOnSelect: false,
} );

Dropdown

<div class="input-group mb-3">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Prepend</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
    <select class="form-select" id="prepend-dropdown-single-field" data-placeholder="Choose one thing">
        <option></option>
        <option>Reactive</option>
        <option>Solution</option>
        <option>Conglomeration</option>
        <option>Algoritm</option>
        <option>Holistic</option>
    </select>
</div>

<div class="input-group mb-3">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Prepend</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
    <select class="form-select" data-placeholder="Choose anything" id="prepend-dropdown-multiple-field" multiple>
        <option>Christmas Island</option>
        <option>South Sudan</option>
        <option>Jamaica</option>
        <option>Kenya</option>
        <option>French Guiana</option>
        <option>Mayotta</option>
        <option>Liechtenstein</option>
        <option>Denmark</option>
        <option>Eritrea</option>
        <option>Gibraltar</option>
        <option>Saint Helena, Ascension and Tristan da Cunha</option>
        <option>Haiti</option>
        <option>Namibia</option>
        <option>South Georgia and the South Sandwich Islands</option>
        <option>Vietnam</option>
        <option>Yemen</option>
        <option>Philippines</option>
        <option>Benin</option>
        <option>Czech Republic</option>
        <option>Russia</option>
    </select>
</div>
$( '#prepend-dropdown-single-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
} );

$( '#prepend-dropdown-multiple-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    closeOnSelect: false,
} );

Dropdown toggle

<div class="input-group mb-3">
    <button class="btn btn-outline-secondary">Prepend</button>
    <button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
    <select class="form-select" id="prepend-toggle-single-field" data-placeholder="Choose one thing">
        <option></option>
        <option>Reactive</option>
        <option>Solution</option>
        <option>Conglomeration</option>
        <option>Algoritm</option>
        <option>Holistic</option>
    </select>
</div>

<div class="input-group mb-3">
    <button class="btn btn-outline-secondary">Prepend</button>
    <button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
    <select class="form-select" data-placeholder="Choose anything" id="prepend-toggle-multiple-field" multiple>
        <option>Christmas Island</option>
        <option>South Sudan</option>
        <option>Jamaica</option>
        <option>Kenya</option>
        <option>French Guiana</option>
        <option>Mayotta</option>
        <option>Liechtenstein</option>
        <option>Denmark</option>
        <option>Eritrea</option>
        <option>Gibraltar</option>
        <option>Saint Helena, Ascension and Tristan da Cunha</option>
        <option>Haiti</option>
        <option>Namibia</option>
        <option>South Georgia and the South Sandwich Islands</option>
        <option>Vietnam</option>
        <option>Yemen</option>
        <option>Philippines</option>
        <option>Benin</option>
        <option>Czech Republic</option>
        <option>Russia</option>
    </select>
</div>
$( '#prepend-toggle-single-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
} );

$( '#prepend-toggle-multiple-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    closeOnSelect: false,
} );

Append

Text

Append
Append
Append
Append
<div class="input-group mb-3">
    <select class="form-select" id="append-text-single-field" data-placeholder="Choose one thing">
        <option></option>
        <option>Reactive</option>
        <option>Solution</option>
        <option>Conglomeration</option>
        <option>Algoritm</option>
        <option>Holistic</option>
    </select>
    <div class="input-group-text">Append</div>
</div>

<div class="input-group mb-3">
    <select class="form-select" data-placeholder="Choose anything" id="append-text-multiple-field" multiple>
        <option>Christmas Island</option>
        <option>South Sudan</option>
        <option>Jamaica</option>
        <option>Kenya</option>
        <option>French Guiana</option>
        <option>Mayotta</option>
        <option>Liechtenstein</option>
        <option>Denmark</option>
        <option>Eritrea</option>
        <option>Gibraltar</option>
        <option>Saint Helena, Ascension and Tristan da Cunha</option>
        <option>Haiti</option>
        <option>Namibia</option>
        <option>South Georgia and the South Sandwich Islands</option>
        <option>Vietnam</option>
        <option>Yemen</option>
        <option>Philippines</option>
        <option>Benin</option>
        <option>Czech Republic</option>
        <option>Russia</option>
    </select>
    <div class="input-group-text">Append</div>
</div>
$( '#append-text-single-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
} );

$( '#append-text-multiple-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    closeOnSelect: false,
} );

Button

<div class="input-group mb-3">
    <select class="form-select" id="append-button-single-field" data-placeholder="Choose one thing">
        <option></option>
        <option>Reactive</option>
        <option>Solution</option>
        <option>Conglomeration</option>
        <option>Algoritm</option>
        <option>Holistic</option>
    </select>
    <button class="btn btn-outline-secondary" type="button">Append</button>
</div>

<div class="input-group mb-3">
    <select class="form-select" data-placeholder="Choose anything" id="append-button-multiple-field" multiple>
        <option>Christmas Island</option>
        <option>South Sudan</option>
        <option>Jamaica</option>
        <option>Kenya</option>
        <option>French Guiana</option>
        <option>Mayotta</option>
        <option>Liechtenstein</option>
        <option>Denmark</option>
        <option>Eritrea</option>
        <option>Gibraltar</option>
        <option>Saint Helena, Ascension and Tristan da Cunha</option>
        <option>Haiti</option>
        <option>Namibia</option>
        <option>South Georgia and the South Sandwich Islands</option>
        <option>Vietnam</option>
        <option>Yemen</option>
        <option>Philippines</option>
        <option>Benin</option>
        <option>Czech Republic</option>
        <option>Russia</option>
    </select>
    <button class="btn btn-outline-secondary" type="button">Append</button>
</div>
$( '#append-button-single-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
} );

$( '#append-button-multiple-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    closeOnSelect: false,
} );

Dropdown

<div class="input-group mb-3">
    <select class="form-select" id="append-dropdown-single-field" data-placeholder="Choose one thing">
        <option></option>
        <option>Reactive</option>
        <option>Solution</option>
        <option>Conglomeration</option>
        <option>Algoritm</option>
        <option>Holistic</option>
    </select>
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Append</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>

<div class="input-group mb-3">
    <select class="form-select" data-placeholder="Choose anything" id="append-dropdown-multiple-field" multiple>
        <option>Christmas Island</option>
        <option>South Sudan</option>
        <option>Jamaica</option>
        <option>Kenya</option>
        <option>French Guiana</option>
        <option>Mayotta</option>
        <option>Liechtenstein</option>
        <option>Denmark</option>
        <option>Eritrea</option>
        <option>Gibraltar</option>
        <option>Saint Helena, Ascension and Tristan da Cunha</option>
        <option>Haiti</option>
        <option>Namibia</option>
        <option>South Georgia and the South Sandwich Islands</option>
        <option>Vietnam</option>
        <option>Yemen</option>
        <option>Philippines</option>
        <option>Benin</option>
        <option>Czech Republic</option>
        <option>Russia</option>
    </select>
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Append</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>
$( '#append-dropdown-single-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
} );

$( '#append-dropdown-multiple-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    closeOnSelect: false,
} );

Dropdown toggle

<div class="input-group mb-3">
    <select class="form-select" id="append-toggle-single-field" data-placeholder="Choose one thing">
        <option></option>
        <option>Reactive</option>
        <option>Solution</option>
        <option>Conglomeration</option>
        <option>Algoritm</option>
        <option>Holistic</option>
    </select>
    <button class="btn btn-outline-secondary">Append</button>
    <button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>

<div class="input-group mb-3">
    <select class="form-select" data-placeholder="Choose anything" id="append-toggle-multiple-field" multiple>
        <option>Christmas Island</option>
        <option>South Sudan</option>
        <option>Jamaica</option>
        <option>Kenya</option>
        <option>French Guiana</option>
        <option>Mayotta</option>
        <option>Liechtenstein</option>
        <option>Denmark</option>
        <option>Eritrea</option>
        <option>Gibraltar</option>
        <option>Saint Helena, Ascension and Tristan da Cunha</option>
        <option>Haiti</option>
        <option>Namibia</option>
        <option>South Georgia and the South Sandwich Islands</option>
        <option>Vietnam</option>
        <option>Yemen</option>
        <option>Philippines</option>
        <option>Benin</option>
        <option>Czech Republic</option>
        <option>Russia</option>
    </select>
    <button class="btn btn-outline-secondary">Append</button>
    <button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>
$( '#append-toggle-single-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
} );

$( '#append-toggle-multiple-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    closeOnSelect: false,
} );

Prepend & Append

Text

Prepend
Append
Prepend
Append
Prepend
Append
Prepend
Append
<div class="input-group mb-3">
    <div class="input-group-text">Prepend</div>
    <select class="form-select" id="prepend-append-text-single-field" data-placeholder="Choose one thing">
        <option></option>
        <option>Reactive</option>
        <option>Solution</option>
        <option>Conglomeration</option>
        <option>Algoritm</option>
        <option>Holistic</option>
    </select>
    <div class="input-group-text">Append</div>
</div>

<div class="input-group mb-3">
    <div class="input-group-text">Prepend</div>
    <select class="form-select" data-placeholder="Choose anything" id="prepend-append-text-multiple-field" multiple>
        <option>Christmas Island</option>
        <option>South Sudan</option>
        <option>Jamaica</option>
        <option>Kenya</option>
        <option>French Guiana</option>
        <option>Mayotta</option>
        <option>Liechtenstein</option>
        <option>Denmark</option>
        <option>Eritrea</option>
        <option>Gibraltar</option>
        <option>Saint Helena, Ascension and Tristan da Cunha</option>
        <option>Haiti</option>
        <option>Namibia</option>
        <option>South Georgia and the South Sandwich Islands</option>
        <option>Vietnam</option>
        <option>Yemen</option>
        <option>Philippines</option>
        <option>Benin</option>
        <option>Czech Republic</option>
        <option>Russia</option>
    </select>
    <div class="input-group-text">Append</div>
</div>
$( '#prepend-append-text-single-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
} );

$( '#prepend-append-text-multiple-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    closeOnSelect: false,
} );

Button

<div class="input-group mb-3">
    <button class="btn btn-outline-secondary" type="button">Prepend</button>
    <select class="form-select" id="prepend-append-button-single-field" data-placeholder="Choose one thing">
        <option></option>
        <option>Reactive</option>
        <option>Solution</option>
        <option>Conglomeration</option>
        <option>Algoritm</option>
        <option>Holistic</option>
    </select>
    <button class="btn btn-outline-secondary" type="button">Append</button>
</div>

<div class="input-group mb-3">
    <button class="btn btn-outline-secondary" type="button">Prepend</button>
    <select class="form-select" data-placeholder="Choose anything" id="prepend-append-button-multiple-field" multiple>
        <option>Christmas Island</option>
        <option>South Sudan</option>
        <option>Jamaica</option>
        <option>Kenya</option>
        <option>French Guiana</option>
        <option>Mayotta</option>
        <option>Liechtenstein</option>
        <option>Denmark</option>
        <option>Eritrea</option>
        <option>Gibraltar</option>
        <option>Saint Helena, Ascension and Tristan da Cunha</option>
        <option>Haiti</option>
        <option>Namibia</option>
        <option>South Georgia and the South Sandwich Islands</option>
        <option>Vietnam</option>
        <option>Yemen</option>
        <option>Philippines</option>
        <option>Benin</option>
        <option>Czech Republic</option>
        <option>Russia</option>
    </select>
    <button class="btn btn-outline-secondary" type="button">Append</button>
</div>
$( '#prepend-append-button-single-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
} );

$( '#prepend-append-button-multiple-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    closeOnSelect: false,
} );

Dropdown

<div class="input-group mb-3">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Prepend</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
    <select class="form-select" id="prepend-append-dropdown-single-field" data-placeholder="Choose one thing">
        <option></option>
        <option>Reactive</option>
        <option>Solution</option>
        <option>Conglomeration</option>
        <option>Algoritm</option>
        <option>Holistic</option>
    </select>
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Append</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>

<div class="input-group mb-3">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Prepend</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
    <select class="form-select" data-placeholder="Choose anything" id="prepend-append-dropdown-multiple-field" multiple>
        <option>Christmas Island</option>
        <option>South Sudan</option>
        <option>Jamaica</option>
        <option>Kenya</option>
        <option>French Guiana</option>
        <option>Mayotta</option>
        <option>Liechtenstein</option>
        <option>Denmark</option>
        <option>Eritrea</option>
        <option>Gibraltar</option>
        <option>Saint Helena, Ascension and Tristan da Cunha</option>
        <option>Haiti</option>
        <option>Namibia</option>
        <option>South Georgia and the South Sandwich Islands</option>
        <option>Vietnam</option>
        <option>Yemen</option>
        <option>Philippines</option>
        <option>Benin</option>
        <option>Czech Republic</option>
        <option>Russia</option>
    </select>
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Append</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>
$( '#prepend-append-dropdown-single-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
} );

$( '#prepend-append-dropdown-multiple-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    closeOnSelect: false,
} );

Dropdown toggle

<div class="input-group mb-3">
    <button class="btn btn-outline-secondary">Prepend</button>
    <button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
    <select class="form-select" id="prepend-append-toggle-single-field" data-placeholder="Choose one thing">
        <option></option>
        <option>Reactive</option>
        <option>Solution</option>
        <option>Conglomeration</option>
        <option>Algoritm</option>
        <option>Holistic</option>
    </select>
    <button class="btn btn-outline-secondary">Append</button>
    <button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>

<div class="input-group mb-3">
    <button class="btn btn-outline-secondary">Prepend</button>
    <button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
    <select class="form-select" data-placeholder="Choose anything" id="prepend-append-toggle-multiple-field" multiple>
        <option>Christmas Island</option>
        <option>South Sudan</option>
        <option>Jamaica</option>
        <option>Kenya</option>
        <option>French Guiana</option>
        <option>Mayotta</option>
        <option>Liechtenstein</option>
        <option>Denmark</option>
        <option>Eritrea</option>
        <option>Gibraltar</option>
        <option>Saint Helena, Ascension and Tristan da Cunha</option>
        <option>Haiti</option>
        <option>Namibia</option>
        <option>South Georgia and the South Sandwich Islands</option>
        <option>Vietnam</option>
        <option>Yemen</option>
        <option>Philippines</option>
        <option>Benin</option>
        <option>Czech Republic</option>
        <option>Russia</option>
    </select>
    <button class="btn btn-outline-secondary">Append</button>
    <button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>
$( '#prepend-append-toggle-single-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
} );

$( '#prepend-append-toggle-multiple-field' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    closeOnSelect: false,
} );