ui/components/select

Select

Dropdown select with search, multiple selection, card variant, and controlled keyboard integration points. 8 composable parts.

Preview

tsx

1 import {2   Select,3   SelectContent,4   SelectItem,5   SelectTrigger,6   SelectValue,7 } from "@/components/ui/select";8 9 export default function SelectDefault() {10   return (11     <div className="w-64">12       <Select>13         <SelectTrigger aria-label="Branch">14           <SelectValue placeholder="Select a branch..." />15         </SelectTrigger>16         <SelectContent>17           <SelectItem value="main">main</SelectItem>18           <SelectItem value="develop">develop</SelectItem>19           <SelectItem value="feature/auth">feature/auth</SelectItem>20           <SelectItem value="fix/typo">fix/typo</SelectItem>21           <SelectItem value="release/v2">release/v2</SelectItem>22         </SelectContent>23       </Select>24     </div>25   );26 }27

Installation

$pnpm exec dgadd add ui/select

[Installs to]src/components/ui/select[Item]ui/select

dgadd is not public on npm yet. Until the first release, pack @diffgazer/add from the repository and install that tarball into this app, which is what puts dgadd on pnpm exec.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS once packages are available.

Usage

tsx

1 import {2   Select,3   SelectContent,4   SelectItem,5   SelectTrigger,6   SelectValue,7 } from "@/components/ui/select";8 9 export default function SelectDefault() {10   return (11     <div className="w-64">12       <Select>13         <SelectTrigger aria-label="Branch">14           <SelectValue placeholder="Select a branch..." />15         </SelectTrigger>16         <SelectContent>17           <SelectItem value="main">main</SelectItem>18           <SelectItem value="develop">develop</SelectItem>19           <SelectItem value="feature/auth">feature/auth</SelectItem>20           <SelectItem value="fix/typo">fix/typo</SelectItem>21           <SelectItem value="release/v2">release/v2</SelectItem>22         </SelectContent>23       </Select>24     </div>25   );26 }27

Examples

Open Listbox (defaultOpen)

Preview

tsx

1 "use client";2 3 import { useState } from "react";4 import {5   Select,6   SelectContent,7   SelectItem,8   SelectTrigger,9   SelectValue,10 } from "@/components/ui/select";11 12 export default function SelectOpen() {13   const [value, setValue] = useState<string[]>(["git-commit"]);14 15   return (16     <div className="w-64 h-56">17       <Select multiple defaultOpen value={value} onChange={setValue}>18         <SelectTrigger aria-label="Commands">19           <SelectValue placeholder="Select commands..." display="list" />20         </SelectTrigger>21         <SelectContent>22           <SelectItem value="git-add">git add</SelectItem>23           <SelectItem value="git-commit">git commit</SelectItem>24           <SelectItem value="git-push">git push</SelectItem>25           <SelectItem value="git-stash" disabled>26             git stash27           </SelectItem>28           <SelectItem value="git-rebase">git rebase</SelectItem>29         </SelectContent>30       </Select>31     </div>32   );33 }34

Disabled and Invalid

Preview

tsx

1 import {2   Select,3   SelectContent,4   SelectItem,5   SelectTrigger,6   SelectValue,7 } from "@/components/ui/select";8 9 const branches = ["main", "develop", "release/v2"];10 11 function BranchSelect({12   label,13   disabled,14   invalid,15 }: {16   label: string;17   disabled?: boolean;18   invalid?: boolean;19 }) {20   return (21     <div className="space-y-1.5">22       <span className="text-xs font-mono text-muted-foreground">{label}</span>23       <Select disabled={disabled} aria-invalid={invalid}>24         <SelectTrigger aria-label={label}>25           <SelectValue placeholder="Select a branch..." />26         </SelectTrigger>27         <SelectContent>28           {branches.map((branch) => (29             <SelectItem key={branch} value={branch}>30               {branch}31             </SelectItem>32           ))}33         </SelectContent>34       </Select>35     </div>36   );37 }38 39 export default function SelectStates() {40   return (41     <div className="flex flex-col gap-4 w-64">42       <BranchSelect label="disabled" disabled />43       <BranchSelect label="aria-invalid" invalid />44     </div>45   );46 }47

Searchable (bottom)

Preview

tsx

