React · SwiftUI · agent guides
Selection frame
The one selection for every kind of object: a 1.25 green ring with a flat collar at offset 6, eight handles on the ring line, and a graphite readout of the measured frame. Hover shows only faint corner dots and an edge light.
Use it for
- Showing which object on a canvas or board is selected: a text block, an image, a card, a region, a file.
- The hover presence of a borderless object: faint corner dots so its invisible boundary is discoverable, and the edge light where the pointer enters its band.
- A multi-selection: variant="lite" on each member and one SelectionFrame around the bounding box with count.
Don't use it for
- Selected rows, tabs, menu items or segments. They have their own selected state (a raised thumb, a pressed cap, a green bar).
- Keyboard focus. Focus is the 2 pt focus ring on :focus-visible; selection and focus can both show.
- A marquee while dragging. The marquee is a plain precision rectangle, drawn by the host.