pages._explore-components-interaction-selectmenu.title

pages._explore.sections.basic-usage.title

html

<SelectMenu
    v-model="rfSelectValue"
    :options="basicOptions"
    placeholder="Choose an option"
/>

typescript

<script setup lang="ts">

// state
const rfSelectValue = ref('')

const basicOptions = ref([
  { key: 'option1', label: 'Option 1' },
  { key: 'option2', label: 'Option 2' },
  { key: 'option3', label: 'Option 3' }
])
</script>

pages._explore.sections.complex-usage.title

html

<SelectMenu
    name="categories"
    v-model="rfComplexSelectValue"
    :options="complexOptions"
    placeholder="Select categories"
    :multi-select="true"
    :field-state="FormFieldState.SUCCESS"
    :reset-option="true"
    :position="BaseDropdownOpeningPositions.TOP"
/>

typescript

<script setup lang="ts">
import { FormFieldState } from '#core-types/components/interaction/form'
import { BaseDropdownOpeningPositions } from '#core-types/components/base/base-dropdown'

// state
const rfComplexSelectValue = ref(['cat1', 'cat3'])

const complexOptions = ref([
  { key: 'cat1', label: 'Technology' },
  { key: 'cat2', label: 'Design' },
  { key: 'cat3', label: 'Business' },
  { key: 'cat4', label: 'Marketing' }
])
</script>

Single vs Multi Select

Single Select

Value: none

Multi Select

Values: none

html

<!-- Single Select -->
<SelectMenu
    v-model="rfSingleValue"
    :options="selectOptions"
    placeholder="Single select"
    :multi-select="false"
/>

<!-- Multi Select -->
<SelectMenu
    v-model="rfMultiValue"
    :options="selectOptions"
    placeholder="Multi select"
    :multi-select="true"
/>

typescript

<script setup lang="ts">

// state
const rfSingleValue = ref('')
const rfMultiValue = ref([])

const selectOptions = ref([
  { key: 'red', label: 'Red' },
  { key: 'green', label: 'Green' },
  { key: 'blue', label: 'Blue' },
  { key: 'yellow', label: 'Yellow' }
])
</script>

Field States

Default state

Warning state

Error state

Success state

html

<!-- Default state -->
<SelectMenu 
    v-model="rfDefaultValue" 
    :options="stateOptions"
    placeholder="Default select"
/>

<!-- Warning state -->
<SelectMenu 
    v-model="rfWarningValue" 
    :options="stateOptions"
    placeholder="Warning select"
    :field-state="FormFieldState.WARNING"
/>

<!-- Error state -->
<SelectMenu 
    v-model="rfErrorValue" 
    :options="stateOptions"
    placeholder="Error select"
    :field-state="FormFieldState.ERROR"
/>

<!-- Success state -->
<SelectMenu 
    v-model="rfSuccessValue" 
    :options="stateOptions"
    placeholder="Success select"
    :field-state="FormFieldState.SUCCESS"
/>

typescript

<script setup lang="ts">
import { FormFieldState } from '#core-types/components/interaction/form'

// state
const rfDefaultValue = ref('')
const rfWarningValue = ref('warning')
const rfErrorValue = ref('')
const rfSuccessValue = ref('success')

const stateOptions = ref([
  { key: 'warning', label: 'Warning Option' },
  { key: 'error', label: 'Error Option' },
  { key: 'success', label: 'Success Option' }
])
</script>

pages._explore.sections.props.title

Prop	Default	Type
name	undefined	string
placeholder	undefined	string
fieldState	undefined	FormFieldState
position	BaseDropdownOpeningPositions.BOTTOM	BaseDropdownOpeningPositions
contentOffset	8	number
multiSelect	false	boolean
resetOption	true	boolean
indicatorIcon	true	boolean
indicatorIconName	'solar:alt-arrow-down-bold'	string
activeOptionIcon	true	boolean
activeOptionIconName	'solar:unread-linear'	string
inactiveOptionIconName	undefined	string
options	[]	SelectMenuOption[]
modelValue	undefined	string[] \| string \| undefined

pages._explore.sections.types.title

Name	Type	Options
FormFieldState	enum	DISABLED \| WARNING \| ERROR \| SUCCESS
BaseDropdownOpeningPositions	enum	TOP \| BOTTOM \| LEFT \| RIGHT
SelectMenuOption	interface	{ key: string, label: string }

pages._explore.sections.emits.title

Event	Type
update:modelValue	string[] \| string \| undefined