https://framer.com/m/SelectX-F0M5Xo.js
SelectX
SelectX collapses a long list of choices into a trigger and a dropdown. The options come from a schema rather than the panel, and the schema below is this library’s own component catalogue, grouped by its real categories.
Examples
Live specimens for every control the component exposes.
Default
The trigger closed, with nothing chosen yet. Click it to see the grouped list — a static render cannot show the open state.
Preselected
defaultValue names an item’s value, not its label. Give it a value that is not in the schema and the selection is silently dropped.
no default — placeholder shows
defaultValue tablex
Trigger size
triggerHeight, fontSize and triggerPaddingX size the closed control so it can sit next to inputs of any height.
height 32 · font 13
height 43 · font 16
height 56 · font 18
Shape
triggerRadius rounds the trigger, contentRadius the dropdown and itemRadius each row. Keep them concentric.
radius 2 · content 4 · item 2
radius 14 · content 16 · item 10
Props
The controls exposed on the instance panel. Anything the schema sets overrides the matching panel control.
Usage
Guidance carried over from the component definition.
Reach for SelectX
One choice from a list too long to show all at once.
The options fall into groups worth labelling.
Keyboard navigation and ARIA need to work without extra effort.
The dropdown must escape a clipping parent via a portal.
Reach for something else
More than one option can be chosen — use TagPicker.
The rows need icons, avatars or descriptions — use DropdownMenuX.
The list needs search or async loading.
Io — UI Basics
Every dropdown above is a live SelectX instance over the same schema — twenty-four of the UI Basics, grouped by category. The schema was produced by the selectx-schema skill.