1 "use client";2 3 import { useState } from "react";4 import {5   Select,6   SelectContent,7   SelectEmpty,8   SelectItem,9   SelectSearch,10   SelectTrigger,11   SelectValue,12 } from "@/components/ui/select";13 14 export default function SelectSearchable() {15   const [value, setValue] = useState<string>("");16 17   return (18     <div className="w-64">19       <Select value={value} onChange={setValue}>20         <SelectTrigger aria-label="Command">21           <SelectValue placeholder="Search commands..." />22         </SelectTrigger>23         <SelectContent>24           <SelectItem value="git-add">git add</SelectItem>25           <SelectItem value="git-commit">git commit</SelectItem>26           <SelectItem value="git-push">git push</SelectItem>27           <SelectItem value="git-pull">git pull</SelectItem>28           <SelectItem value="git-stash">git stash</SelectItem>29           <SelectItem value="git-rebase">git rebase</SelectItem>30           <SelectItem value="git-cherry-pick">git cherry-pick</SelectItem>31           <SelectEmpty />32           <SelectSearch placeholder="Filter..." />33         </SelectContent>34       </Select>35     </div>36   );37 }38

Searchable (top)

Preview

tsx

1 "use client";2 3 import { useState } from "react";4 import {5   Select,6   SelectContent,7   SelectEmpty,8   SelectItem,9   SelectSearch,10   SelectTrigger,11   SelectValue,12 } from "@/components/ui/select";13 14 export default function SelectSearchTop() {15   const [value, setValue] = useState<string>("");16 17   return (18     <Select width="md" value={value} onChange={setValue}>19       <SelectTrigger aria-label="Command">20         <SelectValue placeholder="Select a command..." />21       </SelectTrigger>22       <SelectContent>23         <SelectSearch position="top" placeholder="Search commands..." />24         <SelectItem value="git-add">git add</SelectItem>25         <SelectItem value="git-commit">git commit</SelectItem>26         <SelectItem value="git-push">git push</SelectItem>27         <SelectItem value="git-pull">git pull</SelectItem>28         <SelectItem value="git-stash">git stash</SelectItem>29         <SelectItem value="git-rebase">git rebase</SelectItem>30         <SelectItem value="git-cherry-pick">git cherry-pick</SelectItem>31         <SelectEmpty />32       </SelectContent>33     </Select>34   );35 }36

Multiple

Preview

tsx

1 "use client";2 3 import { useState } from "react";4 import {5   Select,6   SelectContent,7   SelectItem,8   SelectTrigger,9   SelectValue,10 } from "@/components/ui/select";11 12 export default function SelectMultiple() {13   const [value, setValue] = useState<string[]>(["typescript"]);14   return (15     <div className="w-64">16       <Select multiple value={value} onChange={setValue}>17         <SelectTrigger aria-label="Languages">18           <SelectValue placeholder="Select languages..." />19         </SelectTrigger>20         <SelectContent>21           <SelectItem value="typescript">TypeScript</SelectItem>22           <SelectItem value="rust">Rust</SelectItem>23           <SelectItem value="go">Go</SelectItem>24           <SelectItem value="python">Python</SelectItem>25           <SelectItem value="zig">Zig</SelectItem>26         </SelectContent>27       </Select>28     </div>29   );30 }31

Display Modes

Preview

tsx

1 "use client";2 3 import { useState } from "react";4 import {5   Select,6   SelectContent,7   SelectItem,8   SelectTrigger,9   SelectValue,10 } from "@/components/ui/select";11 12 const items = ["bug", "feature", "docs", "refactor", "test"];13 14 function SelectWithDisplay({15   label,16   display,17   truncateAfter,18 }: {19   label: string;20   display: "count" | "list" | "truncate";21   truncateAfter?: number;22 }) {23   const [value, setValue] = useState<string[]>(["bug", "feature", "docs"]);24   return (25     <div className="space-y-1.5">26       <span className="text-xs font-mono text-muted-foreground">{label}</span>27       <Select multiple value={value} onChange={setValue}>28         <SelectTrigger aria-label={label}>29           <SelectValue placeholder="Select..." display={display} truncateAfter={truncateAfter} />30         </SelectTrigger>31         <SelectContent>32           {items.map((item) => (33             <SelectItem key={item} value={item} indicator="none">34               {item}35             </SelectItem>36           ))}37         </SelectContent>38       </Select>39     </div>40   );41 }42 43 export default function SelectDisplayModes() {44   return (45     <div className="flex flex-col gap-4 w-64">46       <SelectWithDisplay label='display="count"' display="count" />47       <SelectWithDisplay label='display="list"' display="list" />48       <SelectWithDisplay49         label='display="truncate" truncateAfter={2}'50         display="truncate"51         truncateAfter={2}52       />53     </div>54   );55 }56

