The Select component consists of a label, helper text, and input field and a drop-down arrow. The menu consists of a leading icon, a menu item label, and a menu item row.




Use the select dropdown as a form element where the user can choose one item of more than 5 predefined options.

When to consider something else:

A user can choose one option from a set of 2 options

A user can choose more than one option

A user has more than 20 predefined options


Getting Started

Item Display Text

It is expected that your select options will be an Array of Objects. You can therefore specify which property you want to use as display text in the dropdown by setting the text-prop to the property name.

For example if you objects is:

const options = [
    id: 1,
    name: "Rik",

You would configure the text-prop to be name.

Options Menu Height

You can configure the options menu height by setting the height style for .feather-select-options-list. Out of the box, the height is configured to allow up to 6 rows before scrolling. We have provided a mixin for you to easily configure the height of the menu.

The following example allows 10 items to be displayed before scrolling.

@import "@featherds/select/scss/mixins";

.my-component :deep(.feather-select-options-list) {
  @include select-menu-height(10);


labellabel for the selectStringtrue-
modelValuecurrent value selected by selectObjectfalseundefined
text-propproperty name that is used to get the display text from value and optionsStringfalse_text
optionsarray of options to display in the dropdownArray<Object>false[]
errorerror string to display under selectStringfalse-
clearlabel for the clear link that will appear at the end of the input when this has a valueStringfalse""
hinthint string to display under selectStringfalse-
hideLabelhides the label for the input in scenarios like tables where it would get in the wayBooleanfalse-
schemaa schema for use in validationObjectfalse-


  • update:modelValue - emits the new object that is selected


  • pre - use to insert an Icon


  • feather-select-input - on the input element
  • feather-form-element-label - on the label text element
  • feather-form-element-hint - on the hint text element
  • feather-form-element-error - on the error text element
  • feather-select-list - on the list element
  • feather-select-menu-container - the root div of the select container
  • feather-select-menu-container-dropdown - the container div for the select contents, note this uses our layering system and will be present as an immediate child of the body tag


Specifying a class or data-ref-id attribute will cause them to be applied to the component's root container div. All other attributes are inherited to the input where it makes sense. Some will be ignored if they conflict with some of the attributes used for accessibility.