Please wait...
Page is loading

Super Select

is a select enhanced with Select2 with additional Search, RTL and mobile non native support.

Getting started

To use super select simply include bs4 theme in your bundle file 

//= require vendor/bootstrap-4.4.1-iplan-theme.bundle

super select should be manually initialized as follows 

$(selector).superSelect({});

When using super select include in your bundle file BS4 super select initializer and every dom element with {data: {toggle: 'super-select'}} will be auto initialized with the super select and pre defined custom options. 

//= require initializers/bs4-super-select

You can use super select as described in Select2

Default behaviour

Super select field is a regular select field with .form-control And .custom-select
* You don't need to add .custom-select class cause it will be added automatically, but you should add .form-control

You can use the following options

  • data-toggle: 'super-select' (when using the initializer) to auto initialize the select
  • 'data-placeholder': 'xxx' to set a prompt for no option selected
  • 'data-groups': 'sticky' to make groups title sticky
  • 'data-persistent-search': true to make search persistent (even when super select dropdown is closed)
  • multiple: true to make super select accept multiple results
Placeholder
When using a data-placeholder in non ajax super select the first option in the select tag must be a blank option, you can achieve this with options_for_select and {include_blank: true}
Persistent search
Search will remain persistent till an option is selected or selected option is cleared
this is help text
this is help text
this is help text
Floating label
There is an error with your card selection
this is help text
this is help text
this is help text
Persistent search
this is help text
.form-row
  .col-24.col-md-8
    .form-group
      =label_tag 'super_select_without_placeholder' do
        ='Super select'
        %strong='without placeholder'
        .small.text-muted='first option is preselected by default'
      =select_tag 'super_select_without_placeholder', options_for_select([ "VISA", "MasterCard" ]), data: {toggle: 'super-select'}, class: 'form-control'
      .form-text.small.text-muted='this is help text'
  .col-24.col-md-8
    .form-group
      =label_tag 'super_select_with_placeholder' do
        ='Super select'
        %strong='with placeholder'
        .small.text-muted='without preselected option'
      =select_tag 'super_select_with_placeholder', options_for_select([ "VISA", "MasterCard" ]), include_blank: true, data: {toggle: 'super-select', placeholder: 'Please select a card'}, class: 'form-control'
      .form-text.small.text-muted='this is help text'
  .col-24.col-md-8
    .form-group
      =label_tag 'super_select_with_placeholder_with_search' do
        ='Super select'
        %strong='with search'
        .small.text-muted='more than 10 options'
      =select_tag 'super_select_with_placeholder_with_search', options_for_select(card_options), include_blank: true, data: {toggle: 'super-select', placeholder: 'Please select a card'}, class: 'form-control'
      .form-text.small.text-muted='this is help text'

%h5='Floating label'
.form-row
  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =select_tag 'invalid_super_select_with_groups_and_with_placeholder_and_floating_label', options_for_select(card_options, 'American express'), include_blank: true, data: {toggle: 'super-select', placeholder: 'Please select a card'}, class: 'form-control is-invalid'
      =label_tag 'invalid_super_select_with_groups_and_with_placeholder_and_floating_label' do
        ='Invalid state (Amex preselected)'
      .invalid-feedback='There is an error with your card selection'
      .form-text.small.text-muted='this is help text'
  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =select_tag 'super_select_with_groups_and_with_placeholder_and_floating_label_and_dropdown-right', options_for_select(card_options, 'American express'), include_blank: true, data: {toggle: 'super-select', placeholder: 'Please select a card'}, class: 'form-control dropdown-right'
      =label_tag 'super_select_with_groups_and_with_placeholder_and_floating_label_and_dropdown-right' do
        ='Dropdown right (Amex preselected)'
      .form-text.small.text-muted='this is help text'
  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =select_tag 'super_select_with_groups_and_with_placeholder_and_floating_label_and_dropdown-above', options_for_select(card_options, 'American express'), include_blank: true, data: {toggle: 'super-select', placeholder: 'Please select a card', 'dropdown-position': 'above'}, class: 'form-control'
      =label_tag 'super_select_with_groups_and_with_placeholder_and_floating_label_and_dropdown-above' do
        ='Dropdown above (Amex preselected)'
      .form-text.small.text-muted='this is help text'