Avatar Picker (render children)

Preview

tsx

1 "use client";2 3 import { useState } from "react";4 import { Avatar } from "@/components/ui/avatar";5 import { Overflow } from "@/components/ui/overflow";6 import {7   Select,8   SelectContent,9   SelectItem,10   SelectTrigger,11   SelectValue,12 } from "@/components/ui/select";13 14 const users = [15   { value: "felix", label: "Felix", initials: "FX" },16   { value: "aria", label: "Aria", initials: "AR" },17   { value: "dev", label: "Dev", initials: "DV" },18   { value: "kai", label: "Kai", initials: "KI" },19   { value: "nova", label: "Nova", initials: "NV" },20 ];21 22 export default function SelectAvatar() {23   const [value, setValue] = useState<string[]>([]);24 25   return (26     <Select multiple value={value} onChange={setValue} width="lg">27       <SelectTrigger aria-label="Assigned members">28         <SelectValue placeholder="Assign members...">29           {({ selected }) => (30             <Overflow31               mode="items"32               indicator={({ count }) => (33                 <span className="flex h-6 w-6 shrink-0 items-center justify-center border border-dashed border-foreground/30 font-mono text-2xs text-muted-foreground">34                   +{count}35                 </span>36               )}37             >38               {selected.map((v) => {39                 const user = users.find((u) => u.value === v);40                 return <Avatar key={v} fallback={user?.initials ?? "?"} size="sm" />;41               })}42             </Overflow>43           )}44         </SelectValue>45       </SelectTrigger>46       <SelectContent>47         {users.map((user) => (48           <SelectItem key={user.value} value={user.value}>49             <span className="inline-flex items-center gap-2">50               <Avatar fallback={user.initials} size="sm" />51               {user.label}52             </span>53           </SelectItem>54         ))}55       </SelectContent>56     </Select>57   );58 }59

Tags (Multiselect)

Preview

tsx

1 "use client";2 3 import { useState } from "react";4 import {5   Select,6   SelectContent,7   SelectItem,8   SelectTags,9   SelectTrigger,10 } from "@/components/ui/select";11 12 export default function SelectTagsExample() {13   const [value, setValue] = useState<string[]>(["typescript", "rust"]);14 15   return (16     <Select multiple width="lg" value={value} onChange={setValue}>17       <SelectTrigger aria-label="Languages">18         <SelectTags placeholder="Select languages..." />19       </SelectTrigger>20       <SelectContent>21         <SelectItem value="typescript">TypeScript</SelectItem>22         <SelectItem value="rust">Rust</SelectItem>23         <SelectItem value="go">Go</SelectItem>24         <SelectItem value="python">Python</SelectItem>25         <SelectItem value="zig">Zig</SelectItem>26       </SelectContent>27     </Select>28   );29 }30

Radio Style

Preview

tsx

1 "use client";2 3 import { useState } from "react";4 import {5   Select,6   SelectContent,7   SelectItem,8   SelectTrigger,9   SelectValue,10 } from "@/components/ui/select";11 12 export default function SelectRadio() {13   const [value, setValue] = useState<string>("");14   return (15     <div className="w-64">16       <Select value={value} onChange={setValue}>17         <SelectTrigger aria-label="Environment">18           <SelectValue placeholder="Select environment..." />19         </SelectTrigger>20         <SelectContent>21           <SelectItem value="development" indicator="radio">22             development23           </SelectItem>24           <SelectItem value="staging" indicator="radio">25             staging26           </SelectItem>27           <SelectItem value="production" indicator="radio">28             production29           </SelectItem>30         </SelectContent>31       </Select>32     </div>33   );34 }35

Card Variant

Preview

tsx

