---
import Dropdown from "@technologyadvice/components/ui/dropdown/Dropdown.vue"
const sortOptions = [
{ value: "newest", label: "Newest First" },
{ value: "oldest", label: "Oldest First" },
{ value: "price-asc", label: "Price: Low to High" },
{ value: "price-desc", label: "Price: High to Low" },
]
---
<Dropdown
id="sort1"
placeholder="Select a team"
options={sortOptions}
client:load
/>States
Disabled
---
import Dropdown from "@technologyadvice/components/ui/dropdown/Dropdown.vue"
const sortOptions = [
{ value: "newest", label: "Newest First" },
{ value: "oldest", label: "Oldest First" },
{ value: "price-asc", label: "Price: Low to High" },
{ value: "price-desc", label: "Price: High to Low" },
]
---
<Dropdown id="sort2" options={sortOptions} disabled client:load />With Label
---
import Dropdown from "@technologyadvice/components/ui/dropdown/Dropdown.vue"
const sortOptions = [
{ value: "newest", label: "Newest First" },
{ value: "oldest", label: "Oldest First" },
{ value: "price-asc", label: "Price: Low to High" },
{ value: "price-desc", label: "Price: High to Low" },
]
---
<Dropdown id="sort3" label="Sort by" options={sortOptions} client:load />With Label and Hint
Choose how to sort the results
---
import Dropdown from "@technologyadvice/components/ui/dropdown/Dropdown.vue"
const sortOptions = [
{ value: "newest", label: "Newest First" },
{ value: "oldest", label: "Oldest First" },
{ value: "price-asc", label: "Price: Low to High" },
{ value: "price-desc", label: "Price: High to Low" },
]
---
<Dropdown
id="sort4"
label="Sort by"
hintText="Choose how to sort the results"
options={sortOptions}
client:load
/>With Default Value
---
import Dropdown from "@technologyadvice/components/ui/dropdown/Dropdown.vue"
const sortOptions = [
{ value: "newest", label: "Newest First" },
{ value: "oldest", label: "Oldest First" },
{ value: "price-asc", label: "Price: Low to High" },
{ value: "price-desc", label: "Price: High to Low" },
]
---
<Dropdown
id="sort5"
label="Sort by"
options={sortOptions}
default="price-asc"
client:load
/>Required with Tooltip
---
import Dropdown from "@technologyadvice/components/ui/dropdown/Dropdown.vue"
const sortOptions = [
{ value: "newest", label: "Newest First" },
{ value: "oldest", label: "Oldest First" },
{ value: "price-asc", label: "Price: Low to High" },
{ value: "price-desc", label: "Price: High to Low" },
]
---
<Dropdown
id="sort6"
label="Sort by"
required
requiredTooltip="This field is required"
options={sortOptions}
client:load
/>Width and Max Height
This dropdown demonstrates scrolling with many options
---
import Dropdown from "@technologyadvice/components/ui/dropdown/Dropdown.vue"
const manyOptions = Array.from({ length: 60 }, (_, i) => ({
value: `item-${i + 1}`,
label: `Option ${i + 1}`,
descriptor: i % 5 === 0 ? `@${i + 1}` : null,
}))
---
<Dropdown
required
id="many-options"
width="300px"
maxHeight="300px"
label="Select from many options"
options={manyOptions}
hintText="This dropdown demonstrates scrolling with many options"
client:load
/>Icon
The Dropdown component supports an icon in the trigger button using Lucide. You can specify any icon from Lucide’s collection by providing the icon name to the icon prop.
Choose from a complete list of Lucide icons to use with the Dropdown component. For implementation details, check the Lucide Vue Next documentation.
Note that icon names must be provided in PascalCase format (e.g., “User”, “FileText”, “ChevronDown”).
---
import Dropdown from "@technologyadvice/components/ui/dropdown/Dropdown.vue"
const sortOptions = [
{ value: "newest", label: "Newest First" },
{ value: "oldest", label: "Oldest First" },
{ value: "price-asc", label: "Price: Low to High" },
{ value: "price-desc", label: "Price: High to Low" },
]
---
<Dropdown id="sort8" options={sortOptions} icon="User" client:load />With Option Descriptor
---
import Dropdown from "@technologyadvice/components/ui/dropdown/Dropdown.vue"
const sortOptions = [
{ value: "olivia", label: "Olivia", descriptor: "@olivia" },
{ value: "phoenix", label: "Phoenix", descriptor: "@arizona" },
{ value: "khonshu", label: "Moon Knight", descriptor: "@themoonhauntsyou" },
{ value: "judge", label: "Jury", descriptor: "@execution" },
]
---
<Dropdown
id="sort8"
label="Team Member"
options={sortOptions}
required
client:load
/>Loading State
The Dropdown component supports a loading state to indicate when options are being fetched or processed. When in loading state, the dropdown displays a spinner and “Loading options…” text.
This dropdown is in a loading state
---
import Dropdown from "@technologyadvice/components/ui/dropdown/Dropdown.vue"
---
<Dropdown
id="loading-example"
label="Loading Example"
options={[]}
loading={true}
hintText="This dropdown is in a loading state"
client:load
/>Loading State with Icon
The loading spinner replaces any specified icon during the loading state:
Loading spinner replaces the icon during loading
---
import Dropdown from "@technologyadvice/components/ui/dropdown/Dropdown.vue"
---
<Dropdown
id="loading-with-icon"
label="Loading with Icon"
icon="SortDesc"
options={[]}
loading={true}
hintText="Loading spinner replaces the icon during loading"
client:load
/>