%h5='Persistent search'
.form-row
  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =select_tag 'super_select_with_placeholder_with_persistent_search', options_for_select(card_options), include_blank: true, data: {toggle: 'super-select', placeholder: 'Please select a card', 'persistent-search': true}, class: 'form-control'
      =label_tag 'super_select_with_placeholder_with_persistent_search' do
        ='Super select'
        %strong='with persistent search'
      .form-text.small.text-muted='this is help text'

Hidden selection

When super select is wrapped in .hidden-selection it will not show selected result and instead wil show three horizontal dots

this is help text
.form-row
  .col-24.col-md-8
    .form-group
      =label_tag 'super_select_with_hidden_selection' do
        ='Super select'
        %strong='with hidden selection'
        .small.text-muted='selection will not be visible and be replaced by 3 horizontal dots'
      .hidden-selection=select_tag 'super_select_hidden_selection', options_for_select([ "VISA", "MasterCard" ]), data: {toggle: 'super-select'}, class: 'form-control'
      .form-text.small.text-muted='this is help text'

Groups

You can use grouped options, the group header can be sticky by setting {'data-groups': 'sticky'}

Search matcher
Local search matcher (non ajax) will not try to match search to groups title
Super select with groups
You must select an anime character
this is help text
You must select an anime character
this is help text
You must select an anime character
this is help text
%h5='Super select with groups'
.form-row
  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =select_tag 'super_select_with_normal_groups', grouped_options_for_select(anima_grouped_options), include_blank: true, data: {toggle: 'super-select', placeholder: 'Please select an anime character'}, class: 'form-control is-invalid'
      =label_tag 'super_select_with_normal_groups' do
        ='Normal'
      .invalid-feedback='You must select an anime character'
      .form-text.small.text-muted='this is help text'
  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =select_tag 'super_select_with_sticky_groups', grouped_options_for_select(anima_grouped_options), include_blank: true, data: {toggle: 'super-select', placeholder: 'Please select an anime character', groups: 'sticky'}, class: 'form-control is-invalid'
      =label_tag 'super_select_with_sticky_groups' do
        ='Sticky'
      .invalid-feedback='You must select an anime character'
      .form-text.small.text-muted='this is help text'
  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =select_tag 'super_select_with_sticky_groups_and_multiple', grouped_options_for_select(anima_grouped_options), include_blank: true, data: {toggle: 'super-select', placeholder: 'Please select an anime character', groups: 'sticky'}, class: 'form-control is-invalid', multiple: true
      =label_tag 'super_select_with_sticky_groups_and_multiple' do
        ='Sticky & Multiple'
      .invalid-feedback='You must select an anime character'
      .form-text.small.text-muted='this is help text'

Multiple options

To make the super select multiple you need to add {multiple: true}

Super select with multiple options
You must select a card
this is help text
You must select a card
this is help text
You must select an anime character
this is help text
%h5='Super select with multiple options'
.form-row
  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =select_tag 'super_select_with_multiple_options_preselected_option', options_for_select(card_options, 'American express'), data: {toggle: 'super-select', placeholder: 'Please select an anime character'}, class: 'form-control is-invalid', multiple: true
      =label_tag 'super_select_with_multiple_options_preselected_option' do
        ='Amex preselected'
      .invalid-feedback='You must select a card'
      .form-text.small.text-muted='this is help text'

  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =select_tag 'super_select_with_multiple_options_preselected_options', options_for_select(card_options, ['American express', 'Diners']), data: {toggle: 'super-select', placeholder: 'Please select an anime character'}, class: 'form-control is-invalid', multiple: true
      =label_tag 'super_select_with_multiple_options_preselected_options' do
        ='Amex & Diners preselected'
      .invalid-feedback='You must select a card'
      .form-text.small.text-muted='this is help text'

  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =select_tag 'super_select_with_multiple_options', grouped_options_for_select(anima_grouped_options), include_blank: true, data: {toggle: 'super-select', placeholder: 'Please select an anime character', groups: 'sticky'}, class: 'form-control is-invalid', multiple: true
      =label_tag 'super_select_with_multiple_options' do
        ='No preselected option & Sticky groups'
      .invalid-feedback='You must select an anime character'
      .form-text.small.text-muted='this is help text'

Custom content

