Select
Select renders a styled option picker with searchable combobox behavior and multi-select support.
Installation
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/autocomplete-async-search.json.
Usage
Examples
Async search results
Autocomplete in a form
Input options
Grouped people search
Date presets with a custom picker
Grouped options
Combobox inside a dialog
Combobox in a form
Input options
Member tags
Multiple selection with chips
Property pickers
Native select fields
Clearable select
Options with descriptions
Form fields and states
Grouped options
Select inside a dialog
Rich option content
Select in a toolbar
API
17 props
Accessibility
Select uses a native button trigger, listbox semantics, aria-expanded, aria-selected, aria-multiselectable for multi-select, and keyboard support for Arrow keys, Enter, Space, Home, End, and Escape.
Related
FieldField composes form label, description, error, and input building blocks.7 examplesDialogModal, confirmation and bare full-screen dialogs for editing, detail inspection, explicit decisions, lightboxes and launchers.12 examplesAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesItemFlexible rows for people, settings, integrations, navigation and activity lists, composed from media, text, actions and optional header and footer rows.11 examplesToastTransient feedback for completed actions, errors and recoverable background work.4 examplesBannerBanner renders a compact announcement strip.5 examples