# Select
A filterable dropdown component similar to native
<select>element
When you have a bigger list of possible choices for a user to select from, it is not optimal to use radio button group, for example, but you should rather use the dropdown select.
<bdn-select> provides a variety of features that can be used to add a dropdown of options in a way that is easy to
create and maintain.
This component has almost all features of input components, with the exception of icon-end prop (as this place is
already taken by the chevron down icon specific for the select element). Styling is the same as in <bdn-input>
and <bdn-v-input> components to maintain visual consistency.
Note
Note: This component has popperjs dependency, so make sure you have that installed in your project before
using <bdn-select>. If you have started your project with Badin Vue Boilerplate, you should already have this
dependency installed.
# Options
<bdn-select> accepts a simple array or an array of objects into its options prop.
When using the simple array of values, you can just provide the list in options prop and a v-model value to store the
selected value. See the example below:
My favourite city is:
If you are supplying an array of objects and have control over how that object structured, you should add a text key
in each object so the component is able to display properly what is selected.
My favorite city is:
However, most of the time, you will probably have an array of objects that do not have the text key, so
the <bdn-select>
offers a way to work with any object in provided array if you simply add what property should be displayed when an
option is selected in the components prop text.
In example below, we have an array of objects that contain only countryName and countryCode properties, so if we
want to display a country name when an option is selected we just need to add text="countryName" in our component.
Heads up!
If you provide an array that doesn’t have a text key in objects, you will get an error in console.
text prop can also be a function, so you're able to do something like this
# Disabled options
Disabled options are possible if you are using an array of object as options for <bdn-select>. Simply add a property
disabled: true for each option you need to be disabled. The entry will be shown in list, but you will not be able to
select it. These options will still be “hoverable” or marked when you are using your keyboard to move through the list.
If you are using a simple array of values, providing a null value for an element in array will render it as an element in list, but it will be disabled and you will not be able to select it.
If you need an empty option list for dropdown, simply provide an empty array for options.
# Selecting values
Every time when using the <bdn-select> you need to provide a v-model value for storing the selected options. This
value will be updated every time an option is selected.
To preselect an option in <bdn-select> you can set a default value to your v-model variable that matches that option
in provided array. If you are using an array of objects, for this to work you would need to provide a whole object that
matches the one in provided array (this can be avoided, refer to the reduce section below).
The v-model of <bdn-select> is two-way bound, so updating the variable in you v-model outside of the component
will trigger the change in <bdn-select> as well.
When you select an option, a selected option in array will be emitted and set in your v-model variable. In case of
array of objects, the whole object will be returned upon selection. This provides a flexible way of dealing with your
data, as you can set up a watcher on your v-model variable and transform the selected data whatever you see fit.
Selected value from simple array:
Selected value from array of objects:
Two way bind example - click the button to select 'Ferrari' option in third select
# Returning a single key (reduce)
While returning the whole object on select is flexible and offers you a way to manipulate the data, there are times when
you don’t want to set up additional watchers and you want only single key to be returned from <bdn-select>. This can
be easily achieved if you provide the path to the key that should be returned in a prop reduce.
HR# Deep nested values
In case you need some nested key, simply add the path to that key as you would write a path to that object in javascript. See the example below.
Country code: # Using keyboard
You can move through the list using the up and down arrows on the keyboard.
To select an option, you can press Enter, Tab or Space when an option is marked.
See any of the examples on this page.
# Filtering options
For large lists of options, it makes sense to enable the search functionality in <bdn-select> component. This can be
done by simply adding a searchable prop to your component which will enable an input field in component which users can
use to filter out the options.
In case you provide only the searchable prop, some search settings will be set automatically, and some assumptions made – for example, fuzzy search will be enabled, search term will be looked up anywhere in strings and search will be case-insensitive.
Additionally, you can pass a settings object for search in this prop to change the default behavior.
Available options are:
- fuzzy – value can be true or false (default is true) and it enables the fuzzy search functionality,
- searchPosition – accepts strings ‘any’ or ‘start’ (default is ‘any’) and it sets the position of the search term – ‘start’ will look only the beginning of each property in your objects, while ‘any’ will look for matches anywhere in the string.
- caseSensitive – accepts Boolean values true or false (default is false) and sets whether search should be case sensitive.
See the example below:
# Fuzzy search
By default, search will look into every value of objects in the array, if it’s the string or number, and match with the search term. This will work even if you have multiple nested objects in there, or even arrays of other objects or strings. When fuzzy search is enabled, it makes possible to search with multiple search terms that don’t have to be complete. In example below, you can search the actors names by entering only the parts of first and last name, for example “r down”.
If fuzzy search is off, search will treat all entered search words as one search term, and look for a complete match in provided options array.
# Slots
Extend the <bdn-select> component functionality by providing your own content or other components by using the
provided slots.
# Default slot
The default slot acts the same as the default slot in <bdn-input> and <bdn-v-input> and is intended to provide a
helper text or similar. However, you can add any other element or component, but make sure to provide the styling if
necessary.
# No options slot
By default, when you add an empty array as options source <bdn-select> component will display text “There are no
options”. If you need to provide localized version or an element with your own styling, you can use the named slot
no-options.
See the example below:
# List header and list footer
You can provide a header and footer for you list by using the named slots list-header and list-footer.
As the parent for list is <ul> element, make sure that content you add in these slots is wrapped in <li> tag.
# Events reference
<bdn-select> emits several events that you can use when necessary. You can see the list below:
| Event name | Description |
|---|---|
selected | Triggered when an option is selected in the list |
open | Triggered when select is opened and options are visible |
closed | Triggered when dropdown is closed |
blur | Triggered when search is enabled and you leave the input field. When search is enabled, both closed and blur will be emitted on closing the dropdown. |
# Props reference
| Property | Type | Default | Accepts | Description |
|---|---|---|---|---|
options | Array | empty array | Simple array or Array of objects | List of options that will appear in the dropdown. Can be a simple array with strings, numbers or null as elements or an array of objects. Refer to Options section for more information. |
required | Boolean | false | true/false | Determines if the selection is required |
label | String | empty | Any string | A label for the select component |
floating-label | Boolean | true | true/false | Determines if the label is inside the select field until selection or focus, or above the field |
label-active | Boolean | false | true/false | Determines if the floating label is active without user having to focus the field or select an option |
id | String | empty | Any string | An id for the field. If not provided, the component will create its own id based on the internal component id |
name | String | empty | Any string | A name attribute for the field. If not provided, the component will have the same value as id |
clearable | Boolean | false | true/false | Determines if the selected value can be cleared. When true, a clear button will appear on the right side of select field. |
disabled | Boolean | false | true/false | Determines if the field is disabled |
icon-start | String | empty | Any string | Usually a class that you would use to display an icon from an icon set |
placeholder | String | empty | Any string | A string that will appear inside the select component until an option is selected. If there’s a placeholder and label is of floating type, label will be active |
block | Boolean | true | true/false | Determines if the select input is block sized – has CSS property display:block and has 100% width, and will occupy the whole width of parent element |
← Notification Table →