Complex Selector @astryx-svelte/core v0.5.2 · ComplexSelector
Live preview pending — this block's Svelte rewrite has not landed yet.
Usage
Use ComplexSelector when a selection needs richer custom content than a Selector option row. It is intentionally one component: ComplexSelector owns the field, trigger, popover, focus restore, and changeAction flow, while the content render prop owns the selector-specific accessible structure.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Use variant="ghost" with a startIcon when the selector is triggered from a toolbar. Use alignment="end" when a wide surface should align its end edge to the trigger. |
| Do | For staged editors, keep draft state in the composed content and call the provided onChange helper only from Apply. Cancel or dismiss without committing. |
| Do | Compose the dialog content from the appropriate accessible structure for the job: RadioList for a simple choice, Calendar/date inputs for date picking, TreeList or a searchable list for hierarchy, or a custom grid when two-dimensional arrow navigation is useful. |
| Do | Use the provided onChange helper from children; it already calls both onChange and changeAction and updates optimistic busy state. |
| Do | Call close() from custom content when a selection should dismiss the popup. Keep it open for multi-step content or freeform entry flows. |
| Do | Use Astryx focus hooks for custom content: useGridFocus for two-dimensional grids, useTreeFocus through TreeList for hierarchies, and useListFocus for custom linear collections. |
| Do | Evaluate custom content against WCAG 2.2: keyboard operation, focus visible/not obscured, names and roles, labels/instructions, target size, and contrast/non-text contrast are especially relevant for selector popovers. |
| Don't | Do not rebuild trigger ARIA, popover focus management, or changeAction handling in product code. |
| Don't | Do not use ComplexSelector for a plain single-column text list; use Selector instead. |
Examples
Common configurations, variations, and states.ComplexSelector — Deadline Picker
Live preview pending — this block's Svelte rewrite has not landed yet.
A multi-step deadline field: pick a preset like Today or Next week, or switch to a custom date and time before applying. The popup stays open until the user commits, so the content owns the Apply action.
ComplexSelector — Tree Search
Live preview pending — this block's Svelte rewrite has not landed yet.
A destination picker that combines a search field with a TreeList hierarchy. TreeList owns tree keyboard navigation; ComplexSelector owns the trigger, popover, and focus restore. Selecting a folder closes the popup.