Forms
SelectionActions
Wraps any text content and shows a floating action toolbar (desktop) or bottom sheet (mobile) whenever the user selects text, offering rewrite, summarize, explain, and translate actions.
Preview:1280px
Select any portion of this paragraph to trigger the floating action toolbar. The component uses the browser's native Selection API to detect highlighted text and positions the toolbar relative to the selection rectangle. On mobile devices a bottom sheet appears instead.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Content inside which text selection is tracked. |
| actions | SelectionAction[] | ['rewrite','summarize','explain','translate'] | Actions to show in the toolbar. |
| onAction | (action, text) => void | - | Fired with the action key and selected text. |