Form Select
Default Select
Use <select> attribute with numerous options to show value
with choice's option.
<select class="form-select mb-3" aria-label="Default select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select><select class="form-select rounded-pill mb-3" aria-label="Default select example"> <option selected>Search for services</option> <option value="1">Information Architecture</option> <option value="2">UI/UX Design</option> <option value="3">Back End Development</option> </select><select class="form-select" aria-label="Disabled select example" disabled> <option selected>Open this select menu (Disabled)</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>
Menu Size
Use multiple attribute to select multiple values and
size="your value" attribute to show a number of choice option within a select area.
<select class="form-select" multiple aria-label="multiple select example"> <option selected>Open this select menu (multiple select option)</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select><select class="form-select" size="3" aria-label="size 3 select example"> <option selected>Open this select menu (select menu size)</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> </select>
Select Size
Use form-select-sm class to set small select size and
form-select-lg class to form-select class to
set large select size. No such class is required for default select size.
<select class="form-select form-select-sm mb-3" aria-label=".form-select-sm example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select><select class="form-select mb-3" aria-label=".form-select-lg example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select><select class="form-select form-select-lg" aria-label=".form-select-lg example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>
Choices
Single select input Example
Set data-choices attribute to set a default
single select.
Set data-choices data-choices-groups
attribute to set option group
Set data-choices data-choices-search-false
data-choices-removeItem
Set data-choices data-choices-sorting-false
attribute.
Multiple select input
Set data-choices multiple attribute.
Set data-choices data-choices-removeItem
multiple attribute.
Set data-choices
data-choices-multiple-groups="true" multiple attribute.
Text inputs
Set data-choices data-choices-limit="Required
Limit" data-choices-removeItem
attribute.
Set data-choices
data-choices-text-unique-true attribute.
Set data-choices data-choices-text-disabled-true
attribute.