1 "use client";2 3 import { useState } from "react";4 import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";5 6 export default function SelectCard() {7   const [value, setValue] = useState<string[]>(["svelte"]);8   return (9     <div className="w-72">10       <Select multiple variant="card" defaultOpen value={value} onChange={setValue}>11         <SelectTrigger aria-label="Framework">12           <span>Choose Framework</span>13         </SelectTrigger>14         <SelectContent>15           <SelectItem value="react">React</SelectItem>16           <SelectItem value="vue">Vue</SelectItem>17           <SelectItem value="svelte">Svelte</SelectItem>18           <SelectItem value="angular">Angular</SelectItem>19         </SelectContent>20       </Select>21     </div>22   );23 }24

API Reference

Select

Name	Type	Default	Description
value	string \| string[]	—	Controlled selected value. string[] when multiple, string in single mode.
defaultValue	string \| string[]	—	Initial selected value for uncontrolled usage.
onChange	((value: string) => void) \| ((value: string[]) => void)	—	Called when the selection changes.
open	boolean	—	Controlled open state. An initially true value initializes without moving focus or scrolling; later false-to-true transitions focus the content and reveal the active option.
defaultOpen	boolean	false	Initial open state for uncontrolled usage. The list initializes without moving document focus or scrolling, which is useful for an immediately visible variant="card" layout.
onOpenChange	(open: boolean) => void	—	Called when open state changes.
multiple	boolean	false	Enable multi-select. value/onChange become string[].
variant	"default" \| "card"	"default"	Visual treatment. "card" renders the inline settings-panel layout (combine with defaultOpen).
width	"sm" \| "md" \| "lg" \| "full"	—	Width preset for the Select container. "full" fills the parent.
disabled	boolean	false	Disable the trigger and prevent open.
name	string	—	Name for the hidden form input that participates in native form submission.
required	boolean	false	Mark the select as required for native form validation.
id	string	—	ID applied to the Select trigger button, not the wrapper element. Field uses it to point its label at the focusable control.
highlighted	string \| null	—	Controlled highlighted item id. Pair with onHighlightChange.
onHighlightChange	(value: string \| null) => void	—	Called when the highlighted item changes via keyboard or search.

SelectTrigger

Name	Type	Default	Description
childrenrequired	ReactNode	—	Trigger label. Use SelectValue or SelectTags for selection display.
handle	ReactNode \| null	Chevron	Custom trigger handle. Pass null to hide the default chevron.
aria-label	string	—	Accessible name for the trigger. When present, it takes precedence over aria-labelledby.
aria-labelledby	string	Field label id when composed with Field	ID reference for the trigger label. Field.Control supplies this automatically when SelectTrigger is wrapped in Field.

SelectContent

Name	Type	Default	Description
getResultsLabel	(count: number) => string	count => count + (count === 1 ? " result" : " results")	Localizes the searchable results count announced by the live region when a query is present.

SelectValue

Name	Type	Default	Description
placeholder	ReactNode	"Select..."	Rendered when nothing is selected.
display	"count" \| "list" \| "truncate"	"count"	Multi-select display mode. "count" shows N selected, "list" comma-separates, "truncate" shows first N + "+M more".
truncateAfter	number	2	Number of items shown before "+N more" when display="truncate".
getSelectedLabel	(count: number) => string	count => count + " selected"	Localizes the multi-select summary rendered when display="count".
getOverflowLabel	(count: number) => string	count => " +" + count + " more"	Localizes the overflow suffix rendered when display="truncate".
children	(state: { selected: string[]; labels: ReadonlyMap<string, string> }) => ReactNode	—	Render-function child for fully custom selection display; static ReactNode children are not accepted. Example: selected.map((value) => labels.get(value) ?? value).join(', ').

SelectTags

Name	Type	Default	Description
placeholder	string	"Select..."	String rendered when nothing is selected. Only available in multi-select mode.

SelectSearch

Name	Type	Default	Description
placeholder	string	"Search..."	Placeholder shown in the search input when its value is empty.
position	"top" \| "bottom"	"bottom"	Where the search row renders relative to the option list. "bottom" (default) renders it below the list with a top border; "top" renders it above with a bottom border.
aria-label	string	"Search options" unless aria-labelledby is present	Accessible name for the search combobox. A composed Field label takes precedence through aria-labelledby.

SelectItem

