Form
Dropdown
Select one option from a list. Below the native breakpoint (768px by default) it switches to the browser's native <select> for better mobile behavior.
import { DropdownComponent, type SelectOption } from '@/MigsLab/shared'
Example
Selected: —
const selectedFruit = ref<OptionValue>()
const fruitOptions: SelectOption[] = [
{ label: 'Apple', value: 'apple' },
{ label: 'Durian (sold out)', value: 'durian', disabled: true }
]
<DropdownComponent v-model="selectedFruit" :options="fruitOptions" placeholder="Pick a fruit" />Text only
Renders as inline text with a chevron — useful for view or form selectors in headers.
<DropdownComponent v-model="view" :options="viewOptions" text-only text-size="1.15rem" />API
Props
| Name | Type | Default | Description |
|---|---|---|---|
v-model | string | number | undefined | Value of the selected option. |
options | SelectOption[] | — | Options as { label, value, disabled? }. |
placeholder | string | 'Select...' | Shown when nothing is selected. |
textOnly | boolean | false | Render the toggle as plain text. |
textSize | string | undefined | CSS font-size of the toggle, e.g. 1.15rem. |
disabled | boolean | false | Disable the control. |
nativeBreakpoint | number | 768 | Window width (px) at or below which the native <select> is used. Set 0 to always use the custom menu. |