Select

Organism

The Select Component is a form input component that allows users to choose a single option from a predefined list. It supports both text and numeric options and is best suited for scenarios where the available choices are known and limited.

Playground

Tooltip

Label

Placeholder

Label Position

Above

Label Size

Default

No of options to show

Open to top

Disabled

Required

Group disabled options

Enable Search

Search Placeholder

Case Sensitive

Sort options

Edit Options

Label

Select an option

Select with text

Select an option

        
          
            <
            Select

            





            
                options
              
                =
                "[
  {
    "value": 0,
    "text": "Unselect option",
    "isDisabled": false
  },
  {
    "value": 1,
    "text": "Option 1",
    "isDisabled": false,
    "hasAction": true
  },
  {
    "value": 4,
    "text": "Option 4",
    "isDisabled": false,
    "icon": "cube"
  },
  {
    "value": 7,
    "text": "Option 7",
    "isDisabled": false,
    "icon": "cube_group"
  },
  {
    "value": 2,
    "text": "Option 2",
    "isDisabled": true,
    "icon": "file"
  },
  {
    "value": 5,
    "text": "Option 5",
    "isDisabled": false,
    "icon": "ai"
  },
  {
    "value": 3,
    "text": "Option 3",
    "isDisabled": false,
    "icon": "excel"
  },
  {
    "value": 6,
    "text": "Option 6",
    "isDisabled": false,
    "icon": "file_pdf"
  }
]"
              

                label
              
                =
                "Label"
              

                placeholder
              
                =
                "Select an option"
              

                labelPosition
              
                =
                "labelAbove"
              

                labelCategory
              
                =
                "default"
              

                noOfOptionsToShow
              

                searchOptions
              
                =
                "{
  "enableSearch": true,
  "caseSensitive": false,
  "placeholder": ""
}"
              



  />

Anatomy

Form Label - Tells the user what they are selecting for and indicates if selection is required. Can be hidden.
Select Field - This is where the currently selected option is displayed. It changes state when hovered, focused or locked.
Chevron Icon (Down/Up) - Icon that indicates the difference between "Select" and "Text Input" switches to Chevron Up when clicked and the menu is opened.
Help Text - Additional instruction to the user regarding the selection. Also can be hidden.
Icon - Optional leading icon on the Select field. Can be hidden.
Option List - Containing the options which can be selected. In Figma there can be 2-10 custom options, but in practice there can of course be more. The height is set to hug with a max height of 192px so that when there are more than 6 options, it will scroll. It can open up or down to maintain readability at various locations on screen.
Option - Representing each option that can be selected. Has 4 states for default, hovered, selected and locked. Only one option can be selected at a time.

States

Select includes Default, Hover, Focus, Focus Visible, and Locked states.
Focus Visible is triggered by keyboard navigation using the Tab key.
Focus is shown while the Select is open with a mouse click.
The Invalid validation state can only have Default and Hover states. When the user clicks on an Invalid Select, the validation is cleared and the component transitions to the Focus state. Pressing Tab instead transitions it to the Focus Visible state.

Variants

Display

Placeholder - prompts the user about what can be selected
Selected - displays the selected option in darker color.

Menu Direction

Can open Down or Up.

FormLabel

Show or hide Form Label.

Icon

Show or hide Icon.

HelpText + Validation

Show or hide Help Text.
The Select supports two validation states: None and Invalid. When validation is applied, the Help Text communicates the current validation result.
If the Select has informational Help Text and a validation state is triggered, the validation message replaces the original informational message. Validation feedback always takes priority over informational Help Text.
Select does not have a Validated state. Its values are predefined, so selecting an available option does not require positive validation feedback.

ModelValues

For more information on ModelValues please have a look to the Vue's Data Binding section.

vue

const searchString = defineModel('searchString', { default: '' });

Developer notes

Pressing Tab focuses the component and shows the focus border.
Pressing Enter when focused opens the dropdown menu.
Arrow keys browse through the options while focus stays on the trigger.
Pressing Enter while an option is highlighted selects it, closes the dropdown, and keeps focus on the trigger.
Pressing Tab again when focused moves to the next control. Shift+Tab while the menu is open returns focus to the Select trigger.

Select defines an additional model searchString which empowers you to pass (and control) the search string from outside of the component.

vue

<Select
  v-model="newModelValue"
  v-model:searchString="data.mySearchString"
  :action="selectAction"
  v-bind="{
    ...pg,
    options: data.alphabeticalOptions,
    searchOptions: {
      ...pg.searchOptions,
      searchFunction: (options: SelectOptionGeneric<string>[]) =>
      options.filter((option) => option.text.toString().toLowerCase().includes(data.mySearchString.toLowerCase()))
    },
    label: 'Select with text',
    icon: pg.hasIcon ? pg.icon as IconName : undefined,
    sortOptions: data.sort ? pg.sortOptions : undefined
  }" 
/>

Action button implementation

vue

<script>
    // On the options must be declared the boolean hasAction as true if the option has an action.
  options =
  [ 
    { "value": 0, "text": "", "isDisabled": false }, 
    { "value": 1, "text": "Option 1", "isDisabled": false, "hasAction": true }, 
    { "value": 4, "text": "Option 4", "isDisabled": false, "hasAction": true }, 
    { "value": 7, "text": "Option 7", "isDisabled": false }
  ]


  // Declare actions function

  const selectAction: SelectActionGeneric<number | string> = ref({
    text: 'Action',
    icon: 'trash' as IconName,
    function: async (option: SelectOptionGeneric<number | string>) => {
      console.log('Action', option);
    },
  }).value;

  // The same function will be executed for all the options on the list that have an action button.

</script>



<template>
<!-- Assign the declared function to the prop "action" to be executed when a button is clicked.  -->

  <Select
    :action="selectAction"
    v-bind: options
  />

</template>

Select ​