--- layout: default title: Input groups title_tag: true permalink: /examples/input-groups/ --- {%- capture single_select -%} {%- endcapture -%} {%- capture multiple_select -%} {%- endcapture -%} {%- capture prepend_text -%}
Prepend
{%- endcapture -%} {%- capture prepend_button -%} {%- endcapture -%} {%- capture prepend_dropdown -%} {%- endcapture -%} {%- capture prepend_toggle -%} {%- endcapture -%} {% assign append_text = prepend_text | replace: "Prepend", "Append" %} {% assign append_button = prepend_button | replace: "Prepend", "Append" %} {% assign append_dropdown = prepend_dropdown | replace: "Prepend", "Append" %} {% assign append_toggle = prepend_toggle | replace: "Prepend", "Append" %}

Prepend

Text

{% assign field_name = "prepend-text" %} {% capture example_html %}
{{ prepend_text }} {{ single_select | replace: "single-select", field_name }}
{{ prepend_text }} {{ multiple_select | replace: "multiple-select", field_name }}
{% endcapture %} {% capture example_js %} $( '#{{ field_name }}-single-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), } ); $( '#{{ field_name }}-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, } ); {% endcapture %} {% include example.html %}

Button

{% assign field_name = "prepend-button" %} {% capture example_html %}
{{ prepend_button }} {{ single_select | replace: "single-select", field_name }}
{{ prepend_button }} {{ multiple_select | replace: "multiple-select", field_name }}
{% endcapture %} {% capture example_js %} $( '#{{ field_name }}-single-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), } ); $( '#{{ field_name }}-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, } ); {% endcapture %} {% include example.html %}

Dropdown

{% assign field_name = "prepend-dropdown" %} {% capture example_html %}
{{ prepend_dropdown }} {{ single_select | replace: "single-select", field_name }}
{{ prepend_dropdown }} {{ multiple_select | replace: "multiple-select", field_name }}
{% endcapture %} {% capture example_js %} $( '#{{ field_name }}-single-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), } ); $( '#{{ field_name }}-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, } ); {% endcapture %} {% include example.html %}

Dropdown toggle

{% assign field_name = "prepend-toggle" %} {% capture example_html %}
{{ prepend_toggle }} {{ single_select | replace: "single-select", field_name }}
{{ prepend_toggle }} {{ multiple_select | replace: "multiple-select", field_name }}
{% endcapture %} {% capture example_js %} $( '#{{ field_name }}-single-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), } ); $( '#{{ field_name }}-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, } ); {% endcapture %} {% include example.html %}

Append

Text

{% assign field_name = "append-text" %} {% capture example_html %}
{{ single_select | replace: "single-select", field_name }} {{ append_text }}
{{ multiple_select | replace: "multiple-select", field_name }} {{ append_text }}
{% endcapture %} {% capture example_js %} $( '#{{ field_name }}-single-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), } ); $( '#{{ field_name }}-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, } ); {% endcapture %} {% include example.html %}

Button

{% assign field_name = "append-button" %} {% capture example_html %}
{{ single_select | replace: "single-select", field_name }} {{ append_button }}
{{ multiple_select | replace: "multiple-select", field_name }} {{ append_button }}
{% endcapture %} {% capture example_js %} $( '#{{ field_name }}-single-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), } ); $( '#{{ field_name }}-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, } ); {% endcapture %} {% include example.html %}

Dropdown

{% assign field_name = "append-dropdown" %} {% capture example_html %}
{{ single_select | replace: "single-select", field_name }} {{ append_dropdown }}
{{ multiple_select | replace: "multiple-select", field_name }} {{ append_dropdown }}
{% endcapture %} {% capture example_js %} $( '#{{ field_name }}-single-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), } ); $( '#{{ field_name }}-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, } ); {% endcapture %} {% include example.html %}

Dropdown toggle

{% assign field_name = "append-toggle" %} {% capture example_html %}
{{ single_select | replace: "single-select", field_name }} {{ append_toggle }}
{{ multiple_select | replace: "multiple-select", field_name }} {{ append_toggle }}
{% endcapture %} {% capture example_js %} $( '#{{ field_name }}-single-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), } ); $( '#{{ field_name }}-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, } ); {% endcapture %} {% include example.html %}

Prepend & Append

Text

{% assign field_name = "prepend-append-text" %} {% capture example_html %}
{{ prepend_text }} {{ single_select | replace: "single-select", field_name }} {{ append_text }}
{{ prepend_text }} {{ multiple_select | replace: "multiple-select", field_name }} {{ append_text }}
{% endcapture %} {% capture example_js %} $( '#{{ field_name }}-single-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), } ); $( '#{{ field_name }}-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, } ); {% endcapture %} {% include example.html %}

Button

{% assign field_name = "prepend-append-button" %} {% capture example_html %}
{{ prepend_button }} {{ single_select | replace: "single-select", field_name }} {{ append_button }}
{{ prepend_button }} {{ multiple_select | replace: "multiple-select", field_name }} {{ append_button }}
{% endcapture %} {% capture example_js %} $( '#{{ field_name }}-single-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), } ); $( '#{{ field_name }}-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, } ); {% endcapture %} {% include example.html %}

Dropdown

{% assign field_name = "prepend-append-dropdown" %} {% capture example_html %}
{{ prepend_dropdown }} {{ single_select | replace: "single-select", field_name }} {{ append_dropdown }}
{{ prepend_dropdown }} {{ multiple_select | replace: "multiple-select", field_name }} {{ append_dropdown }}
{% endcapture %} {% capture example_js %} $( '#{{ field_name }}-single-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), } ); $( '#{{ field_name }}-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, } ); {% endcapture %} {% include example.html %}

Dropdown toggle

{% assign field_name = "prepend-append-toggle" %} {% capture example_html %}
{{ prepend_toggle }} {{ single_select | replace: "single-select", field_name }} {{ append_toggle }}
{{ prepend_toggle }} {{ multiple_select | replace: "multiple-select", field_name }} {{ append_toggle }}
{% endcapture %} {% capture example_js %} $( '#{{ field_name }}-single-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), } ); $( '#{{ field_name }}-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, } ); {% endcapture %} {% include example.html %}