No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

SelectSingle
  

				Option One
				

				Option Two
				

				Option Three
				

				Option Five
				

				Option Six
				

				Option Seven
				

				One very long option that on a sufficiently small screen is likely to wrap onto multiple lines in the dropdown view & also when selected
				

				Hi
				

				👋
				

				disabled option
				

				123456
				
NameDescriptionDefaultControl 
slots
label
unknown
--
loadingState
Display the loading state via custom template code
unknown
--
selectedOption
Display the currently selected option via custom template code
unknown
--
option
Display individual options via custom template code
unknown
--
props
options*
SelectOption[]
-
labelIsVisible
boolean
true
prependLabel
Prepends the field label to the displayed option
boolean
false
loading
boolean
false
disabled
boolean
false
ariaLabel
string
''
labelField
Field name in the options array that should be used for displaying the label
Values in this field do not need to be unique - they are used for display only
string
'label'
placeholder
string
''
v-model
Generally, there's no need to set this via a prop - it will be set automatically when using v-model
SelectOption
-
uniqueIdField
Field name in the options array that should be used as the unique identifier for each option
Required in order to disambiguate between options, when indicating which options are selected, for example
string
'value'
events
select
emit the most recently selected value,
generally not necessary, if state can be handled w/ v-model alone
--
Stories
With Array As Option Values
  

				Option 1
				

				Option 2
				
With Custom Options
Sometimes, we need to display each option in the select with custom formatting,
or in a way different from the standard display of option.label. When this is the case,
an option scoped slot is provided for custom template code, as well as a selectedOption slot
  
label: Option One, with value: option-one
label: Option Two, with value: option-two
label: Option Three, with value: option-three
label: Option Five, with value: option-four
label: Option Six, with value: option-six
label: Option Seven, with value: option-seven
label: One very long option that on a sufficiently small screen is likely to wrap onto multiple lines in the dropdown view & also when selected, with value: option-long
label: Hi, with value: option-short
label: 👋, with value: option-emoji
label: disabled option, with value: disabled-option
label: 123456, with value: option-numbers