Select any phrase in this sentence to reveal the toolbar, then try bold or underline on the highlighted text. The interaction stays scoped to this text surface, which makes it useful for lightweight notes, comments, or internal writing tools.
Installation
npx shadcn@latest add @iconiq/r-selection-toolbarReducedMotion
Pass reducedMotionwhen you want the installed component to settle into its quieter motion path immediately. Leaving the prop unset still respects the user's system-level reduced motion preference.
Select any phrase in this sentence to reveal the toolbar, then try bold or underline on the highlighted text. The interaction stays scoped to this text surface, which makes it useful for lightweight notes, comments, or internal writing tools.
Props
SelectionToolbar
1 prop
Floating formatting toolbar for editable text with the same Iconiq selection tracking, button shell, and reveal motion layered over Radix UI toolbar primitives.
containerRef
React.RefObject<HTMLElement | null>Required
Ref pointing at the editable container whose text selection should drive the toolbar. Selections outside this element immediately hide the toolbar.
Notes
Uses Radix toolbar root and button primitives while keeping the same selectionchange tracking, mousedown command behavior, and visible shell as the core component.
Formatting actions still run on mousedown so the current browser selection is preserved while bold, italic, or underline is applied.
Active states are still read from document.queryCommandState for the same three formatting commands the toolbar exposes.
ReducedMotion
1 prop
Shared motion override for the motion-enabled exports documented on this page.
reducedMotion
booleanWhen true, the component uses its calmer motion path immediately. Leaving it unset still respects the user's system-level reduced motion preference.
Notes
This prop can force reduced motion on, but it does not opt out of OS-level accessibility preferences when the system is already requesting less motion.