Drop Downs
Select inputs that combine a concave trigger (Input style) with a convex overlay menu (Elevated style).
Deprecated Component
The Dropdown component is deprecated for new development. Use the Select component instead, which supports rich content, multi-select, search, icons, and custom rendering.
Legacy DropdownDeprecated
Select a role
Active
Dropdown vs Select Comparison
Migration Guide
Migrating from Dropdown to Select is straightforward. The main changes are renaming items to options and adjusting the callback signature.
Basic Migration
// Before (Dropdown)
<Dropdown
items={[
{ label: 'Active', value: 'active' },
{ label: 'Pending', value: 'pending' },
]}
value={status}
onChange={(value) => setStatus(value)}
trigger="Select status"
/>
// After (Select)
<Select
options={[
{ label: 'Active', value: 'active' },
{ label: 'Pending', value: 'pending' },
]}
value={status}
onChange={(value, option) => setStatus(value)}
placeholder="Select status"
/>Enhanced Features (Select only)
// Take advantage of Select's new features
<Select
options={[
{
label: 'John Doe',
value: 'john',
icon: 'user',
description: 'john@example.com' // Multi-line support
},
{
label: 'Jane Smith',
value: 'jane',
icon: 'user',
description: 'jane@example.com'
},
]}
value={selectedUser}
onChange={(value) => setSelectedUser(value)}
placeholder="Select a user"
searchable // Enable search filtering
clearable // Add clear button
/>Props Reference (Legacy)
For maintaining existing Dropdown implementations. New development should use Select.