List Options

vue-multiselect-listbox accepts arrays, it could be an array of primitives or an array of objects

<!-- array of strings or numbers -->
<v-multiselect-listbox :options="['Alabama', 'California']"></v-multiselect-listbox>

Alabama

California

Select

<!-- or, an array of objects -->
<v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                       :reduce-display-property="(option) => option.label"
                       :reduce-value-property="(option) => option.code">
</v-multiselect-listbox>

Alabama

California

Select

Group List options

You can group options based on a certain property.

<v-multiselect-listbox :options="[{label: 'Alabama', code: 'al', group: 'US'}, {label: 'California', code: 'cal', group: 'US'}, {label: 'British Columbia', code: 'bc', group: 'Canada'}]"
                       :reduce-display-property="(option) => option.label"
                       :reduce-value-property="(option) => option.code"
                       :reduce-group-property="(option) => option.group">
</v-multiselect-listbox>

Canada

British Columbia

US

Alabama

California

Select

Select/Deselect All Buttons

You can hide the select/deselect all options buttons, by default they're shown.

<v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                       :reduce-display-property="(option) => option.label"
                       :reduce-value-property="(option) => option.code"
                       :show-select-all-buttons="false">
</v-multiselect-listbox>

Alabama

California

Select

Highlight Difference from the original input

You enable highlighting different options removed or added from the original copy. The boolean flag is highlight-diff.

<v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                       :reduce-display-property="(option) => option.label"
                       :reduce-value-property="(option) => option.code"
                       search-input-class="custom-input-class"
                       highlight-diff>
</v-multiselect-listbox>

You can also pass CSS classes for highlighting added or removed items. These classes are highlightAddedClass and highlightRemovedClass.

Alaska

American Samoa

Arizona

Arkansas

Colorado

Connecticut

Delaware

District Of Columbia

Federated States Of Micronesia

Florida

Georgia

Guam

Hawaii

Idaho

Illinois

Indiana

Iowa

Kansas

Kentucky

Louisiana

Maine

Marshall Islands

Maryland

Massachusetts

Michigan

Minnesota

Mississippi

Missouri

Montana

Nebraska

Nevada

New Hampshire

New Jersey

New Mexico

New York

North Carolina

North Dakota

Northern Mariana Islands

Ohio

Oklahoma

Oregon

Palau

Pennsylvania

Puerto Rico

Rhode Island

South Carolina

South Dakota

Tennessee

Texas

Utah

Vermont

Virgin Islands

Virginia

Washington

West Virginia

Wisconsin

Wyoming

Alabama

California

Search Input Placeholder

You can customize the placeholders in the search inputs.

<v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                       :reduce-display-property="(option) => option.label"
                       :reduce-value-property="(option) => option.code"
                       search-options-placeholder="Search states"
                       selected-options-placeholder="Search selected states">
</v-multiselect-listbox>

Alabama

California

Select

Empty Listbox Placeholder

You can customize the placeholders in the list boxes when they're empty.

<v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                       :reduce-display-property="(option) => option.label"
                       :reduce-value-property="(option) => option.code"
                       no-options-text="No states"
                       selected-no-options-text="No states selected">
</v-multiselect-listbox>

Alabama

California

No options selected

Empty Search Placeholder

You can customize the placeholders when options are found while searching.

<v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                       :reduce-display-property="(option) => option.label"
                       :reduce-value-property="(option) => option.code"
                       no-options-found-text="No state found"
                       no-selected-options-found-text="No selected state found">
</v-multiselect-listbox>

Alabama

California

Select

Hide Search Input

You can hide the search input using the following option hide-search-inputs:

<v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                       :reduce-display-property="(option) => option.label"
                       :reduce-value-property="(option) => option.code"
                       no-options-found-text="No state found"
                       no-selected-options-found-text="No selected state found"
                       hide-search-inputs>
</v-multiselect-listbox>

Alabama

California

Select

Style Search Input

You can pass a class to style the input boxes. The property to pass the class is search-input-class.

<v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                       :reduce-display-property="(option) => option.label"
                       :reduce-value-property="(option) => option.code"
                       search-input-class="custom-input-class">
</v-multiselect-listbox>