Controls Catalog

This is the authoritative answer to "what controls exist, and what does each do?" — every supported FS.Skia.UI.Controls control, grouped by category. Each entry links to a detail page with prose, a usage example where one exists, a rendered preview (or an honest note where a control cannot be previewed), and a link to its generated API reference.

The list below is generated from the single-source control catalog (CatalogGen.catalogFacts) — the same source that drives src/Controls/catalog.yml and src/Controls/Catalog.fs — so it can never drift from the controls the framework actually ships. The ControlsCatalogDocsCheck gate fails if it does. To change it, edit the catalog single source and run ./fake.sh build -t RefreshSurfaceBaselines; never hand-edit the generated region below.

New here? Start with the Controls in the Spec Kit workflow narrative, which explains where controls are chosen, authored, and validated.

**52 supported controls**, grouped by category.

Display

Control	Purpose
Text Block	Static model-owned text display.
Rich Text	Skia-specific rich text display with measurement, clipping, effects, diagnostics, and accessibility metadata.
Label	Short form label text.
Image	Image placeholder or drawing-surface reference.
Icon	Named icon glyph or product symbol.
Separator	Visual divider between regions.
Badge	Compact status label.

Input

Control	Purpose
Button	Pointer and keyboard activatable command.
Icon Button	Icon-only activatable command.
Text Box	Plain single-line text entry.
Text Area	Plain multi-line text entry.
Numeric Input	Model-owned numeric value editor.
Slider	Continuous numeric value selection.
Toggle Button	On/off command with product-owned pressed state.
Split Button	Primary action plus a popup menu of secondary commands.
Date Picker	Typed date entry with a popup calendar.
Time Picker	Typed time entry with hour and minute segments.

Selection

Control	Purpose
Check Box	Boolean choice with checked state.
Radio Group	Single selection from a visible option set.
Switch	Compact Boolean setting.
List Box	Single-selection list box.
Multi Select List	Multiple-selection list with model-owned selected keys.
Combo Box	Compact selection list.
Color Picker	Palette swatch color selection.

Data

Control	Purpose
List View	Bounded visible-range list display.
Tree View	Hierarchical item display.
Data Grid	Table-like bounded visible-range data control with product-owned rows, selection, focus, sort, and filter metadata.

Layout

Control	Purpose
Stack	Ordered vertical or horizontal child composition.
Grid	Structured child composition.
Dock	Docked region composition.
Wrap	Wrapping child layout.
Border	Single child with border and padding.
Panel	General-purpose child surface.
Scroll Viewer	Scrollable child viewport.
Split View	Resizable two-region layout.

Navigation

Control	Purpose
Tabs	Model-owned active page selection.
Menu	Command menu selection.
Context Menu	Contextual command menu.
Toolbar	Compact command group.

Overlay

Control	Purpose
Tooltip	Auxiliary hover/focus explanation.
Dialog	Modal content region.
Overlay	Layered child content.

Feedback

Control	Purpose
Toast	Transient status message.
Progress Bar	Determinate progress indicator.
Spinner	Indeterminate progress indicator.
Validation Message	Validation text tied to model state.

Chart

Control	Purpose
Line Chart	Controls-owned line data visualization.
Bar Chart	Controls-owned bar data visualization.
Pie Chart	Controls-owned part-to-whole visualization.
Scatter Plot	Controls-owned point cloud visualization.

Graph

Control	Purpose
Graph View	Controls-owned node and edge visualization.

Custom

Control	Purpose
Custom Control	Product-owned wrapper; renderTree paints a labeled placeholder, not the custom Render/Draw content — build must-show geometry from primitive controls (Border/TextBlock/Stack).