---
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 %}
{% 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 %}
{% 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 %}
{% 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 %}