Example 1 - Select with placeholder
$form = new Form('plugins-select2-form-1', 'horizontal');
$form->addOption('position-applying-for-s2', '', '');
$form->addOption('position-applying-for-s2', 'Interface Designer', 'Interface Designer');
$form->addOption('position-applying-for-s2', 'Software Engineer', 'Software Engineer');
$form->addOption('position-applying-for-s2', 'System Administrator', 'System Administrator');
$form->addOption('position-applying-for-s2', 'Office Manager', 'Office Manager');
$form->addSelect('position-applying-for-s2', 'Which position are you applying for ?', 'class=select2, data-placeholder=Choose one ..., required');<div class="row">
<label for="position-applying-for-s2" class="col-sm-4 col-form-label">Which position are you applying for ? <sup class="text-danger">* </sup></label>
<div class="col-sm-8 mb-3">
<select id="position-applying-for-s2" name="position-applying-for-s2" class="select2 form-select" data-placeholder="Choose one ..." required>
<option value="" ></option>
<option value="Interface Designer" >Interface Designer</option>
<option value="Software Engineer" >Software Engineer</option>
<option value="System Administrator" >System Administrator</option>
<option value="Office Manager" >Office Manager</option>
</select>
</div>
</div>Example 2 - Select multiple with icons
$form = new Form('plugins-select2-form-2', 'horizontal');
$form->addOption('product-choice-s2[]', 'Computers', 'Computers', '', 'data-icon=bi bi-pc-display me-2');
$form->addOption('product-choice-s2[]', 'Games', 'Games', '', 'data-icon=bi bi-controller me-2');
$form->addOption('product-choice-s2[]', 'Books', 'Books', '', 'selected, data-icon=bi bi-book me-2');
$form->addOption('product-choice-s2[]', 'Music', 'Music', '', 'selected, data-icon=bi bi-headphones me-2');
$form->addOption('product-choice-s2[]', 'Photos', 'Photos', '', 'data-icon=bi bi-camera-fill me-2');
$form->addOption('product-choice-s2[]', 'Films', 'Films', '', 'data-icon=bi bi-camera-reels-fill me-2');
$form->addHelper('(multiple choices)', 'product-choice-s2[]');
$form->addSelect('product-choice-s2[]', 'What products are you interested in ?', 'class=select2, multiple, required');<div class="row">
<label for="product-choice-s2[]" class="col-sm-4 col-form-label">What products are you interested in ? <sup class="text-danger">* </sup></label>
<div class="col-sm-8 mb-3">
<select id="product-choice-s2[]" name="product-choice-s2[]" class="select2 form-select" multiple required>
<option value="Computers" data-icon="bi bi-pc-display me-2">Computers</option>
<option value="Games" data-icon="bi bi-controller me-2">Games</option>
<option value="Books" selected data-icon="bi bi-book me-2">Books</option>
<option value="Music" selected data-icon="bi bi-headphones me-2">Music</option>
<option value="Photos" data-icon="bi bi-camera-fill me-2">Photos</option>
<option value="Films" data-icon="bi bi-camera-reels-fill me-2">Films</option>
</select>
<span class="form-text" id="product-choice-s2[]-helper">(multiple choices)</span>
</div>
</div>Example 3 - Select with option groups & options built with custom html
Note that the equal sign and single quotes are all escaped with a backslash in the options html content
$form->addOption('bg-color', 'primary', 'Primary', 'Blue', 'data-content=<span class\=\'d-inline-block h-100 me-2 bg-primary\' style\=\'width:40px;\'> </span>');
$form->addOption('bg-color', 'info', 'Info', 'Blue', 'data-content=<span class\=\'d-inline-block h-100 me-2 bg-info\' style\=\'width:40px;\'> </span>');
$form->addOption('bg-color', 'secondary', 'Secondary', 'Grey', 'data-content=<span class\=\'d-inline-block h-100 me-2 bg-secondary\' style\=\'width:40px;\'> </span>');
$form->addOption('bg-color', 'light', 'Light', 'Grey', 'data-content=<span class\=\'d-inline-block h-100 me-2 bg-light\' style\=\'width:40px;\'> </span>');
$form->addOption('bg-color', 'warning', 'Warning', 'Others', 'data-content=<span class\=\'d-inline-block h-100 me-2 bg-warning\' style\=\'width:40px;\'> </span>');
$form->addOption('bg-color', 'danger', 'Danger', 'Others', 'data-content=<span class\=\'d-inline-block h-100 me-2 bg-danger\' style\=\'width:40px;\'> </span>');
$form->addSelect('bg-color', 'Background color', 'class=select2');<div class="bs5-form-stacked-element mb-3">
<label for="bg-color" class="form-label">Background color</label>
<select id="bg-color" name="bg-color" class="select2 form-select">
<optgroup label="Blue">
<option value="primary" data-content="<span class='d-inline-block h-100 me-2 bg-primary' style='width:40px;'> </span>">Primary</option>
<option value="info" data-content="<span class='d-inline-block h-100 me-2 bg-info' style='width:40px;'> </span>">Info</option>
</optgroup>
<optgroup label="Grey">
<option value="secondary" data-content="<span class='d-inline-block h-100 me-2 bg-secondary' style='width:40px;'> </span>">Secondary</option>
<option value="light" data-content="<span class='d-inline-block h-100 me-2 bg-light' style='width:40px;'> </span>">Light</option>
</optgroup>
<optgroup label="Others">
<option value="warning" data-content="<span class='d-inline-block h-100 me-2 bg-warning' style='width:40px;'> </span>">Warning</option>
<option value="danger" data-content="<span class='d-inline-block h-100 me-2 bg-danger' style='width:40px;'> </span>">Danger</option>
</optgroup>
</select>
</div>Example 4 - Select multiple tags, dynamic option creation, maximum limit & custom language for messages
$form = new Form('plugins-select2-form-4', 'horizontal');
$form->addOption('favorite-animals-s2[]', 'Cat', 'Cat');
$form->addOption('favorite-animals-s2[]', 'Dog', 'Dog');
$form->addOption('favorite-animals-s2[]', 'Lion', 'Lion');
$form->addOption('favorite-animals-s2[]', 'Rabbit', 'Rabbit');
$form->addOption('favorite-animals-s2[]', 'Mosquito', 'Mosquito');
$form->addHelper('3 animals max., type in the field to add your custom ones', 'favorite-animals-s2[]');
$form->addSelect('favorite-animals-s2[]', 'Choose your favorite animals', 'class=select2, data-tags=true, data-maximum-selection-length=3, data-close-on-select=true, data-language=es, multiple, required');<div class="row">
<label for="favorite-animals-s2[]" class="col-sm-4 col-form-label">Choose your favorite animals <sup class="text-danger">* </sup></label>
<div class="col-sm-8 mb-3">
<select id="favorite-animals-s2[]" name="favorite-animals-s2[]" class="select2 form-select" data-tags="true" data-maximum-selection-length="3" data-close-on-select="true" data-language="es" multiple required>
<option value="Cat" >Cat</option>
<option value="Dog" >Dog</option>
<option value="Lion" >Lion</option>
<option value="Rabbit" >Rabbit</option>
<option value="Mosquito" >Mosquito</option>
</select>
<span class="form-text" id="favorite-animals-s2[]-helper">3 animals max., type in the field to add your custom ones</span>
</div>
</div>Example 5 - Select Country
uses theaddCountrySelect() function$form = new Form('plugins-select2-form-5', 'horizontal');
$options = array(
'plugin' => 'select2',
'lang' => 'en',
'flags' => true,
'flag_size' => 32,
'return_value' => 'code',
);
$form->addCountrySelect('country-select2', 'country: ', 'title=Select a country', $options);<div class="row">
<label for="country-select2" class="col-sm-4 col-form-label">country: </label>
<div class="col-sm-8 mb-3">
<select name="country-select2" id="country-select2" class="select2country form-control f32" title="Select a country">
<option value="AF" class="flag af" >Afghanistan</option>
<option value="AL" class="flag al" >Albania</option>
<option value="DZ" class="flag dz" >Algeria</option>
<option value="AS" class="flag as" >American Samoa</option>
<option value="AD" class="flag ad" >Andorra</option>
<option value="AO" class="flag ao" >Angola</option>
<option value="AI" class="flag ai" >Anguilla</option>
<option value="AQ" class="flag aq" >Antarctica</option>
<option value="AG" class="flag ag" >Antigua and Barbuda</option>
<option value="AR" class="flag ar" >Argentina</option>
<option value="AM" class="flag am" >Armenia</option>
<option value="AW" class="flag aw" >Aruba</option>
<option value="AU" class="flag au" >Australia</option>
<option value="AT" class="flag at" >Austria</option>
<option value="AZ" class="flag az" >Azerbaijan</option>
<option value="BS" class="flag bs" >Bahamas</option>
<option value="BH" class="flag bh" >Bahrain</option>
<option value="BD" class="flag bd" >Bangladesh</option>
<option value="BB" class="flag bb" >Barbados</option>
<option value="BY" class="flag by" >Belarus</option>
<option value="BE" class="flag be" >Belgium</option>
<option value="BZ" class="flag bz" >Belize</option>
<option value="BJ" class="flag bj" >Benin</option>
<option value="BM" class="flag bm" >Bermuda</option>
<option value="BT" class="flag bt" >Bhutan</option>
<option value="BO" class="flag bo" >Bolivia</option>
<option value="BA" class="flag ba" >Bosnia and Herzegovina</option>
<option value="BW" class="flag bw" >Botswana</option>
<option value="BV" class="flag bv" >Bouvet Island</option>
<option value="BR" class="flag br" >Brazil</option>
<option value="BQ" class="flag bq" >British Antarctic Territory</option>
<option value="IO" class="flag io" >British Indian Ocean Territory</option>
<option value="VG" class="flag vg" >British Virgin Islands</option>
<option value="BN" class="flag bn" >Brunei</option>
<option value="BG" class="flag bg" >Bulgaria</option>
<option value="BF" class="flag bf" >Burkina Faso</option>
<option value="BI" class="flag bi" >Burundi</option>
<option value="KH" class="flag kh" >Cambodia</option>
<option value="CM" class="flag cm" >Cameroon</option>
<option value="CA" class="flag ca" >Canada</option>
<option value="CT" class="flag ct" >Canton and Enderbury Islands</option>
<option value="CV" class="flag cv" >Cape Verde</option>
<option value="KY" class="flag ky" >Cayman Islands</option>
<option value="CF" class="flag cf" >Central African Republic</option>
<option value="TD" class="flag td" >Chad</option>
<option value="CL" class="flag cl" >Chile</option>
<option value="CN" class="flag cn" >China</option>
<option value="CX" class="flag cx" >Christmas Island</option>
<option value="CC" class="flag cc" >Cocos [Keeling] Islands</option>
<option value="CO" class="flag co" >Colombia</option>
<option value="KM" class="flag km" >Comoros</option>
<option value="CG" class="flag cg" >Congo - Brazzaville</option>
<option value="CD" class="flag cd" >Congo - Kinshasa</option>
<option value="CK" class="flag ck" >Cook Islands</option>
<option value="CR" class="flag cr" >Costa Rica</option>
<option value="HR" class="flag hr" >Croatia</option>
<option value="CU" class="flag cu" >Cuba</option>
<option value="CY" class="flag cy" >Cyprus</option>
<option value="CZ" class="flag cz" >Czech Republic</option>
<option value="CI" class="flag ci" >Côte d’Ivoire</option>
<option value="DK" class="flag dk" >Denmark</option>
<option value="DJ" class="flag dj" >Djibouti</option>
<option value="DM" class="flag dm" >Dominica</option>
<option value="DO" class="flag do" >Dominican Republic</option>
<option value="NQ" class="flag nq" >Dronning Maud Land</option>
<option value="DD" class="flag dd" >East Germany</option>
<option value="EC" class="flag ec" >Ecuador</option>
<option value="EG" class="flag eg" >Egypt</option>
<option value="SV" class="flag sv" >El Salvador</option>
<option value="GQ" class="flag gq" >Equatorial Guinea</option>
<option value="ER" class="flag er" >Eritrea</option>
<option value="EE" class="flag ee" >Estonia</option>
<option value="ET" class="flag et" >Ethiopia</option>
<option value="FK" class="flag fk" >Falkland Islands</option>
<option value="FO" class="flag fo" >Faroe Islands</option>
<option value="FJ" class="flag fj" >Fiji</option>
<option value="FI" class="flag fi" >Finland</option>
<option value="FR" class="flag fr" >France</option>
<option value="GF" class="flag gf" >French Guiana</option>
<option value="PF" class="flag pf" >French Polynesia</option>
<option value="TF" class="flag tf" >French Southern Territories</option>
<option value="FQ" class="flag fq" >French Southern and Antarctic Territories</option>
<option value="GA" class="flag ga" >Gabon</option>
<option value="GM" class="flag gm" >Gambia</option>
<option value="GE" class="flag ge" >Georgia</option>
<option value="DE" class="flag de" >Germany</option>
<option value="GH" class="flag gh" >Ghana</option>
<option value="GI" class="flag gi" >Gibraltar</option>
<option value="GR" class="flag gr" >Greece</option>
<option value="GL" class="flag gl" >Greenland</option>
<option value="GD" class="flag gd" >Grenada</option>
<option value="GP" class="flag gp" >Guadeloupe</option>
<option value="GU" class="flag gu" >Guam</option>
<option value="GT" class="flag gt" >Guatemala</option>
<option value="GG" class="flag gg" >Guernsey</option>
<option value="GN" class="flag gn" >Guinea</option>
<option value="GW" class="flag gw" >Guinea-Bissau</option>
<option value="GY" class="flag gy" >Guyana</option>
<option value="HT" class="flag ht" >Haiti</option>
<option value="HM" class="flag hm" >Heard Island and McDonald Islands</option>
<option value="HN" class="flag hn" >Honduras</option>
<option value="HK" class="flag hk" >Hong Kong SAR China</option>
<option value="HU" class="flag hu" >Hungary</option>
<option value="IS" class="flag is" >Iceland</option>
<option value="IN" class="flag in" >India</option>
<option value="ID" class="flag id" >Indonesia</option>
<option value="IR" class="flag ir" >Iran</option>
<option value="IQ" class="flag iq" >Iraq</option>
<option value="IE" class="flag ie" >Ireland</option>
<option value="IM" class="flag im" >Isle of Man</option>
<option value="IL" class="flag il" >Israel</option>
<option value="IT" class="flag it" >Italy</option>
<option value="JM" class="flag jm" >Jamaica</option>
<option value="JP" class="flag jp" >Japan</option>
<option value="JE" class="flag je" >Jersey</option>
<option value="JT" class="flag jt" >Johnston Island</option>
<option value="JO" class="flag jo" >Jordan</option>
<option value="KZ" class="flag kz" >Kazakhstan</option>
<option value="KE" class="flag ke" >Kenya</option>
<option value="KI" class="flag ki" >Kiribati</option>
<option value="KW" class="flag kw" >Kuwait</option>
<option value="KG" class="flag kg" >Kyrgyzstan</option>
<option value="LA" class="flag la" >Laos</option>
<option value="LV" class="flag lv" >Latvia</option>
<option value="LB" class="flag lb" >Lebanon</option>
<option value="LS" class="flag ls" >Lesotho</option>
<option value="LR" class="flag lr" >Liberia</option>
<option value="LY" class="flag ly" >Libya</option>
<option value="LI" class="flag li" >Liechtenstein</option>
<option value="LT" class="flag lt" >Lithuania</option>
<option value="LU" class="flag lu" >Luxembourg</option>
<option value="MO" class="flag mo" >Macau SAR China</option>
<option value="MK" class="flag mk" >Macedonia</option>
<option value="MG" class="flag mg" >Madagascar</option>
<option value="MW" class="flag mw" >Malawi</option>
<option value="MY" class="flag my" >Malaysia</option>
<option value="MV" class="flag mv" >Maldives</option>
<option value="ML" class="flag ml" >Mali</option>
<option value="MT" class="flag mt" >Malta</option>
<option value="MH" class="flag mh" >Marshall Islands</option>
<option value="MQ" class="flag mq" >Martinique</option>
<option value="MR" class="flag mr" >Mauritania</option>
<option value="MU" class="flag mu" >Mauritius</option>
<option value="YT" class="flag yt" >Mayotte</option>
<option value="FX" class="flag fx" >Metropolitan France</option>
<option value="MX" class="flag mx" >Mexico</option>
<option value="FM" class="flag fm" >Micronesia</option>
<option value="MI" class="flag mi" >Midway Islands</option>
<option value="MD" class="flag md" >Moldova</option>
<option value="MC" class="flag mc" >Monaco</option>
<option value="MN" class="flag mn" >Mongolia</option>
<option value="ME" class="flag me" >Montenegro</option>
<option value="MS" class="flag ms" >Montserrat</option>
<option value="MA" class="flag ma" >Morocco</option>
<option value="MZ" class="flag mz" >Mozambique</option>
<option value="MM" class="flag mm" >Myanmar [Burma]</option>
<option value="NA" class="flag na" >Namibia</option>
<option value="NR" class="flag nr" >Nauru</option>
<option value="NP" class="flag np" >Nepal</option>
<option value="NL" class="flag nl" >Netherlands</option>
<option value="AN" class="flag an" >Netherlands Antilles</option>
<option value="NT" class="flag nt" >Neutral Zone</option>
<option value="NC" class="flag nc" >New Caledonia</option>
<option value="NZ" class="flag nz" >New Zealand</option>
<option value="NI" class="flag ni" >Nicaragua</option>
<option value="NE" class="flag ne" >Niger</option>
<option value="NG" class="flag ng" >Nigeria</option>
<option value="NU" class="flag nu" >Niue</option>
<option value="NF" class="flag nf" >Norfolk Island</option>
<option value="KP" class="flag kp" >North Korea</option>
<option value="VD" class="flag vd" >North Vietnam</option>
<option value="MP" class="flag mp" >Northern Mariana Islands</option>
<option value="NO" class="flag no" >Norway</option>
<option value="OM" class="flag om" >Oman</option>
<option value="PC" class="flag pc" >Pacific Islands Trust Territory</option>
<option value="PK" class="flag pk" >Pakistan</option>
<option value="PW" class="flag pw" >Palau</option>
<option value="PS" class="flag ps" >Palestinian Territories</option>
<option value="PA" class="flag pa" >Panama</option>
<option value="PZ" class="flag pz" >Panama Canal Zone</option>
<option value="PG" class="flag pg" >Papua New Guinea</option>
<option value="PY" class="flag py" >Paraguay</option>
<option value="YD" class="flag yd" >People's Democratic Republic of Yemen</option>
<option value="PE" class="flag pe" >Peru</option>
<option value="PH" class="flag ph" >Philippines</option>
<option value="PN" class="flag pn" >Pitcairn Islands</option>
<option value="PL" class="flag pl" >Poland</option>
<option value="PT" class="flag pt" >Portugal</option>
<option value="PR" class="flag pr" >Puerto Rico</option>
<option value="QA" class="flag qa" >Qatar</option>
<option value="RO" class="flag ro" >Romania</option>
<option value="RU" class="flag ru" >Russia</option>
<option value="RW" class="flag rw" >Rwanda</option>
<option value="RE" class="flag re" >Réunion</option>
<option value="BL" class="flag bl" >Saint Barthélemy</option>
<option value="SH" class="flag sh" >Saint Helena</option>
<option value="KN" class="flag kn" >Saint Kitts and Nevis</option>
<option value="LC" class="flag lc" >Saint Lucia</option>
<option value="MF" class="flag mf" >Saint Martin</option>
<option value="PM" class="flag pm" >Saint Pierre and Miquelon</option>
<option value="VC" class="flag vc" >Saint Vincent and the Grenadines</option>
<option value="WS" class="flag ws" >Samoa</option>
<option value="SM" class="flag sm" >San Marino</option>
<option value="SA" class="flag sa" >Saudi Arabia</option>
<option value="SN" class="flag sn" >Senegal</option>
<option value="RS" class="flag rs" >Serbia</option>
<option value="CS" class="flag cs" >Serbia and Montenegro</option>
<option value="SC" class="flag sc" >Seychelles</option>
<option value="SL" class="flag sl" >Sierra Leone</option>
<option value="SG" class="flag sg" >Singapore</option>
<option value="SK" class="flag sk" >Slovakia</option>
<option value="SI" class="flag si" >Slovenia</option>
<option value="SB" class="flag sb" >Solomon Islands</option>
<option value="SO" class="flag so" >Somalia</option>
<option value="ZA" class="flag za" >South Africa</option>
<option value="GS" class="flag gs" >South Georgia and the South Sandwich Islands</option>
<option value="KR" class="flag kr" >South Korea</option>
<option value="ES" class="flag es" >Spain</option>
<option value="LK" class="flag lk" >Sri Lanka</option>
<option value="SD" class="flag sd" >Sudan</option>
<option value="SR" class="flag sr" >Suriname</option>
<option value="SJ" class="flag sj" >Svalbard and Jan Mayen</option>
<option value="SZ" class="flag sz" >Swaziland</option>
<option value="SE" class="flag se" >Sweden</option>
<option value="CH" class="flag ch" >Switzerland</option>
<option value="SY" class="flag sy" >Syria</option>
<option value="ST" class="flag st" >São Tomé and Príncipe</option>
<option value="TW" class="flag tw" >Taiwan</option>
<option value="TJ" class="flag tj" >Tajikistan</option>
<option value="TZ" class="flag tz" >Tanzania</option>
<option value="TH" class="flag th" >Thailand</option>
<option value="TL" class="flag tl" >Timor-Leste</option>
<option value="TG" class="flag tg" >Togo</option>
<option value="TK" class="flag tk" >Tokelau</option>
<option value="TO" class="flag to" >Tonga</option>
<option value="TT" class="flag tt" >Trinidad and Tobago</option>
<option value="TN" class="flag tn" >Tunisia</option>
<option value="TR" class="flag tr" >Turkey</option>
<option value="TM" class="flag tm" >Turkmenistan</option>
<option value="TC" class="flag tc" >Turks and Caicos Islands</option>
<option value="TV" class="flag tv" >Tuvalu</option>
<option value="UM" class="flag um" >U.S. Minor Outlying Islands</option>
<option value="PU" class="flag pu" >U.S. Miscellaneous Pacific Islands</option>
<option value="VI" class="flag vi" >U.S. Virgin Islands</option>
<option value="UG" class="flag ug" >Uganda</option>
<option value="UA" class="flag ua" >Ukraine</option>
<option value="SU" class="flag su" >Union of Soviet Socialist Republics</option>
<option value="AE" class="flag ae" >United Arab Emirates</option>
<option value="GB" class="flag gb" >United Kingdom</option>
<option value="US" class="flag us" >United States</option>
<option value="ZZ" class="flag zz" >Unknown or Invalid Region</option>
<option value="UY" class="flag uy" >Uruguay</option>
<option value="UZ" class="flag uz" >Uzbekistan</option>
<option value="VU" class="flag vu" >Vanuatu</option>
<option value="VA" class="flag va" >Vatican City</option>
<option value="VE" class="flag ve" >Venezuela</option>
<option value="VN" class="flag vn" >Vietnam</option>
<option value="WK" class="flag wk" >Wake Island</option>
<option value="WF" class="flag wf" >Wallis and Futuna</option>
<option value="EH" class="flag eh" >Western Sahara</option>
<option value="YE" class="flag ye" >Yemen</option>
<option value="ZM" class="flag zm" >Zambia</option>
<option value="ZW" class="flag zw" >Zimbabwe</option>
<option value="AX" class="flag ax" >Åland Islands</option>
</select>
</div>
</div>