TkxDropdown

import { TkxDropdown, TkxButton } from 'tekivex-ui';

Basic — single select

Basic — single select

Pick a country ▾

<TkxDropdown
  trigger={<TkxButton variant="outline">Pick country ▾</TkxButton>}
  items={[
    { key: 'in', label: 'India' },
    { key: 'us', label: 'United States' },
    { key: 'uk', label: 'United Kingdom' },
  ]}
  onSelect={(key, item) => console.log(item.label)}
/>

Grouped items

Grouped items with separators

Insert ▾

Searchable

Searchable — start typing

Search states ▾

Props

Prop	Type	Required	Description
trigger	ReactNode	yes
items	DropdownItem[]
groups	DropdownGroup[]
placement	DropdownPlacement
onSelect	(key: string, item: DropdownItem) => void
selectedKeys	string[]
multiSelect	boolean
searchable	boolean
searchPlaceholder	string
closeOnSelect	boolean
disabled	boolean
maxHeight	number
minWidth	number
open	boolean
onOpenChange	(open: boolean) => void
portal	boolean
offset	number
renderItem	(item: DropdownItem, selected: boolean) => ReactNode

Accessibility

• Keyboard navigation supported on all interactive elements
• :focus-visible outline at 2px (theme-token primary)
• ARIA roles and properties applied per WAI-ARIA 1.2
• Respects prefers-reduced-motion
• Minimum 44×44 touch target where applicable

Source

The implementation lives at src/components/TkxDropdown.tsx.

For the full interactive sandbox, open the playground.