Select

Allow a user to select an option from a list.

Code


                                                        
                                                        
                                                            <PyxisSelect
                                                           v-model="modelValue"
                                                           :option-list="[
                                                             {
                                                                value: 'value1',
                                                                title: 'Option 1',
                                                                dataTestid: 'datatestid-option1',
                                                             },
                                                             {
                                                                value: 'value2',
                                                                title: 'Option 2',
                                                                dataTestid: 'datatestid-option2',
                                                             }
                                                           ]"
                                                           placeholder="Select an option"
                                                           data-testid="select"
                                                        />

Example of a regular Select component

Props

The Select component supports the following Props:

Name	Type	Default	Required
optionList	{ value: string\|number title: string dataTestid: string description?: string iconClass?: string }[]	undefined	true
dataTestid	string	undefined	true
placeholder	string	undefined	true
requiredMessage	string	undefined	false
warningMessage	string	undefined	false
disabled	boolean	false	false
size	'default' \| ‘compact'	'default'	false
id	string	undefined	false
name	string	undefined	false
label	string	undefined	false
labelledBy	string	undefined	false
v-model	string\|number	undefined	false

Events

The interactions on the Select component are handled by the following Events

@update:modelValue : This event is emitted when the component's state or data is updated.

@change : This event is triggered when the selection within the Select component is modified.