Choosing controls

Pick by contract, not appearance. Two controls that look alike can bind different value shapes or have different limitations.

A repeatable method

1. Name the interaction, including loading, empty, error, and disabled states.
2. Find it in the capability map below and compare the listed alternatives.
3. In each candidate's page, read When to use, Setup, Behavior, and Limitations first; read the props table only for what you use.
4. Prefer the highest-level existing control. Compose before building custom.
5. If several controls must work together, use a recipe (Recipes).

Choose by task

Task	Tools to compare	Selection guidance
Select one value	NativeSelect, Select, Radio	Native select behavior, searchable/custom dropdown, or directly visible choices.
Select several values	MultiSelect, Checkbox	Dropdown selection or visible checkbox choices; read each binding contract.
Edit string tags	TagEditor	Free-form strings; compare MultiSelect for predefined option values.
Build a labeled input	Field, Input, Textarea	Compose the label/hint/error wrapper with the appropriate control; see Forms.
Enter dates or times	DatePicker, TimePicker, DateTimePicker	Match the required date/time value shape; these are inputs, not scheduling surfaces.
Show a binary setting	Switch, Checkbox	On/off setting or checked selection; do not assume identical prop names.
Show tabular records	Table, Pagination, EmptyState	Compose record display and application-managed paging/state; see Data Display.
Visualize measurements	BarChart, Charts, Heatmap, MeterGroup	Compare bars, Chart.js plots, two-dimensional values, or parts of a total.
Show progress or loading	ProgressBar, ProgressRing, Skeleton	Measured progress or content-shaped loading placeholders.
Reorder or transfer items	SortableList / SortableGroup	One-list ordering or cross-list transfer; see Sortable Lists.
Organize navigation or panels	Tabs, Accordion, Tree, Splitter	Peer views, expandable sections, hierarchy, or resizable panels.
Open supplementary UI	Modal, Drawer, Popup	Dialog, edge panel, or anchored content; see Overlays.
Expose actions	ContextMenu, CommandPalette	Contextual menu or searchable commands; the command palette requires application-managed visibility.
Explain or notify	Tooltip, Toast, EmptyState	Hover explanation, transient feedback, or persistent no-content state.
Render prose or documentation	Prose, Doc	Readable content or API/code/example documentation primitives.
Edit content	MarkdownEditor, BlockEditor, TableEditor, DiagramEditor, ImgEditor	Choose the editor matching the underlying data model, not just its visual appearance.
Schedule dates and resources	Calendar, Gantt, Organizer, ResourceManager	Compare calendar events, task timelines, custom unit grids, and resource assignments.