You can use custom html template result (results inside dropdown) & template selection (what will appear inside the select).

  • You can achieve this using a function which will be passed to the select2 options (templateSelection: customTemplateSelection, templateResult: customTemplateResult)
  • another option is by placing data-custom-template and optionally data-custom-selection on each option, on optgroup you can place data-custom-template (cause it can't be selected so there is no point in data-custom-selection) * Please note, if you are not using data-custom-selection it will take data-custom-template as if it was data-custom-selection
  • custom result templates in multi select selections are not likely to look good with html rich templates and is is suggested to override them with plain text selection templates

Difference between custom template & selection
In theory you can implement different appearance for the template and selection (and this is demonstrated here) but in practice there is no use case for that (yet)
Super select with custom template & selection
You must select a card
this is help text
You must select a card
this is help text
You must select an anime character
this is help text
Super select with custom HTML
You must select a card
this is help text
You must select a card
this is help text
You must select an anime character
this is help text
%h5='Super select with custom template & selection'
.form-row
  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =select_tag 'super_select_with_custom_template_no_placeholder', grouped_options_for_select(anima_grouped_options, "itachi_uchiha"), class: 'form-control is-invalid'
      =label_tag 'super_select_with_custom_template_no_placeholder' do
        ='Custom template no placeholder'
      .invalid-feedback='You must select a card'
      .form-text.small.text-muted='this is help text'

  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =select_tag 'super_select_with_custom_template_and_placeholder', grouped_options_for_select(anima_grouped_options), data: {placeholder: 'Please select an anime character'}, include_blank: true, class: 'form-control is-invalid'
      =label_tag 'super_select_with_custom_template_and_placeholder' do
        ='Custom template with placeholder'
      .invalid-feedback='You must select a card'
      .form-text.small.text-muted='this is help text'

  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =select_tag 'super_select_with_multiple_options_with_custom_template', grouped_options_for_select(anima_grouped_options, ["naruto_uzumaki", "sasuke_uchiha"]), data: {placeholder: 'Please select an anime character', groups: 'sticky'}, class: 'form-control is-invalid', multiple: true
      =label_tag 'super_select_with_multiple_options_with_custom_template' do
        ='Custom template & Multiple select'
      .invalid-feedback='You must select an anime character'
      .form-text.small.text-muted='this is help text'

:javascript
  $(()=>{

    let customTemplateSelection = (state)=>{
      let $group = $(state.element.parentElement),
      clanUrl = "https://static.wikia.nocookie.net/naruto/images/" + $group.data('image-path'),
      url = "https://static.wikia.nocookie.net/naruto/images/" + $(state.element).data('image-path'),
      $content = $('<div class="d-flex align-items-center"></div>').append($('<div class="anime-char-image mr-2 flex-shrink-0" style="background-image: url(' + url + ')"/><div class="flex-grow-1">' + state.text + ' ' + $group[0].label + '</div><div class="anime-char-image ml-2 flex-shrink-0" style="background-image: url(' + clanUrl + ')"/>'));
      return $content;
    };

    let customTemplateResult = (state)=>{
      let url = "https://static.wikia.nocookie.net/naruto/images/" + $(state.element).data('image-path'),
          $content = $('<div class="d-flex align-items-center"></div>').append($('<div class="anime-char-image mr-2 flex-shrink-0" style="background-image: url(' + url + ')"/>')).append(state.text);
      return $content;
    };

    $('#super_select_with_custom_template_no_placeholder, #super_select_with_custom_template_and_placeholder').superSelect({
      templateSelection: customTemplateSelection,
      templateResult: customTemplateResult,
    });

    $('#super_select_with_multiple_options_with_custom_template').superSelect({
      templateResult: customTemplateResult,
    });
  });

-anime_grouped_options_renderer = Proc.new do |selected, with_custom_selection|
  -anima_grouped_options.each do |clan, members|
    -optgroup_template = capture do
      .d-flex.align-items-center.small
        .anime-char-image.mr-2.flex-shrink-0{style: "background-image: url(https://static.wikia.nocookie.net/naruto/images/#{clan[:'data-image-path']})"}
        =clan[:label]
    %optgroup{data: {custom: {template: optgroup_template}}}
      =clan[:label]
      -members.each do |member|
        -opt_template = capture do
          .d-flex.align-items-center
            .anime-char-image.mr-2.flex-shrink-0{style: "background-image: url(https://static.wikia.nocookie.net/naruto/images/#{member[2][:'data-image-path']})"}
            =member[0]
        -custom_opts = {template: opt_template}
        -if with_custom_selection
          -opt_selection = capture do
            .d-flex.align-items-center
              .anime-char-image.mr-2.flex-shrink-0{style: "background-image: url(https://static.wikia.nocookie.net/naruto/images/#{member[2][:'data-image-path']})"}
              .flex-grow-1="#{member[0]} #{clan[:label]}"
              .anime-char-image.ml-2.flex-shrink-0{style: "background-image: url(https://static.wikia.nocookie.net/naruto/images/#{clan[:'data-image-path']})"}
          -custom_opts[:selection] = opt_selection

        %option{value: member[1], data: {custom: custom_opts}, selected: selected.include?(member[1])}=member[0]

%h5='Super select with custom HTML'
.form-row
  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =content_tag :select, id: 'super_select_with_custom_html_no_placeholder', name: 'super_select_with_custom_html_no_placeholder', data: {toggle: 'super-select'}, class: 'form-control is-invalid' do
        =capture ['itachi_uchiha'], true, &anime_grouped_options_renderer
      =label_tag 'super_select_with_custom_html_no_placeholder' do
        ='Custom template no placeholder'
      .invalid-feedback='You must select a card'
      .form-text.small.text-muted='this is help text'

  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =content_tag :select, id: 'super_select_with_custom_html_and_placeholder', name: 'super_select_with_custom_html_and_placeholder', data: {toggle: 'super-select', placeholder: 'Please select an anime character'}, class: 'form-control is-invalid' do
        %option
        =capture [], true, &anime_grouped_options_renderer

      =label_tag 'super_select_with_custom_html_and_placeholder' do
        ='Custom template with placeholder'
      .invalid-feedback='You must select a card'
      .form-text.small.text-muted='this is help text'

  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =content_tag :select, id: 'super_select_with_multiple_options_with_custom_html', name: 'super_select_with_multiple_options_with_custom_html', data: {toggle: 'super-select', placeholder: 'Please select an anime character', groups: 'sticky'}, class: 'form-control is-invalid', multiple: true do
        =capture ["naruto_uzumaki", "sasuke_uchiha"], false, &anime_grouped_options_renderer
      =label_tag 'super_select_with_multiple_options_with_custom_html' do
        ='Custom template & Multiple select'
      .invalid-feedback='You must select an anime character'
      .form-text.small.text-muted='this is help text'

Remote content

Super select can get content from the server via ajax.

  • you can use - {'data-ajax': {url: xxx_path(format: :json)}} to support remote content
  • the server will need to reply with a json in this structure {total: 30, content: 'xxx'} when 'xxx' is the html content of the select you would place in a local select.
  • You can also init the select with local options which will become the "suggestions"
  • you can use - {'data-exclude-from-suggestions': true} on an option / optgroup to set preselected value that will not appear as a suggestion.
    * note you can also add this option as a separate suggestion and it will be highlighted
  • When using persistent search each time the dropdown is opened and a search query is active a new ajax request will be issued to the server and the options will be fresh

Placeholder
When using an ajax super select there is no need for a blank first option so don't use something like include_blank: true
You must select a card
this is help text
You must select a card
this is help text
You must select an anime character
this is help text
Persistent search
You must select a card
this is help text
You must select a card
this is help text
You must select an anime character
this is help text
Pre selected option with / without suggestions
You must select a card
this is help text
You must select a card
this is help text
You must select a card
this is help text
-anima_grouped_options_renderer = Proc.new do |selected, with_custom_selection|
  -anima_grouped_options.each do |clan, members|
    -optgroup_template = capture do
      .d-flex.align-items-center.small
        .anime-char-image.mr-2.flex-shrink-0{style: "background-image: url(https://static.wikia.nocookie.net/naruto/images/#{clan[:'data-image-path']})"}
        =clan[:label]
    %optgroup{data: {custom: {template: optgroup_template}}}
      =clan[:label]
      -members.each do |member|
        -opt_template = capture do
          .d-flex.align-items-center
            .anime-char-image.mr-2.flex-shrink-0{style: "background-image: url(https://static.wikia.nocookie.net/naruto/images/#{member[2][:'data-image-path']})"}
            =member[0]
        -custom_opts = {template: opt_template}
        -if with_custom_selection
          -opt_selection = capture do
            .d-flex.align-items-center
              .anime-char-image.mr-2.flex-shrink-0{style: "background-image: url(https://static.wikia.nocookie.net/naruto/images/#{member[2][:'data-image-path']})"}
              .flex-grow-1="#{member[0]} #{clan[:label]}"
              .anime-char-image.ml-2.flex-shrink-0{style: "background-image: url(https://static.wikia.nocookie.net/naruto/images/#{clan[:'data-image-path']})"}
          -custom_opts[:selection] = opt_selection
        %option{value: member[1], data: {custom: custom_opts}, selected: selected.include?(member[1])}=member[0]


.form-row
  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =content_tag :select, id: 'super_select_with_custom_html_no_placeholder_and_remote_content', name: 'super_select_with_custom_html_no_placeholder_and_remote_content',
                   data: {toggle: 'super-select', ajax: {url: remote_content_components_super_select_path(format: :json)}, 'suggestions-description': 'Displaying anime with "a"'},
                   class: 'form-control is-invalid' do
        =capture ['itachi_uchiha'], true, &anima_grouped_options_renderer
      =label_tag 'super_select_with_custom_html_no_placeholder_and_remote_content' do
        ='Custom template no placeholder'
      .invalid-feedback='You must select a card'
      .form-text.small.text-muted='this is help text'

  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =content_tag :select, id: 'super_select_with_custom_html_and_placeholder_and_remote_content', name: 'super_select_with_custom_html_and_placeholder_and_remote_content',
                   data: {toggle: 'super-select', placeholder: 'Please select an anime character', ajax: {url: remote_content_components_super_select_path(format: :json)}, 'suggestions-description': 'Displaying anime with "a"'},
                   class: 'form-control is-invalid' do
        =capture [], true, &anima_grouped_options_renderer

      =label_tag 'super_select_with_custom_html_and_placeholder_and_remote_content' do
        ='Custom template with placeholder'
      .invalid-feedback='You must select a card'
      .form-text.small.text-muted='this is help text'

  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =content_tag :select, id: 'super_select_with_multiple_options_with_custom_html_and_remote_content', name: 'super_select_with_multiple_options_with_custom_html_and_remote_content',
                   data: {toggle: 'super-select', placeholder: 'Please select an anime character', groups: 'sticky', ajax: {url: remote_content_components_super_select_path(multiple: true, format: :json)}, 'suggestions-description': 'Displaying anime with "a"'},
                   class: 'form-control is-invalid', multiple: true do
        =capture ['naruto_uzumaki', 'sasuke_uchiha'], false, &anima_grouped_options_renderer
      =label_tag 'super_select_with_multiple_options_with_custom_html_and_remote_content' do
        ='Custom template & Multiple select'
      .invalid-feedback='You must select an anime character'
      .form-text.small.text-muted='this is help text'

%h5='Persistent search'
.form-row
  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =content_tag :select, id: 'super_select_with_custom_html_no_placeholder_and_remote_content_and_persistent_search', name: 'super_select_with_custom_html_no_placeholder_and_remote_content_and_persistent_search',
                   data: {toggle: 'super-select', placeholder: 'Please select an anime character', 'persistent-search': true, ajax: {url: remote_content_components_super_select_path(format: :json)}, 'suggestions-description': 'Displaying anime with "a"'},
                   class: 'form-control is-invalid' do
        =capture ['itachi_uchiha'], true, &anima_grouped_options_renderer
      =label_tag 'super_select_with_custom_html_no_placeholder_and_remote_content_and_persistent_search' do
        ='Custom template no placeholder'
      .invalid-feedback='You must select a card'
      .form-text.small.text-muted='this is help text'

  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =content_tag :select, id: 'super_select_with_custom_html_and_placeholder_and_remote_content_and_persistent_search', name: 'super_select_with_custom_html_and_placeholder_and_remote_content_and_persistent_search',
                   data: {toggle: 'super-select', placeholder: 'Please select an anime character', 'persistent-search': true, ajax: {url: remote_content_components_super_select_path(format: :json)}, 'suggestions-description': 'Displaying anime with "a"'},
                   class: 'form-control is-invalid' do
        =capture [], true, &anima_grouped_options_renderer

      =label_tag 'super_select_with_custom_html_and_placeholder_and_remote_content_and_persistent_search' do
        ='Custom template with placeholder'
      .invalid-feedback='You must select a card'
      .form-text.small.text-muted='this is help text'

  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =content_tag :select, id: 'super_select_with_multiple_options_with_custom_html_and_remote_content_and_persistent_search', name: 'super_select_with_multiple_options_with_custom_html_and_remote_content_and_persistent_search',
                   data: {toggle: 'super-select', placeholder: 'Please select an anime character', 'persistent-search': true, groups: 'sticky', ajax: {url: remote_content_components_super_select_path(multiple: true, format: :json)}, 'suggestions-description': 'Displaying anime with "a"'},
                   class: 'form-control is-invalid', multiple: true do
        =capture ['naruto_uzumaki', 'sasuke_uchiha'], false, &anima_grouped_options_renderer
      =label_tag 'super_select_with_multiple_options_with_custom_html_and_remote_content_and_persistent_search' do
        ='Custom template & Multiple select'
      .invalid-feedback='You must select an anime character'
      .form-text.small.text-muted='this is help text'


%h5='Pre selected option with / without suggestions'
.form-row
  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =content_tag :select, id: 'super_select_with_placeholder_and_remote_content_no_suggestions_with_preselected_value', name: 'super_select_with_placeholder_and_remote_content_no_suggestions_with_preselected_value',
                   data: {toggle: 'super-select', placeholder: 'Please select an anime character', ajax: {url: remote_content_components_super_select_path(format: :json)}},
                   class: 'form-control is-invalid' do
        %option{'data-exclude-from-suggestions': true, selected: 'true', value: "itachi_uchiha", 'data-custom_template': "
Itachi
"}='Itachi Uchiha'
      =label_tag 'super_select_with_placeholder_and_remote_content_no_suggestions_with_preselected_value' do
        ='Without suggestions and preselected value'
      .invalid-feedback='You must select a card'
      .form-text.small.text-muted='this is help text'

  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =content_tag :select, id: 'super_select_with_placeholder_and_remote_content_with_suggestions_with_preselected_value', name: 'super_select_with_placeholder_and_remote_content_with_suggestions_with_preselected_value',
                   data: {toggle: 'super-select', placeholder: 'Please select an anime character', ajax: {url: remote_content_components_super_select_path(format: :json)}, 'suggestions-description': 'Displaying anime with "a"'},
                   class: 'form-control is-invalid' do
        %option{'data-exclude-from-suggestions': true, selected: 'true', value: "itachi_uchiha", 'data-custom_template': "
Itachi
"}='Itachi Uchiha'
        =capture [], true, &anima_grouped_options_renderer
      =label_tag 'super_select_with_placeholder_and_remote_content_with_suggestions_with_preselected_value' do
        ='Suggestions and preselected value'
      .invalid-feedback='You must select a card'
      .form-text.small.text-muted='this is help text'

  .col-24.col-md-8
    .form-group.floating-label.floating-label-fixed
      =content_tag :select, id: 'super_select_with_placeholder_and_remote_content_with_partial_suggestions_with_preselected_value', name: 'super_select_with_placeholder_and_remote_content_with_partial_suggestions_with_preselected_value',
                   data: {toggle: 'super-select', placeholder: 'Please select an anime character', ajax: {url: remote_content_components_super_select_path(format: :json)}, 'suggestions-description': 'Displaying anime with "a"'},
                   class: 'form-control is-invalid' do
        %option{'data-exclude-from-suggestions': true, selected: 'true', value: "boruto_uzumaki",
                'data-custom_template': "
Boruto
",
                'data-custom_selection': "
Boruto Uzumaki
"}
          ='Boruto'
        =capture [], true, &anima_grouped_options_renderer
      =label_tag 'super_select_with_placeholder_and_remote_content_with_partial_suggestions_with_preselected_value' do
        ='Suggestions that dont contain preselected value'
      .invalid-feedback='You must select a card'
      .form-text.small.text-muted='this is help text'

Form content

Super select should behave like a normal select

Null value
When enabling null value through a placeholder the value received on the server side will always be available (even if it's empty)
Use [] in Super Select with multi select
when trying to transfer multiple options to the server rails require you yo place [] in the select id and name
There is an error with your card selection
this is help text
You must select a card
this is help text
You must select an anime character
this is help text
-anima_grouped_options_renderer = Proc.new do |selected, with_custom_selection|
  -anima_grouped_options.each do |clan, members|
    -optgroup_template = capture do
      .d-flex.align-items-center.small
        .anime-char-image.mr-2.flex-shrink-0{style: "background-image: url(https://static.wikia.nocookie.net/naruto/images/#{clan[:'data-image-path']})"}
        =clan[:label]
    %optgroup{data: {custom: {template: optgroup_template}}}
      =clan[:label]
      -members.each do |member|
        -opt_template = capture do
          .d-flex.align-items-center
            .anime-char-image.mr-2.flex-shrink-0{style: "background-image: url(https://static.wikia.nocookie.net/naruto/images/#{member[2][:'data-image-path']})"}
            =member[0]
        -custom_opts = {template: opt_template}
        -if with_custom_selection
          -opt_selection = capture do
            .d-flex.align-items-center
              .anime-char-image.mr-2.flex-shrink-0{style: "background-image: url(https://static.wikia.nocookie.net/naruto/images/#{member[2][:'data-image-path']})"}
              .flex-grow-1="#{member[0]} #{clan[:label]}"
              .anime-char-image.ml-2.flex-shrink-0{style: "background-image: url(https://static.wikia.nocookie.net/naruto/images/#{clan[:'data-image-path']})"}
          -custom_opts[:selection] = opt_selection
        %option{value: member[1], data: {custom: custom_opts}, selected: selected.include?(member[1])}=member[0]



.form-row
  =form_tag form_content_components_super_select_path(uid: 'form_invalid_super_select_with_groups_and_with_placeholder_and_floating_label'), remote: true, class: 'col-24 col-md-8' do
    .form-group.floating-label.floating-label-fixed
      =select_tag 'form_invalid_super_select_with_groups_and_with_placeholder_and_floating_label', options_for_select(card_options, 'American express'), include_blank: true, data: {toggle: 'super-select', placeholder: 'Please select a card'}, class: 'form-control is-invalid'
      =label_tag 'form_invalid_super_select_with_groups_and_with_placeholder_and_floating_label' do
        ='Invalid state (Amex preselected)'
      .invalid-feedback='There is an error with your card selection'
      .form-text.small.text-muted='this is help text'
    =submit_tag 'submit', class: 'btn btn-light'

  =form_tag form_content_components_super_select_path(uid: 'form_super_select_with_placeholder_and_remote_content_with_suggestions_with_preselected_value'), remote: true, class: 'col-24 col-md-8' do
    .form-group.floating-label.floating-label-fixed
      =content_tag :select, id: 'form_super_select_with_placeholder_and_remote_content_with_suggestions_with_preselected_value', name: 'form_super_select_with_placeholder_and_remote_content_with_suggestions_with_preselected_value',
                   data: {toggle: 'super-select', placeholder: 'Please select an anime character', ajax: {url: remote_content_components_super_select_path(format: :json)}, 'suggestions-description': 'Displaying anime with "a"'},
                   class: 'form-control is-invalid' do
        %option{'data-exclude-from-suggestions': true, selected: 'true', value: "itachi_uchiha", 'data-custom_template': "
Itachi
"}='Itachi Uchiha'
        =capture [], true, &anima_grouped_options_renderer
      =label_tag 'form_super_select_with_placeholder_and_remote_content_with_suggestions_with_preselected_value' do
        ='Suggestions and preselected value'
      .invalid-feedback='You must select a card'
      .form-text.small.text-muted='this is help text'
    =submit_tag 'submit', class: 'btn btn-light'

  =form_tag form_content_components_super_select_path(uid: 'form_super_select_with_multiple_options_with_custom_html_and_remote_content'), remote: true, class: 'col-24 col-md-8' do
    .form-group.floating-label.floating-label-fixed
      =content_tag :select, id: 'form_super_select_with_multiple_options_with_custom_html_and_remote_content[]', name: 'form_super_select_with_multiple_options_with_custom_html_and_remote_content[]',
                   data: {toggle: 'super-select', placeholder: 'Please select an anime character', groups: 'sticky', ajax: {url: remote_content_components_super_select_path(multiple: true, format: :json)}, 'suggestions-description': 'Displaying anime with "a"'},
                   class: 'form-control is-invalid', multiple: true do
        =capture ['naruto_uzumaki', 'sasuke_uchiha'], false, &anima_grouped_options_renderer
      =label_tag 'form_super_select_with_multiple_options_with_custom_html_and_remote_content[]' do
        ='Custom template & Multiple select'
      .invalid-feedback='You must select an anime character'
      .form-text.small.text-muted='this is help text'
    =submit_tag 'submit', class: 'btn btn-light'

Super select will work inside modals, you can also press escape key when super select is open and it will close the dropdown and not the modal. 

=button_tag 'modal with super select', class: 'btn btn-light', 'data-toggle': "modal", 'data-target': "#super-select-modal", type: 'button'

.modal#super-select-modal{tabindex: '-1'}
  .modal-dialog
    %form.modal-content
      .modal-header
        %h5.modal-title='Modal with super date field'
        =button_tag class: 'close', 'data-dismiss': 'modal', type: 'button' do
          %span ×
      .modal-body
        .form-row
          .col-24
            .form-group.floating-label.floating-label-fixed
              =select_tag 'super_select_with_normal_groups_in_modal', grouped_options_for_select(anima_grouped_options), include_blank: true, data: {toggle: 'super-select', placeholder: 'Please select an anime character'}, class: 'form-control is-invalid'
              =label_tag 'super_select_with_normal_groups_in_modal' do
                ='Normal'
              .invalid-feedback='You must select an anime character'
              .form-text.small.text-muted='this is help text'
          .col-24
            .form-group.floating-label.floating-label-fixed
              =select_tag 'super_select_with_sticky_groups_in_modal', grouped_options_for_select(anima_grouped_options), include_blank: true, data: {toggle: 'super-select', placeholder: 'Please select an anime character', groups: 'sticky'}, class: 'form-control is-invalid'
              =label_tag 'super_select_with_sticky_groups_in_modal' do
                ='Sticky'
              .invalid-feedback='You must select an anime character'
              .form-text.small.text-muted='this is help text'
          .col-24
            .form-group.floating-label.floating-label-fixed
              =select_tag 'super_select_with_sticky_groups_and_multiple_in_modal', grouped_options_for_select(anima_grouped_options), include_blank: true, data: {toggle: 'super-select', placeholder: 'Please select an anime character', groups: 'sticky'}, class: 'form-control is-invalid', multiple: true
              =label_tag 'super_select_with_sticky_groups_and_multiple_in_modal' do
                ='Sticky & Multiple'
              .invalid-feedback='You must select an anime character'
              .form-text.small.text-muted='this is help text'



      .modal-footer
        =button_tag 'close', type: 'button', class: 'btn-block btn btn-light', 'data-dismiss': "modal"

Input group

Super select also supports input group

there is an error
this is help text
there is an error
this is help text
.form-row
  .col-24.col-md-12
    .form-group
      .input-group.is-invalid.floating-label
        .input-group-prepend
          =button_tag 'asd', type: 'button', class: 'btn btn-light'
        .input-group-main
          =text_field_tag 'super-date-field-floating-label-no-today-in-input-group', nil, class: 'form-control', placeholder: true,
                          data: {toggle: 'super-date-field', 'clear-button': t('application.clear')}
          =label_tag 'super-date-field-floating-label-no-today-in-input-group', 'date (__/__/____)'
        .input-group-append
          .hidden-selection=select_tag 'super_select_hidden_selection_in_input_group', options_for_select([ "VISA", "MasterCard" ]), data: {toggle: 'super-select'}, class: 'form-control'
      .invalid-feedback='there is an error'
      .form-text.small.text-muted='this is help text'

  .col-24.col-md-12
    .form-group
      .input-group.is-invalid.floating-label
        .input-group-prepend
          =button_tag 'asd', type: 'button', class: 'btn btn-light'
        .input-group-main
          =select_tag 'super_select_in_input_group', options_for_select([ "VISA", "MasterCard" ]), data: {toggle: 'super-select'}, class: 'form-control'
          =label_tag 'super_select_in_input_group', 'super select in input group'
        .input-group-append
          =select_tag 'super_select_in_input_group_append', options_for_select([ "VISA", "MasterCard" ]), data: {toggle: 'super-select'}, class: 'form-control'
      .invalid-feedback='there is an error'
      .form-text.small.text-muted='this is help text'
On this page