Form Select
Default Select
Use <select>
attribute with numerous options to show value with choice's option.
HTML Preview
<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.
HTML Preview
<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.
HTML Preview
<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.