Github

Select

Select fields let users choose one option from a dropdown list.

Component variations

Basic Select

Standard select for choosing from a list of options

States

Contains: Default, Success, Error, Warning

Selection is valid
Please select a valid option
This selection may affect other fields

With Icons

Leading icon and optional trailing action icon

Optional & Disabled

Select can be marked as optional or disabled

Optional

Disabled Options

Individual options can be disabled

Hint & Helper Text

Use hint for tooltips and helper text for guidance

This will be saved to your profile

Usage Guidelines

Import

Import the select component and option interface in your module or component:

import-select.ts

Copy code

Basic Implementation

Here is a basic example of using the select component:

select-example.ts

Copy code

Implementation with all available APIs

Here is an example of using the select component with all available APIs:

select-example.html

Copy code

Listening to Selection Events

Handle selection changes by listening to the (valueChange) and (valueCommit) events:

select-events.html

Copy code

select-events.ts

Copy code

Using Disabled Options

You can disable specific options in the select dropdown:

select-disabled-options.ts

Copy code

API Reference

VdSelect - Inputs

Property
Type
Default
Required
Description
label
string
-
No
Label text displayed above the select
placeholder
string
''
No
Placeholder text shown when no option is selected
value
T | null
null
No
Currently selected value
options
VdSelectOption<T>[]
[]
No
Array of options to display in the dropdown
optional
boolean
false
No
Whether the select is optional
disabled
boolean
false
No
Whether the select is disabled
state
'success' | 'error' | 'warning' | null
null
No
Visual state of the select
helperText
string
-
No
Helper text displayed below the select
hintText
string
-
No
Hint text shown in tooltip
leadingIcon
string
-
No
Icon displayed before the select value

VdSelectOption Interface

Each option in the options array should implement the VdSelectOption interface:

Property
Type
Default
Required
Description
label
string
-
Yes
Text displayed for this option
value
T
-
Yes
The value associated with this option
disabled
boolean
false
No
Whether this option is disabled

Outputs

Event
Type
Description
valueChange
EventEmitter<T | null>
Emitted whenever a new option is selected
valueCommit
EventEmitter<T | null>
Emitted when the select loses focus
inputFocus
EventEmitter<void>
Emitted when the select receives focus

Best Practices

When to Use

  • Use Select when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Select when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Use select when you have 3 or more mutually exclusive options
  • Keep option labels concise and consistent in length
  • Sort options logically (alphabetical, by frequency, or by relevance)
  • Use placeholder text that clearly indicates the expected action
  • Provide helper text when the choice may have side effects
  • Disable options that are temporarily unavailable instead of removing them
  • Show validation feedback using state prop and helper text
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Customize the select features in this section

Helper text

example.html

Copy code