Name	Type	Default	Description
valuerequired	string	—	Item value. Must be unique within the Select.
indicator	"auto" \| "checkbox" \| "radio" \| "none"	"auto"	Selection indicator style. "auto" picks checkbox in multi mode and a check mark in single mode.
textValue	string	—	Override the searchable/typeahead text when children are not plain text.
disabled	boolean	false	Disable the option.

SelectEmpty

Name	Type	Default	Description
children	ReactNode	"> no results."	Custom empty-state content shown when a nonempty search query matches no items.

Data attributes

Attribute	Applies to	Values	Description
data-state	SelectTrigger and SelectContent/FloatingPanel listbox	"open" \| "closed"	Reflects the listbox open state for trigger and floating panel styling.
data-disabled	SelectTrigger	present when disabled	Marks a disabled trigger for styling hooks.
data-highlighted	SelectItem	present when highlighted	Marks the option referenced by aria-activedescendant.
data-value	SelectItem	item value	Exposes the option value used by selection and typeahead.
data-label	SelectItem	resolved label text	Exposes the option label used by SelectValue and search/typeahead.

Accessibility

Keyboard Navigation

SelectTrigger follows the closed combobox key map. SelectContent handles listbox navigation and restores focus to the trigger on Escape and Tab.

Key	Action
Enter / Space	On the trigger, toggles the listbox. In the listbox, selects the highlighted option.
ArrowDown / ArrowUp	Opens the listbox from the trigger, then moves highlight through enabled options.
Home / End	On a closed non-searchable trigger, opens and highlights the first or last enabled option. In the listbox, jumps to the first or last enabled option.
Printable character	On a closed non-searchable trigger, opens and typeaheads to the matching option. In an open non-searchable listbox, typeahead updates the highlight.
Tab	Closes the open listbox and synchronously restores focus to the trigger; single-select commits the highlighted option first.
Escape	Closes the open listbox and returns focus to the trigger.
Search input ArrowDown / ArrowUp	Moves the active descendant through filtered enabled options when SelectSearch is focused.
Search input Enter	Selects the active filtered option when one is visible.

Searchable with keyboard navigation

Preview

tsx

1 "use client";2 3 import { useState } from "react";4 import {5   Select,6   SelectContent,7   SelectEmpty,8   SelectItem,9   SelectSearch,10   SelectTrigger,11   SelectValue,12 } from "@/components/ui/select";13 14 export default function SelectSearchable() {15   const [value, setValue] = useState<string>("");16 17   return (18     <div className="w-64">19       <Select value={value} onChange={setValue}>20         <SelectTrigger aria-label="Command">21           <SelectValue placeholder="Search commands..." />22         </SelectTrigger>23         <SelectContent>24           <SelectItem value="git-add">git add</SelectItem>25           <SelectItem value="git-commit">git commit</SelectItem>26           <SelectItem value="git-push">git push</SelectItem>27           <SelectItem value="git-pull">git pull</SelectItem>28           <SelectItem value="git-stash">git stash</SelectItem>29           <SelectItem value="git-rebase">git rebase</SelectItem>30           <SelectItem value="git-cherry-pick">git cherry-pick</SelectItem>31           <SelectEmpty />32           <SelectSearch placeholder="Filter..." />33         </SelectContent>34       </Select>35     </div>36   );37 }38

Notes

Requires @diffgazer/keys (package mode)

Select's built-in keyboard navigation imports from the required @diffgazer/keys peer. Package consumers must install @diffgazer/keys with @diffgazer/ui; packages are not yet published to npm, so until the first release install both from locally packed tarballs. Importing @diffgazer/ui/components/select without keys fails at module load with an error naming the missing @diffgazer/keys package. Copy/dgadd consumers do not need the package — copy mode rewrites the keyboard hooks to local source.

Composition Contract

Use Select.Trigger, Select.Content, Select.Item, and the other Select parts as explicit children in the Select JSX tree. Custom option UI belongs inside Select.Item, with textValue when the visible content is not plain text. Components that create items internally from an opaque wrapper are not part of the current public contract.

Card Variant

Set variant='card' on Select for a settings-panel layout with checkbox-style indicators and a thick border treatment. The list still respects open/defaultOpen — pass defaultOpen to render the inline list immediately, or pair with open/onOpenChange to control expansion. The card trigger is an inverted --foreground header, so it takes its keyboard focus indicator as an outside outline (outline-2 outline-ring outline-offset-0) drawn on the page background; the default trigger keeps the inset Input focus ring.

