selectFlat
Minimal examples for the browser ESM module. Hover previews a value,
click commits it, and the control exposes the current value on
form.value.
Basic selection
Single-value usage with the same letter example as the notebook.
Show configuration
Text labels
Text labels are hidden by default. They can appear on hover, expand to fit their content, or stay clipped inside a fixed cell.
Show configuration
Show configuration
Show configuration
Image options
Options can render from image URLs, from already loaded image elements in the page,
or from data URLs and base64 strings. The example below uses preloaded flag images
and keeps them fully visible with fit: "contain".
Show configuration
Emoji options
This example loads the GitHub emoji map and renders the icon for each reaction.
Use fit: "cover" when you want the icon to fill the square, or
fit: "contain" when you want the full image preserved.
Show configuration
Touch interaction
On touch devices, tap once to preview, tap the same cell again to commit, or drag across cells to scrub a value. In multiple mode, dragging from an unselected cell adds cells, while dragging from a selected cell removes them.
Parameter space
Three selectors can be previewed live before you click.
Show configuration
Multiple values
Multi-select returns an array, and hover previews keep the current selection visible.
Show configuration
Multiple with a forced cell
The core cell is always selected and cannot be toggled off.
Show configuration
Custom layout
Layout can control square size, gap, direction, and wrapping.
Show configuration
Show configuration
Show configuration
Programmatic selection
Use a native dropdown to set the value, or reset the control to its initial state.
Show configuration