Bauhaus Design System

Select ​

Molecule

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

Edit Options
        
          

            <
            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"
              


                labelCategory
              
                =
                "default"
              


                helpText
              
                =
                "Help text goes here."
              


                useHelpTextIcon
              


                noOfOptionsToShow
              


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


                icon
              
                =
                "ai"
              





  />

ModelValues

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

ts
const modelValue = defineModel<T | null>('modelValue', { required: true });
const searchString = defineModel<string>('searchString', { default: '' });

Properties ​

ts
/** Public Select consumer props (docs / playground). Shared base for Combobox / Multiselect. */
export interface SelectPublicProps<T extends string | number = string | number> extends FormLabelOptionalProps {
  modelValue: T | null;
  options: SelectOptionGeneric<T>[];
  placeholder?: string;
  disabled?: boolean;
  id?: string;
  /**
   * @deprecated Use `helpTextCategory` instead.
   * @see {@link HelpTextProps['category']}
   */
  validation?: HelpTextProps['category'];
  icon?: IconName;
  action?: SelectActionGeneric<T>;
  /** If set to 0, all options will be shown. Default: 0 */
  noOfOptionsToShow?: number;
  /** If true, disabled options will be grouped and shown at the end of the list */
  groupDisabledOptions?: boolean;
  sortOptions?: SortOptions<'alphabetical' | 'numerical'>;
  searchOptions?: SearchOptions<T>;
  openToTop?: boolean;
}

Anatomy ​

  1. Form Label - Tells the user what they are selecting for and indicates if selection is required. Can be hidden.
  2. Select Field - This is where the currently selected option is displayed. It changes state when hovered, focused or locked.
  3. 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.
  4. HelpText - Additional instruction to the user regarding the selection. Also can be hidden.
  5. Icon
  6. 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.
  7. 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
  • Can be open or closed.
Menu Direction
  • Can open Down or Up.
Form Label
  • Show or hide Form Label.
Icon
  • Show or hide Icon.
HelpText + Validation
  • Show or hide HelpText.
  • The Select supports two validation states: None and Invalid. When validation is applied, the HelpText communicates the current validation result.
  • If the Select has informational HelpText and a validation state is triggered, the validation message replaces the original informational message. Validation feedback always takes priority over informational HelpText.
  • Select does not have a Validated state. Its values are predefined, so selecting an available option does not require positive validation feedback.
Click Selection
  • A user clicks on the component and selects a desired option.
Keyboard Selection
  • A user tabs to focus on the component and selects a desired option using their keyboard.