Multiple Selection

Set multiple={true} to enable multi-select. Value becomes string[] instead of string. Items show [x]/[ ] checkbox indicators in multiple mode by default. The dropdown stays open after selection.

Item Indicators

Control the visual indicator on SelectItem via the indicator prop: 'auto' (default, [x]/[ ] in multi, ✓ in single), 'checkbox' (always [x]/[ ]), 'radio' ([ • ]/[ ] radio-style), or 'none' (text-only, no prefix). Use 'none' for tag-style multiselect, 'radio' for single-choice lists.

SelectTags vs SelectValue

Use SelectTags inside SelectTrigger for multiselect. It renders each selected item as an outlined chip showing the option label, and its placeholder accepts a string. Use SelectValue for single-select or multiselect with display modes: 'count' (default, 'N selected'), 'list' (comma-separated), or 'truncate' (first N + '+M more'). Its placeholder accepts ReactNode.

Search Position

SelectSearch can go anywhere inside SelectContent — its position prop, not its JSX order, decides where it renders. position='bottom' (default) renders the search row below the option list with a top border; position='top' renders it above the list with a bottom border. DOM and Fragment wrappers around SelectSearch or SelectEmpty are preserved when those parts are hoisted outside the listbox.

Searchable APG semantics

When SelectSearch is present, Select implements the WAI-ARIA Editable Combobox With List Autocomplete pattern: the search input is the combobox (role='combobox', aria-controls -> listbox, aria-activedescendant on focused option, aria-autocomplete='list'). The trigger button reduces to a simple toggle (aria-haspopup='listbox' + aria-expanded). When no SelectSearch is present, the trigger button itself is the combobox following the Combobox With Listbox Popup pattern. This avoids splitting combobox state across two controls.

Empty State

Add SelectEmpty inside SelectContent to show a message after a nonempty search query matches no items. It renders nothing before a query is entered, including when the option list is empty. Default: '> no results.' Pass children to customize.

Keyboard Navigation

SelectContent includes built-in keyboard navigation via useNavigation: ArrowUp/Down to move, Enter/Space to select, Home/End to jump, Tab commits the highlighted single-select option and closes, and Escape closes. Highlight state is exposed via highlighted/onHighlightChange props on Select for external integration.

Custom Trigger Content

For advanced customization, pass a render function as children to SelectValue: <SelectValue>{({ selected, labels }) => selected.map((value) => labels.get(value) ?? value).join(', ')}</SelectValue>. Use the public Select parts for custom trigger and value layouts.

Keyboard focus on the trigger is variant-owned. The default trigger uses the inset field ring shared with Input (focus:border-ring focus:ring-1 focus:ring-ring). The card trigger is an inverted --foreground header, where an inset --ring resolves to the same value as the surface it sits on and disappears — so it draws its indicator outside instead (focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-0), on the page background where it keeps full contrast in both themes.

The card-variant selected-state indicator pulses via the motion-safe:animate-pulse Tailwind class. The motion-safe: prefix gates the animation behind the user's prefers-reduced-motion setting — the class is part of the public CSS contract for the card variant. When prefers-reduced-motion: reduce is active, the pulse never plays.

Source

Install via CLI: pnpm exec dgadd add ui/select. Keyboard hooks are included as standalone copies. For the full experience, use --integration keys.

Highlighted source loads after this disclosure opens. Browse the source repository.

Select

Installation

Usage

Examples

Open Listbox (defaultOpen)

Disabled and Invalid

Searchable (bottom)

Searchable (top)

Multiple

Display Modes

Avatar Picker (render children)

Tags (Multiselect)

Radio Style

Card Variant

API Reference

Select

SelectTrigger

SelectContent

SelectValue

SelectTags

SelectSearch

SelectItem

SelectEmpty

Data attributes

Accessibility

Keyboard Navigation

Searchable with keyboard navigation

Notes

Requires @diffgazer/keys (package mode)

Composition Contract

Card Variant

Multiple Selection

Item Indicators

SelectTags vs SelectValue

Search Position

Searchable APG semantics

Empty State

Keyboard Navigation

Custom Trigger Content

Source

View component source (70 files)