Form Select

  1. Forms
  2. 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.

© CC Jedi.
Design & Develop by CC Jedi