Form Select | Velzon - Admin & Dashboard Template

#### Are you sure ?

Are you sure you want to remove this Notification ?

#### Form Select

#### Default Select

Show Code

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

Show Code

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

Show Code

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

Default

Set `data-choices` attribute to set a default single select.

Option Groups

Set `data-choices data-choices-groups` attribute to set option group

Options added via config with no search

Set `data-choices data-choices-search-false data-choices-removeItem`

Options added via config with no sorting

Set `data-choices data-choices-sorting-false` attribute.

##### Multiple select input

Default

Set `data-choices multiple` attribute.

With remove button

Set `data-choices data-choices-removeItem multiple` attribute.

Option groups

Set `data-choices data-choices-multiple-groups="true" multiple` attribute.

##### Text inputs

Set limit values with remove button

Set `data-choices data-choices-limit="Required Limit" data-choices-removeItem` attribute.

Unique values only, no pasting

Set `data-choices data-choices-text-unique-true` attribute.

Disabled

Set `data-choices data-choices-text-disabled-true` attribute.

Loading...

##### Theme Customizer

###### Layout

Choose your layout

##### Vertical

##### Horizontal

##### Two Column

##### Semi Box

###### Color Scheme

Choose Light or Dark Scheme.

##### Light

##### Dark

###### Layout Width

Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

###### Layout Position

Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

###### Topbar Color

Choose Light or Dark Topbar Color.

##### Light

##### Dark

###### Background Image

Choose a body background image.

##### None

##### One

##### Two

##### Three