diff --git a/examples/09-reference/all_events.rs b/examples/09-reference/all_events.rs
index 814a04884c..7867e2ead3 100644
--- a/examples/09-reference/all_events.rs
+++ b/examples/09-reference/all_events.rs
@@ -51,6 +51,28 @@ fn app() -> Element {
             }
             div {
                 style: "padding: 50px;",
+                div {
+                    style: "display: grid; gap: 12px; max-width: 520px; margin: 0 auto 24px; font-family: sans-serif;",
+                    label {
+                        r#for: "selection-input",
+                        "Select text in the input to inspect the selection range and direction"
+                    }
+                    input {
+                        id: "selection-input",
+                        value: "Select part of this text to fire selection events",
+                        style: "font: inherit; padding: 8px 10px;",
+                        onselect: move |event: Event<SelectionData>| log_event(Rc::new(event.data().selection())),
+                        onselectstart: move |event: Event<SelectionData>| log_event(Rc::new(event.data().selection())),
+                        onselectionchange: move |event: Event<SelectionData>| log_event(Rc::new(event.data().selection())),
+                    }
+                    textarea {
+                        style: "font: inherit; padding: 8px 10px; min-height: 80px;",
+                        onselect: move |event: Event<SelectionData>| log_event(Rc::new(event.data().selection())),
+                        onselectstart: move |event: Event<SelectionData>| log_event(Rc::new(event.data().selection())),
+                        onselectionchange: move |event: Event<SelectionData>| log_event(Rc::new(event.data().selection())),
+                        "Selection events also include textarea ranges and direction.",
+                    }
+                }
                 div {
                     style: "text-align: center; padding: 20px; font-family: sans-serif; overflow: auto; height: 400px;",
                     onscroll: move |event: Event<ScrollData>| {
diff --git a/packages/html/src/events/selection.rs b/packages/html/src/events/selection.rs
index 024da78280..ffb25ffefc 100644
--- a/packages/html/src/events/selection.rs
+++ b/packages/html/src/events/selection.rs
@@ -1,7 +1,54 @@
 use dioxus_core::Event;
+use std::ops::Range;
 
 pub type SelectionEvent = Event<SelectionData>;
 
+/// The direction a text selection was created in.
+#[derive(Clone, Copy, Debug, Default, PartialEq, Eq, Hash)]
+#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+#[cfg_attr(feature = "serialize", serde(rename_all = "lowercase"))]
+pub enum SelectionDirection {
+    /// The selection direction is unknown or directionless.
+    #[default]
+    None,
+    /// The focus is after the anchor.
+    Forward,
+    /// The focus is before the anchor.
+    Backward,
+}
+
+/// The selection inside a text control.
+///
+/// The range is measured in UTF-16 code units to match the browser selection
+/// APIs on `input` and `textarea`.
+#[derive(Clone, Debug, PartialEq, Eq, Hash)]
+pub struct TextSelection {
+    range: Range<usize>,
+    direction: SelectionDirection,
+}
+
+impl TextSelection {
+    /// Create a new text selection from a UTF-16 range and selection direction.
+    pub fn new(range: Range<usize>, direction: SelectionDirection) -> Self {
+        Self { range, direction }
+    }
+
+    /// The selected UTF-16 range.
+    pub fn range(&self) -> Range<usize> {
+        self.range.clone()
+    }
+
+    /// The direction the range was selected in.
+    pub fn direction(&self) -> SelectionDirection {
+        self.direction
+    }
+
+    /// Returns `true` if the selection is a caret with no selected text.
+    pub fn is_collapsed(&self) -> bool {
+        self.range.is_empty()
+    }
+}
+
 pub struct SelectionData {
     inner: Box<dyn HasSelectionData>,
 }
@@ -14,6 +61,17 @@ impl SelectionData {
         }
     }
 
+    /// The selection inside a text control.
+    ///
+    /// This is only populated for event targets that expose the text-control
+    /// selection APIs, such as `input` and `textarea` on the web. Some
+    /// selection events, notably `selectstart`, can also fire when selecting
+    /// normal document text. Those document selections are exposed by browser
+    /// APIs like `document.getSelection()` and intentionally return `None` here.
+    pub fn selection(&self) -> Option<TextSelection> {
+        self.inner.selection()
+    }
+
     /// Downcast this event to a concrete event type
     #[inline(always)]
     pub fn downcast<T: 'static>(&self) -> Option<&T> {
@@ -29,30 +87,79 @@ impl<E: HasSelectionData> From<E> for SelectionData {
 
 impl std::fmt::Debug for SelectionData {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        f.debug_struct("SelectionData").finish()
+        f.debug_struct("SelectionData")
+            .field("selection", &self.selection())
+            .finish()
     }
 }
 
 impl PartialEq for SelectionData {
-    fn eq(&self, _other: &Self) -> bool {
-        true
+    fn eq(&self, other: &Self) -> bool {
+        self.selection() == other.selection()
     }
 }
 
 #[cfg(feature = "serialize")]
 /// A serialized version of SelectionData
 #[derive(serde::Serialize, serde::Deserialize, Debug, PartialEq, Clone)]
-pub struct SerializedSelectionData {}
+pub struct SerializedSelectionData {
+    #[serde(default)]
+    pub selection_start: Option<usize>,
+    #[serde(default)]
+    pub selection_end: Option<usize>,
+    #[serde(default)]
+    pub selection_direction: Option<SelectionDirection>,
+}
+
+#[cfg(feature = "serialize")]
+impl SerializedSelectionData {
+    /// Create a new serialized selection data object.
+    pub fn new(
+        selection_start: Option<usize>,
+        selection_end: Option<usize>,
+        selection_direction: Option<SelectionDirection>,
+    ) -> Self {
+        Self {
+            selection_start,
+            selection_end,
+            selection_direction,
+        }
+    }
+}
+
+#[cfg(feature = "serialize")]
+impl Default for SerializedSelectionData {
+    fn default() -> Self {
+        Self::new(None, None, None)
+    }
+}
 
 #[cfg(feature = "serialize")]
 impl From<&SelectionData> for SerializedSelectionData {
-    fn from(_: &SelectionData) -> Self {
-        Self {}
+    fn from(data: &SelectionData) -> Self {
+        let Some(selection) = data.selection() else {
+            return Self::default();
+        };
+        let range = selection.range();
+        Self::new(
+            Some(range.start),
+            Some(range.end),
+            Some(selection.direction()),
+        )
     }
 }
 
 #[cfg(feature = "serialize")]
 impl HasSelectionData for SerializedSelectionData {
+    fn selection(&self) -> Option<TextSelection> {
+        let start = self.selection_start?;
+        let end = self.selection_end?;
+        Some(TextSelection::new(
+            start..end,
+            self.selection_direction.unwrap_or_default(),
+        ))
+    }
+
     fn as_any(&self) -> &dyn std::any::Any {
         self
     }
@@ -76,6 +183,40 @@ impl<'de> serde::Deserialize<'de> for SelectionData {
 }
 
 pub trait HasSelectionData: std::any::Any {
+    /// The selection inside a text control.
+    ///
+    /// Return `None` when the event did not originate from a text control with
+    /// selection offsets. Document selections should use a separate API instead
+    /// of being mixed into this payload.
+    fn selection(&self) -> Option<TextSelection> {
+        None
+    }
+
     /// return self as Any
     fn as_any(&self) -> &dyn std::any::Any;
 }
+
+#[cfg(all(test, feature = "serialize"))]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn serialized_selection_data_deserializes_missing_fields() {
+        let data: SerializedSelectionData = serde_json::from_str("{}").unwrap();
+        assert_eq!(data, SerializedSelectionData::default());
+    }
+
+    #[test]
+    fn selection_data_exposes_serialized_fields() {
+        let event = SelectionData::new(SerializedSelectionData::new(
+            Some(1),
+            Some(4),
+            Some(SelectionDirection::Forward),
+        ));
+
+        assert_eq!(
+            event.selection(),
+            Some(TextSelection::new(1..4, SelectionDirection::Forward))
+        );
+    }
+}
diff --git a/packages/interpreter/src/js/hash.txt b/packages/interpreter/src/js/hash.txt
index 1180998a50..eb337b47e6 100644
--- a/packages/interpreter/src/js/hash.txt
+++ b/packages/interpreter/src/js/hash.txt
@@ -1 +1 @@
-[17669692872757955279, 11420464406527728232, 3770103091118609057, 5444526391971481782, 18429234726379217184, 5052021921702764563, 11493752756395680038, 11339769846046015954]
\ No newline at end of file
+[17669692872757955279, 11420464406527728232, 3770103091118609057, 5444526391971481782, 18429234726379217184, 5052021921702764563, 15111342379266332823, 11339769846046015954]
\ No newline at end of file
diff --git a/packages/interpreter/src/js/native.js b/packages/interpreter/src/js/native.js
index 639fb7a567..38924f5718 100644
--- a/packages/interpreter/src/js/native.js
+++ b/packages/interpreter/src/js/native.js
@@ -1 +1 @@
-function serializeEvent(event,target){let contents={},extend=(obj)=>contents={...contents,...obj};if(event instanceof WheelEvent)extend(serializeWheelEvent(event));if(event instanceof MouseEvent)extend(serializeMouseEvent(event));if(event instanceof KeyboardEvent)extend(serializeKeyboardEvent(event));if(event instanceof InputEvent)extend(serializeInputEvent(event,target));if(event instanceof PointerEvent)extend(serializePointerEvent(event));if(event instanceof AnimationEvent)extend(serializeAnimationEvent(event));if(event instanceof TransitionEvent)extend({property_name:event.propertyName,elapsed_time:event.elapsedTime,pseudo_element:event.pseudoElement});if(event instanceof CompositionEvent)extend({data:event.data});if(event instanceof DragEvent)extend(serializeDragEvent(event));if(event instanceof FocusEvent)extend({});if(event instanceof ClipboardEvent)extend({});if(event instanceof CustomEvent){let detail=event.detail;if(detail instanceof ResizeObserverEntry)extend(serializeResizeEventDetail(detail));else if(detail instanceof IntersectionObserverEntry)extend(serializeIntersectionEventDetail(detail))}if(typeof TouchEvent<"u"&&event instanceof TouchEvent)extend(serializeTouchEvent(event));if(event.type==="submit"||event.type==="reset"||event.type==="click"||event.type==="change"||event.type==="input")extend(serializeInputEvent(event,target));if(event instanceof DragEvent){let files=[];if(event.dataTransfer&&event.dataTransfer.files)for(let i=0;i<event.dataTransfer.files.length;i++){let file=event.dataTransfer.files[i],data={path:file.name,size:file.size,last_modified:file.lastModified,content_type:file.type};files.push({key:file.name,file:data})}extend({files})}if(event.type==="scroll"||event.type==="scrollend")extend(serializeScrollEvent(event));return contents}function toSerializableResizeObserverSize(size,is_inline_width){return[is_inline_width?size.inlineSize:size.blockSize,is_inline_width?size.blockSize:size.inlineSize]}function serializeResizeEventDetail(detail){let is_inline_width=!0;if(detail.target instanceof HTMLElement){if(window.getComputedStyle(detail.target).getPropertyValue("writing-mode")!=="horizontal-tb")is_inline_width=!1}return{border_box_size:detail.borderBoxSize!==void 0?toSerializableResizeObserverSize(detail.borderBoxSize[0],is_inline_width):detail.contentRect,content_box_size:detail.contentBoxSize!==void 0?toSerializableResizeObserverSize(detail.contentBoxSize[0],is_inline_width):detail.contentRect,content_rect:detail.contentRect}}function serializeIntersectionEventDetail(detail){return{bounding_client_rect:detail.boundingClientRect,intersection_ratio:detail.intersectionRatio,intersection_rect:detail.intersectionRect,is_intersecting:detail.isIntersecting,root_bounds:detail.rootBounds,time_ms:Math.floor(Date.now()+detail.time)}}function serializeInputEvent(event,target){let contents={};if(target instanceof HTMLElement){let values=extractSerializedFormValues(event,target);contents.values=values.values,contents.valid=values.valid}if(event.target instanceof HTMLInputElement){let target2=event.target,value=target2.value??target2.textContent??"";if(target2.type==="checkbox")value=target2.checked?"true":"false";else if(target2.type==="radio")value=target2.value;contents.value=value}if(event.target instanceof HTMLTextAreaElement)contents.value=event.target.value;if(event.target instanceof HTMLSelectElement)contents.value=retrieveSelectValue(event.target).join(",");if(contents.value===void 0)contents.value="";return contents}function serializeWheelEvent(event){return{delta_x:event.deltaX,delta_y:event.deltaY,delta_z:event.deltaZ,delta_mode:event.deltaMode}}function serializeTouchEvent(event){return{alt_key:event.altKey,ctrl_key:event.ctrlKey,meta_key:event.metaKey,shift_key:event.shiftKey,changed_touches:serializeTouchList(event.changedTouches),target_touches:serializeTouchList(event.targetTouches),touches:serializeTouchList(event.touches)}}function serializePointerEvent(event){return{alt_key:event.altKey,button:event.button,buttons:event.buttons,client_x:event.clientX,client_y:event.clientY,ctrl_key:event.ctrlKey,meta_key:event.metaKey,page_x:event.pageX,page_y:event.pageY,screen_x:event.screenX,screen_y:event.screenY,shift_key:event.shiftKey,pointer_id:event.pointerId,width:event.width,height:event.height,pressure:event.pressure,tangential_pressure:event.tangentialPressure,tilt_x:event.tiltX,tilt_y:event.tiltY,twist:event.twist,pointer_type:event.pointerType,is_primary:event.isPrimary}}function serializeTouchList(touchList){let serializedTouches=[];for(let i=0;i<touchList.length;i++){let touch=touchList[i];serializedTouches.push({identifier:touch.identifier,client_x:touch.clientX,client_y:touch.clientY,page_x:touch.pageX,page_y:touch.pageY,screen_x:touch.screenX,screen_y:touch.screenY,radius_x:touch.radiusX,radius_y:touch.radiusY,rotation_angle:touch.rotationAngle,force:touch.force})}return serializedTouches}function serializeMouseEvent(event){return{alt_key:event.altKey,button:event.button,buttons:event.buttons,client_x:event.clientX,client_y:event.clientY,ctrl_key:event.ctrlKey,meta_key:event.metaKey,offset_x:event.offsetX,offset_y:event.offsetY,page_x:event.pageX,page_y:event.pageY,screen_x:event.screenX,screen_y:event.screenY,shift_key:event.shiftKey}}function serializeKeyboardEvent(event){return{char_code:event.charCode,is_composing:event.isComposing,key:event.key,alt_key:event.altKey,ctrl_key:event.ctrlKey,meta_key:event.metaKey,key_code:event.keyCode,shift_key:event.shiftKey,location:event.location,repeat:event.repeat,which:event.which,code:event.code}}function serializeAnimationEvent(event){return{animation_name:event.animationName,elapsed_time:event.elapsedTime,pseudo_element:event.pseudoElement}}function serializeDragEvent(event){let data_transfer=event.dataTransfer||new DataTransfer,items=[],files=[],effect_allowed=data_transfer.effectAllowed,drop_effect=data_transfer.dropEffect;for(let i=0;i<data_transfer.items.length;i++){let item=data_transfer.items[i],data;if(item.kind==="string")data=data_transfer.getData(item.type);else data=item.getAsFile()?.name||"";items.push({kind:item.kind,type_:item.type,data})}for(let i=0;i<data_transfer.files.length;i++){let file=data_transfer.files[i];files.push({name:file.name,path:file.name,size:file.size,last_modified:file.lastModified,content_type:file.type,contents:void 0})}return{mouse:{alt_key:event.altKey,ctrl_key:event.ctrlKey,meta_key:event.metaKey,shift_key:event.shiftKey,...serializeMouseEvent(event)},data_transfer:{items,files,effect_allowed,drop_effect}}}function serializeScrollEvent(event){let scrollLeft=0,scrollTop=0,scrollWidth=0,scrollHeight=0,clientWidth=0,clientHeight=0;if(event.target instanceof Element)scrollLeft=event.target.scrollLeft,scrollTop=event.target.scrollTop,scrollWidth=event.target.scrollWidth,scrollHeight=event.target.scrollHeight,clientWidth=event.target.clientWidth,clientHeight=event.target.clientHeight;else if(event.target===document)scrollLeft=window.scrollX||document.documentElement.scrollLeft,scrollTop=window.scrollY||document.documentElement.scrollTop,scrollWidth=document.documentElement.scrollWidth,scrollHeight=document.documentElement.scrollHeight,clientWidth=document.documentElement.clientWidth,clientHeight=document.documentElement.clientHeight;return{scroll_left:scrollLeft,scroll_top:scrollTop,scroll_width:scrollWidth,scroll_height:scrollHeight,client_width:clientWidth,client_height:clientHeight}}function extractSerializedFormValues(event,target){let contents={values:[]},form=target.closest("form");if(form){if(event.type==="input"||event.type==="change"||event.type==="submit"||event.type==="reset"||event.type==="click")contents=retrieveFormValues(form)}return contents}function retrieveFormValues(form){let formData=new FormData(form),contents=[];return formData.forEach((value,key)=>{if(value instanceof File){let fileData={path:value.name,size:value.size,last_modified:value.lastModified,content_type:value.type};contents.push({key,file:fileData})}else contents.push({key,text:value})}),{valid:form.checkValidity(),values:contents}}function retrieveSelectValue(target){let options=target.selectedOptions,values=[];for(let i=0;i<options.length;i++)values.push(options[i].value);return values}var JSChannel_;if(RawInterpreter!==void 0&&RawInterpreter!==null)JSChannel_=RawInterpreter;class NativeInterpreter extends JSChannel_{intercept_link_redirects;ipc;edits;baseUri;eventsPath;headless;kickStylesheets;queuedBytes=[];liveview;constructor(baseUri,headless){super();this.baseUri=baseUri,this.eventsPath=`${baseUri}/__events`,this.kickStylesheets=!1,this.headless=headless}initialize(root){this.intercept_link_redirects=!0,this.liveview=!1,window.addEventListener("dragover",function(e){if(e.target instanceof Element&&e.target.tagName!="INPUT")e.preventDefault()},!1),window.addEventListener("drop",function(e){if(!(e.target instanceof Element))return;e.preventDefault()},!1),window.addEventListener("click",(event)=>{let target=event.target;if(target instanceof HTMLInputElement&&target.getAttribute("type")==="file"){let target_id=getTargetId(target);if(target_id!==null){if(target instanceof HTMLInputElement&&target.getAttribute("type")==="file"){event.preventDefault();let contents=serializeEvent(event,target),target_name=target.getAttribute("name")||"",requestData={event:"change&input",accept:target.getAttribute("accept"),directory:target.getAttribute("webkitdirectory")==="true",multiple:target.hasAttribute("multiple"),target:target_id,bubbles:event.bubbles,target_name,values:contents.values};this.fetchAgainstHost("__file_dialog",requestData).then((response)=>response.json()).then((resp)=>{let formObjects=resp.values,dataTransfer=new DataTransfer;for(let formObject of formObjects)if(formObject.key==target_name&&formObject.file!=null){let file=new File([],formObject.file.path,{type:formObject.file.content_type,lastModified:formObject.file.last_modified});dataTransfer.items.add(file)}target.files=dataTransfer.files;let body={data:contents,element:target_id,bubbles:event.bubbles};contents.values=formObjects,this.sendSerializedEvent({...body,name:"input"}),this.sendSerializedEvent({...body,name:"change"})});return}}}}),this.ipc=window.ipc;let handler=(event)=>this.handleEvent(event,event.type,event.bubbles);super.initialize(root,handler)}fetchAgainstHost(path,data){let encoded_data=new TextEncoder().encode(JSON.stringify(data)),base64data=btoa(String.fromCharCode.apply(null,Array.from(encoded_data)));return fetch(`${this.baseUri}/${path}`,{method:"GET",headers:{"x-dioxus-data":base64data}})}sendIpcMessage(method,params={}){let body=JSON.stringify({method,params});this.ipc.postMessage(body)}scrollTo(id,options){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scrollIntoView(options),!0;return!1}scroll(id,x,y,behavior){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scroll({top:y,left:x,behavior}),!0;return!1}getScrollHeight(id){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scrollHeight}getScrollLeft(id){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scrollLeft}getScrollTop(id){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scrollTop}getScrollWidth(id){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scrollWidth}getClientRect(id){let node=this.nodes[id];if(node instanceof HTMLElement){let rect=node.getBoundingClientRect();return{type:"GetClientRect",origin:[rect.x,rect.y],size:[rect.width,rect.height]}}}setFocus(id,focus){let node=this.nodes[id];if(node instanceof HTMLElement)if(focus)node.focus();else node.blur()}handleWindowsDragDrop(){if(window.dxDragLastElement){let dragLeaveEvent=new DragEvent("dragleave",{bubbles:!0,cancelable:!0});window.dxDragLastElement.dispatchEvent(dragLeaveEvent);let data=new DataTransfer,file=new File(["content"],"file.txt",{type:"text/plain"});data.items.add(file);let dragDropEvent=new DragEvent("drop",{bubbles:!0,cancelable:!0,dataTransfer:data});window.dxDragLastElement.dispatchEvent(dragDropEvent),window.dxDragLastElement=null}}handleWindowsDragOver(xPos,yPos){let displayScaleFactor=window.devicePixelRatio||1;xPos/=displayScaleFactor,yPos/=displayScaleFactor;let element=document.elementFromPoint(xPos,yPos);if(element!=window.dxDragLastElement){if(window.dxDragLastElement){let dragLeaveEvent=new DragEvent("dragleave",{bubbles:!0,cancelable:!0});window.dxDragLastElement.dispatchEvent(dragLeaveEvent)}let dragOverEvent=new DragEvent("dragover",{bubbles:!0,cancelable:!0});element.dispatchEvent(dragOverEvent),window.dxDragLastElement=element}}handleWindowsDragLeave(){if(window.dxDragLastElement){let dragLeaveEvent=new DragEvent("dragleave",{bubbles:!0,cancelable:!0});window.dxDragLastElement.dispatchEvent(dragLeaveEvent),window.dxDragLastElement=null}}loadChild(array){let node=this.stack[this.stack.length-1];for(let i=0;i<array.length;i++){let end=array[i];for(node=node.firstChild;end>0;end--)node=node.nextSibling}return node}appendChildren(id,many){let root=this.nodes[id],els=this.stack.splice(this.stack.length-many);for(let k=0;k<many;k++)root.appendChild(els[k])}handleEvent(event,name,bubbles){let target=event.target,element=getTargetId(target),contents=serializeEvent(event,target),body={name,data:contents,element,bubbles};if(this.liveview&&target instanceof HTMLInputElement&&(event.type==="change"||event.type==="input")){if(target.getAttribute("type")==="file"){this.readFiles(target,contents,bubbles,element,name);return}}let response=this.sendSerializedEvent(body);if(response){if(response.preventDefault)event.preventDefault();else if(target instanceof Element&&event.type==="click")this.handleClickNavigate(event,target);if(response.stopPropagation)event.stopPropagation()}}sendSerializedEvent(body){if(this.liveview)this.sendIpcMessage("user_event",body);else return handleVirtualdomEventSync(this.eventsPath,JSON.stringify(body))}handleClickNavigate(event,target){if(!this.intercept_link_redirects)return;let a_element=target.closest("a");if(a_element){event.preventDefault();let href=a_element.getAttribute("href");if(href!==""&&href!==null&&href!==void 0)this.sendIpcMessage("browser_open",{href})}}enqueueBytes(bytes){this.queuedBytes.push(bytes)}flushQueuedBytes(){let byteArray=this.queuedBytes;this.queuedBytes=[];for(let bytes of byteArray)this.run_from_bytes(bytes)}rafEdits(bytes){if(this.headless)this.run_from_bytes(bytes),this.markEditsFinished();else this.enqueueBytes(bytes),requestAnimationFrame(()=>{this.flushQueuedBytes(),this.markEditsFinished()})}waitForRequest(editsPath,required_server_key){this.edits=new WebSocket(editsPath);let authenticated=!1;this.edits.onclose=()=>{setTimeout(()=>{if(this.edits.url!=editsPath)return;this.waitForRequest(editsPath,required_server_key)},100)},this.edits.onmessage=(event)=>{let data=event.data;if(data instanceof Blob){if(!authenticated)return;data.arrayBuffer().then((buffer)=>{this.rafEdits(buffer)})}else if(typeof data==="string"){if(data===required_server_key){authenticated=!0;return}}}}markEditsFinished(){this.edits.send(new ArrayBuffer(0))}kickAllStylesheetsOnPage(){let stylesheets=document.querySelectorAll("link[rel=stylesheet]");for(let i=0;i<stylesheets.length;i++){let sheet=stylesheets[i],splitByQuery=sheet.href.split("?"),url=splitByQuery[0],query=splitByQuery[1];if(!query)query="";let queryParams=new URLSearchParams(query);queryParams.delete("dx_force_reload"),queryParams.append("dx_force_reload",Math.random().toString()),sheet.href=`${url}?${queryParams}`}}async readFiles(target,contents,bubbles,realId,name){let files=target.files,file_contents={};for(let i=0;i<files.length;i++){let file=files[i];file_contents[file.name]=Array.from(new Uint8Array(await file.arrayBuffer()))}contents.files={files:file_contents};let message=this.sendSerializedEvent({name,element:realId,data:contents,bubbles});this.ipc.postMessage(message)}}function handleVirtualdomEventSync(endpoint,contents){let xhr=new XMLHttpRequest;xhr.open("POST",endpoint,!1),xhr.setRequestHeader("Content-Type","application/json");let contents_bytes=new TextEncoder().encode(contents),contents_base64=btoa(String.fromCharCode.apply(null,contents_bytes));return xhr.setRequestHeader("dioxus-data",contents_base64),xhr.send(),JSON.parse(xhr.responseText)}function getTargetId(target){if(!(target instanceof Node))return null;let ourTarget=target,realId=null;while(realId==null){if(ourTarget===null)return null;if(ourTarget instanceof Element)realId=ourTarget.getAttribute("data-dioxus-id");ourTarget=ourTarget.parentNode}return parseInt(realId)}export{NativeInterpreter};
+function serializeEvent(event,target){let contents={},extend=(obj)=>contents={...contents,...obj};if(event instanceof WheelEvent)extend(serializeWheelEvent(event));if(event instanceof MouseEvent)extend(serializeMouseEvent(event));if(event instanceof KeyboardEvent)extend(serializeKeyboardEvent(event));if(event instanceof InputEvent)extend(serializeInputEvent(event,target));if(event instanceof PointerEvent)extend(serializePointerEvent(event));if(event instanceof AnimationEvent)extend(serializeAnimationEvent(event));if(event instanceof TransitionEvent)extend({property_name:event.propertyName,elapsed_time:event.elapsedTime,pseudo_element:event.pseudoElement});if(event instanceof CompositionEvent)extend({data:event.data});if(event instanceof DragEvent)extend(serializeDragEvent(event));if(event instanceof FocusEvent)extend({});if(event instanceof ClipboardEvent)extend({});if(event.type==="select"||event.type==="selectstart"||event.type==="selectionchange")extend(serializeSelectionEvent(event,target));if(event instanceof CustomEvent){let detail=event.detail;if(detail instanceof ResizeObserverEntry)extend(serializeResizeEventDetail(detail));else if(detail instanceof IntersectionObserverEntry)extend(serializeIntersectionEventDetail(detail))}if(typeof TouchEvent<"u"&&event instanceof TouchEvent)extend(serializeTouchEvent(event));if(event.type==="submit"||event.type==="reset"||event.type==="click"||event.type==="change"||event.type==="input")extend(serializeInputEvent(event,target));if(event instanceof DragEvent){let files=[];if(event.dataTransfer&&event.dataTransfer.files)for(let i=0;i<event.dataTransfer.files.length;i++){let file=event.dataTransfer.files[i],data={path:file.name,size:file.size,last_modified:file.lastModified,content_type:file.type};files.push({key:file.name,file:data})}extend({files})}if(event.type==="scroll"||event.type==="scrollend")extend(serializeScrollEvent(event));return contents}function toSerializableResizeObserverSize(size,is_inline_width){return[is_inline_width?size.inlineSize:size.blockSize,is_inline_width?size.blockSize:size.inlineSize]}function serializeResizeEventDetail(detail){let is_inline_width=!0;if(detail.target instanceof HTMLElement){if(window.getComputedStyle(detail.target).getPropertyValue("writing-mode")!=="horizontal-tb")is_inline_width=!1}return{border_box_size:detail.borderBoxSize!==void 0?toSerializableResizeObserverSize(detail.borderBoxSize[0],is_inline_width):detail.contentRect,content_box_size:detail.contentBoxSize!==void 0?toSerializableResizeObserverSize(detail.contentBoxSize[0],is_inline_width):detail.contentRect,content_rect:detail.contentRect}}function serializeIntersectionEventDetail(detail){return{bounding_client_rect:detail.boundingClientRect,intersection_ratio:detail.intersectionRatio,intersection_rect:detail.intersectionRect,is_intersecting:detail.isIntersecting,root_bounds:detail.rootBounds,time_ms:Math.floor(Date.now()+detail.time)}}function serializeInputEvent(event,target){let contents={};if(target instanceof HTMLElement){let values=extractSerializedFormValues(event,target);contents.values=values.values,contents.valid=values.valid}if(event.target instanceof HTMLInputElement){let target2=event.target,value=target2.value??target2.textContent??"";if(target2.type==="checkbox")value=target2.checked?"true":"false";else if(target2.type==="radio")value=target2.value;contents.value=value}if(event.target instanceof HTMLTextAreaElement)contents.value=event.target.value;if(event.target instanceof HTMLSelectElement)contents.value=retrieveSelectValue(event.target).join(",");if(contents.value===void 0)contents.value="";return contents}function serializeWheelEvent(event){return{delta_x:event.deltaX,delta_y:event.deltaY,delta_z:event.deltaZ,delta_mode:event.deltaMode}}function serializeTouchEvent(event){return{alt_key:event.altKey,ctrl_key:event.ctrlKey,meta_key:event.metaKey,shift_key:event.shiftKey,changed_touches:serializeTouchList(event.changedTouches),target_touches:serializeTouchList(event.targetTouches),touches:serializeTouchList(event.touches)}}function serializePointerEvent(event){return{alt_key:event.altKey,button:event.button,buttons:event.buttons,client_x:event.clientX,client_y:event.clientY,ctrl_key:event.ctrlKey,meta_key:event.metaKey,page_x:event.pageX,page_y:event.pageY,screen_x:event.screenX,screen_y:event.screenY,shift_key:event.shiftKey,pointer_id:event.pointerId,width:event.width,height:event.height,pressure:event.pressure,tangential_pressure:event.tangentialPressure,tilt_x:event.tiltX,tilt_y:event.tiltY,twist:event.twist,pointer_type:event.pointerType,is_primary:event.isPrimary}}function serializeTouchList(touchList){let serializedTouches=[];for(let i=0;i<touchList.length;i++){let touch=touchList[i];serializedTouches.push({identifier:touch.identifier,client_x:touch.clientX,client_y:touch.clientY,page_x:touch.pageX,page_y:touch.pageY,screen_x:touch.screenX,screen_y:touch.screenY,radius_x:touch.radiusX,radius_y:touch.radiusY,rotation_angle:touch.rotationAngle,force:touch.force})}return serializedTouches}function serializeMouseEvent(event){return{alt_key:event.altKey,button:event.button,buttons:event.buttons,client_x:event.clientX,client_y:event.clientY,ctrl_key:event.ctrlKey,meta_key:event.metaKey,offset_x:event.offsetX,offset_y:event.offsetY,page_x:event.pageX,page_y:event.pageY,screen_x:event.screenX,screen_y:event.screenY,shift_key:event.shiftKey}}function serializeKeyboardEvent(event){return{char_code:event.charCode,is_composing:event.isComposing,key:event.key,alt_key:event.altKey,ctrl_key:event.ctrlKey,meta_key:event.metaKey,key_code:event.keyCode,shift_key:event.shiftKey,location:event.location,repeat:event.repeat,which:event.which,code:event.code}}function serializeAnimationEvent(event){return{animation_name:event.animationName,elapsed_time:event.elapsedTime,pseudo_element:event.pseudoElement}}function serializeDragEvent(event){let data_transfer=event.dataTransfer||new DataTransfer,items=[],files=[],effect_allowed=data_transfer.effectAllowed,drop_effect=data_transfer.dropEffect;for(let i=0;i<data_transfer.items.length;i++){let item=data_transfer.items[i],data;if(item.kind==="string")data=data_transfer.getData(item.type);else data=item.getAsFile()?.name||"";items.push({kind:item.kind,type_:item.type,data})}for(let i=0;i<data_transfer.files.length;i++){let file=data_transfer.files[i];files.push({name:file.name,path:file.name,size:file.size,last_modified:file.lastModified,content_type:file.type,contents:void 0})}return{mouse:{alt_key:event.altKey,ctrl_key:event.ctrlKey,meta_key:event.metaKey,shift_key:event.shiftKey,...serializeMouseEvent(event)},data_transfer:{items,files,effect_allowed,drop_effect}}}function serializeScrollEvent(event){let scrollLeft=0,scrollTop=0,scrollWidth=0,scrollHeight=0,clientWidth=0,clientHeight=0;if(event.target instanceof Element)scrollLeft=event.target.scrollLeft,scrollTop=event.target.scrollTop,scrollWidth=event.target.scrollWidth,scrollHeight=event.target.scrollHeight,clientWidth=event.target.clientWidth,clientHeight=event.target.clientHeight;else if(event.target===document)scrollLeft=window.scrollX||document.documentElement.scrollLeft,scrollTop=window.scrollY||document.documentElement.scrollTop,scrollWidth=document.documentElement.scrollWidth,scrollHeight=document.documentElement.scrollHeight,clientWidth=document.documentElement.clientWidth,clientHeight=document.documentElement.clientHeight;return{scroll_left:scrollLeft,scroll_top:scrollTop,scroll_width:scrollWidth,scroll_height:scrollHeight,client_width:clientWidth,client_height:clientHeight}}function serializeSelectionEvent(event,target){let selectionStart=null,selectionEnd=null,selectionDirection=null,textControl=textControlTarget(target)??textControlTarget(event.target);if(textControl)selectionStart=textControl.selectionStart,selectionEnd=textControl.selectionEnd,selectionDirection=textControl.selectionDirection||"none";return{selection_start:selectionStart,selection_end:selectionEnd,selection_direction:selectionDirection}}function textControlTarget(target){if(target instanceof HTMLInputElement||target instanceof HTMLTextAreaElement)return target;return null}function extractSerializedFormValues(event,target){let contents={values:[]},form=target.closest("form");if(form){if(event.type==="input"||event.type==="change"||event.type==="submit"||event.type==="reset"||event.type==="click")contents=retrieveFormValues(form)}return contents}function retrieveFormValues(form){let formData=new FormData(form),contents=[];return formData.forEach((value,key)=>{if(value instanceof File){let fileData={path:value.name,size:value.size,last_modified:value.lastModified,content_type:value.type};contents.push({key,file:fileData})}else contents.push({key,text:value})}),{valid:form.checkValidity(),values:contents}}function retrieveSelectValue(target){let options=target.selectedOptions,values=[];for(let i=0;i<options.length;i++)values.push(options[i].value);return values}var JSChannel_;if(RawInterpreter!==void 0&&RawInterpreter!==null)JSChannel_=RawInterpreter;class NativeInterpreter extends JSChannel_{intercept_link_redirects;ipc;edits;baseUri;eventsPath;headless;kickStylesheets;queuedBytes=[];liveview;constructor(baseUri,headless){super();this.baseUri=baseUri,this.eventsPath=`${baseUri}/__events`,this.kickStylesheets=!1,this.headless=headless}initialize(root){this.intercept_link_redirects=!0,this.liveview=!1,window.addEventListener("dragover",function(e){if(e.target instanceof Element&&e.target.tagName!="INPUT")e.preventDefault()},!1),window.addEventListener("drop",function(e){if(!(e.target instanceof Element))return;e.preventDefault()},!1),window.addEventListener("click",(event)=>{let target=event.target;if(target instanceof HTMLInputElement&&target.getAttribute("type")==="file"){let target_id=getTargetId(target);if(target_id!==null){if(target instanceof HTMLInputElement&&target.getAttribute("type")==="file"){event.preventDefault();let contents=serializeEvent(event,target),target_name=target.getAttribute("name")||"",requestData={event:"change&input",accept:target.getAttribute("accept"),directory:target.getAttribute("webkitdirectory")==="true",multiple:target.hasAttribute("multiple"),target:target_id,bubbles:event.bubbles,target_name,values:contents.values};this.fetchAgainstHost("__file_dialog",requestData).then((response)=>response.json()).then((resp)=>{let formObjects=resp.values,dataTransfer=new DataTransfer;for(let formObject of formObjects)if(formObject.key==target_name&&formObject.file!=null){let file=new File([],formObject.file.path,{type:formObject.file.content_type,lastModified:formObject.file.last_modified});dataTransfer.items.add(file)}target.files=dataTransfer.files;let body={data:contents,element:target_id,bubbles:event.bubbles};contents.values=formObjects,this.sendSerializedEvent({...body,name:"input"}),this.sendSerializedEvent({...body,name:"change"})});return}}}}),this.ipc=window.ipc;let handler=(event)=>this.handleEvent(event,event.type,event.bubbles);super.initialize(root,handler)}fetchAgainstHost(path,data){let encoded_data=new TextEncoder().encode(JSON.stringify(data)),base64data=btoa(String.fromCharCode.apply(null,Array.from(encoded_data)));return fetch(`${this.baseUri}/${path}`,{method:"GET",headers:{"x-dioxus-data":base64data}})}sendIpcMessage(method,params={}){let body=JSON.stringify({method,params});this.ipc.postMessage(body)}scrollTo(id,options){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scrollIntoView(options),!0;return!1}scroll(id,x,y,behavior){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scroll({top:y,left:x,behavior}),!0;return!1}getScrollHeight(id){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scrollHeight}getScrollLeft(id){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scrollLeft}getScrollTop(id){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scrollTop}getScrollWidth(id){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scrollWidth}getClientRect(id){let node=this.nodes[id];if(node instanceof HTMLElement){let rect=node.getBoundingClientRect();return{type:"GetClientRect",origin:[rect.x,rect.y],size:[rect.width,rect.height]}}}setFocus(id,focus){let node=this.nodes[id];if(node instanceof HTMLElement)if(focus)node.focus();else node.blur()}handleWindowsDragDrop(){if(window.dxDragLastElement){let dragLeaveEvent=new DragEvent("dragleave",{bubbles:!0,cancelable:!0});window.dxDragLastElement.dispatchEvent(dragLeaveEvent);let data=new DataTransfer,file=new File(["content"],"file.txt",{type:"text/plain"});data.items.add(file);let dragDropEvent=new DragEvent("drop",{bubbles:!0,cancelable:!0,dataTransfer:data});window.dxDragLastElement.dispatchEvent(dragDropEvent),window.dxDragLastElement=null}}handleWindowsDragOver(xPos,yPos){let displayScaleFactor=window.devicePixelRatio||1;xPos/=displayScaleFactor,yPos/=displayScaleFactor;let element=document.elementFromPoint(xPos,yPos);if(element!=window.dxDragLastElement){if(window.dxDragLastElement){let dragLeaveEvent=new DragEvent("dragleave",{bubbles:!0,cancelable:!0});window.dxDragLastElement.dispatchEvent(dragLeaveEvent)}let dragOverEvent=new DragEvent("dragover",{bubbles:!0,cancelable:!0});element.dispatchEvent(dragOverEvent),window.dxDragLastElement=element}}handleWindowsDragLeave(){if(window.dxDragLastElement){let dragLeaveEvent=new DragEvent("dragleave",{bubbles:!0,cancelable:!0});window.dxDragLastElement.dispatchEvent(dragLeaveEvent),window.dxDragLastElement=null}}loadChild(array){let node=this.stack[this.stack.length-1];for(let i=0;i<array.length;i++){let end=array[i];for(node=node.firstChild;end>0;end--)node=node.nextSibling}return node}appendChildren(id,many){let root=this.nodes[id],els=this.stack.splice(this.stack.length-many);for(let k=0;k<many;k++)root.appendChild(els[k])}handleEvent(event,name,bubbles){let target=event.target,element=getTargetId(target),contents=serializeEvent(event,target),body={name,data:contents,element,bubbles};if(this.liveview&&target instanceof HTMLInputElement&&(event.type==="change"||event.type==="input")){if(target.getAttribute("type")==="file"){this.readFiles(target,contents,bubbles,element,name);return}}let response=this.sendSerializedEvent(body);if(response){if(response.preventDefault)event.preventDefault();else if(target instanceof Element&&event.type==="click")this.handleClickNavigate(event,target);if(response.stopPropagation)event.stopPropagation()}}sendSerializedEvent(body){if(this.liveview)this.sendIpcMessage("user_event",body);else return handleVirtualdomEventSync(this.eventsPath,JSON.stringify(body))}handleClickNavigate(event,target){if(!this.intercept_link_redirects)return;let a_element=target.closest("a");if(a_element){event.preventDefault();let href=a_element.getAttribute("href");if(href!==""&&href!==null&&href!==void 0)this.sendIpcMessage("browser_open",{href})}}enqueueBytes(bytes){this.queuedBytes.push(bytes)}flushQueuedBytes(){let byteArray=this.queuedBytes;this.queuedBytes=[];for(let bytes of byteArray)this.run_from_bytes(bytes)}rafEdits(bytes){if(this.headless)this.run_from_bytes(bytes),this.markEditsFinished();else this.enqueueBytes(bytes),requestAnimationFrame(()=>{this.flushQueuedBytes(),this.markEditsFinished()})}waitForRequest(editsPath,required_server_key){this.edits=new WebSocket(editsPath);let authenticated=!1;this.edits.onclose=()=>{setTimeout(()=>{if(this.edits.url!=editsPath)return;this.waitForRequest(editsPath,required_server_key)},100)},this.edits.onmessage=(event)=>{let data=event.data;if(data instanceof Blob){if(!authenticated)return;data.arrayBuffer().then((buffer)=>{this.rafEdits(buffer)})}else if(typeof data==="string"){if(data===required_server_key){authenticated=!0;return}}}}markEditsFinished(){this.edits.send(new ArrayBuffer(0))}kickAllStylesheetsOnPage(){let stylesheets=document.querySelectorAll("link[rel=stylesheet]");for(let i=0;i<stylesheets.length;i++){let sheet=stylesheets[i],splitByQuery=sheet.href.split("?"),url=splitByQuery[0],query=splitByQuery[1];if(!query)query="";let queryParams=new URLSearchParams(query);queryParams.delete("dx_force_reload"),queryParams.append("dx_force_reload",Math.random().toString()),sheet.href=`${url}?${queryParams}`}}async readFiles(target,contents,bubbles,realId,name){let files=target.files,file_contents={};for(let i=0;i<files.length;i++){let file=files[i];file_contents[file.name]=Array.from(new Uint8Array(await file.arrayBuffer()))}contents.files={files:file_contents};let message=this.sendSerializedEvent({name,element:realId,data:contents,bubbles});this.ipc.postMessage(message)}}function handleVirtualdomEventSync(endpoint,contents){let xhr=new XMLHttpRequest;xhr.open("POST",endpoint,!1),xhr.setRequestHeader("Content-Type","application/json");let contents_bytes=new TextEncoder().encode(contents),contents_base64=btoa(String.fromCharCode.apply(null,contents_bytes));return xhr.setRequestHeader("dioxus-data",contents_base64),xhr.send(),JSON.parse(xhr.responseText)}function getTargetId(target){if(!(target instanceof Node))return null;let ourTarget=target,realId=null;while(realId==null){if(ourTarget===null)return null;if(ourTarget instanceof Element)realId=ourTarget.getAttribute("data-dioxus-id");ourTarget=ourTarget.parentNode}return parseInt(realId)}export{NativeInterpreter};
diff --git a/packages/interpreter/src/ts/serialize.ts b/packages/interpreter/src/ts/serialize.ts
index a925ef5461..8604bc7027 100644
--- a/packages/interpreter/src/ts/serialize.ts
+++ b/packages/interpreter/src/ts/serialize.ts
@@ -60,6 +60,14 @@ export function serializeEvent(
     extend({});
   }
 
+  if (
+    event.type === "select" ||
+    event.type === "selectstart" ||
+    event.type === "selectionchange"
+  ) {
+    extend(serializeSelectionEvent(event, target));
+  }
+
   if (event instanceof CustomEvent) {
     const detail = event.detail;
     if (detail instanceof ResizeObserverEntry) {
@@ -408,6 +416,38 @@ function serializeScrollEvent(event: Event): SerializedEvent {
   };
 }
 
+function serializeSelectionEvent(
+  event: Event,
+  target: EventTarget
+): SerializedEvent {
+  let selectionStart = null;
+  let selectionEnd = null;
+  let selectionDirection = null;
+
+  const textControl = textControlTarget(target) ?? textControlTarget(event.target);
+  if (textControl) {
+    selectionStart = textControl.selectionStart;
+    selectionEnd = textControl.selectionEnd;
+    selectionDirection = textControl.selectionDirection || "none";
+  }
+
+  return {
+    selection_start: selectionStart,
+    selection_end: selectionEnd,
+    selection_direction: selectionDirection,
+  };
+}
+
+function textControlTarget(
+  target: EventTarget | null
+): HTMLInputElement | HTMLTextAreaElement | null {
+  if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
+    return target;
+  }
+
+  return null;
+}
+
 
 export type SerializedFormData = {
   valid?: boolean;
diff --git a/packages/web/Cargo.toml b/packages/web/Cargo.toml
index 544bc80a07..0fc985a7a8 100644
--- a/packages/web/Cargo.toml
+++ b/packages/web/Cargo.toml
@@ -75,6 +75,7 @@ features = [
     "ResizeObserverSize",
     "ScrollRestoration",
     "ScrollToOptions",
+    "Selection",
     "Text",
     "Touch",
     "TouchEvent",
diff --git a/packages/web/src/events/selection.rs b/packages/web/src/events/selection.rs
index 08a89ff870..2504213e10 100644
--- a/packages/web/src/events/selection.rs
+++ b/packages/web/src/events/selection.rs
@@ -1,12 +1,39 @@
 use super::{Synthetic, WebEventExt};
-use dioxus_html::HasSelectionData;
+use dioxus_html::{HasSelectionData, SelectionDirection, TextSelection};
+use wasm_bindgen::JsCast;
+use web_sys::{Event, HtmlInputElement, HtmlTextAreaElement};
+
+impl HasSelectionData for Synthetic<Event> {
+    fn selection(&self) -> Option<TextSelection> {
+        with_text_control(&self.event, |input| {
+            let start = input.selection_start().ok().flatten()? as usize;
+            let end = input.selection_end().ok().flatten()? as usize;
+            let direction = input
+                .selection_direction()
+                .ok()
+                .flatten()
+                .as_deref()
+                .map(selection_direction_from_web)
+                .unwrap_or_default();
+
+            Some(TextSelection::new(start..end, direction))
+        })
+        .flatten()
+    }
 
-impl HasSelectionData for Synthetic<web_sys::Event> {
     fn as_any(&self) -> &dyn std::any::Any {
         &self.event
     }
 }
 
+fn selection_direction_from_web(direction: &str) -> SelectionDirection {
+    match direction {
+        "forward" => SelectionDirection::Forward,
+        "backward" => SelectionDirection::Backward,
+        _ => SelectionDirection::None,
+    }
+}
+
 impl WebEventExt for dioxus_html::SelectionData {
     type WebEvent = web_sys::Event;
 
@@ -15,3 +42,43 @@ impl WebEventExt for dioxus_html::SelectionData {
         self.downcast::<web_sys::Event>().cloned()
     }
 }
+
+fn with_text_control<T>(event: &Event, f: impl FnOnce(TextControl<'_>) -> T) -> Option<T> {
+    event.target().and_then(|target| {
+        if let Some(input) = target.dyn_ref::<HtmlInputElement>() {
+            Some(f(TextControl::Input(input)))
+        } else {
+            target
+                .dyn_ref::<HtmlTextAreaElement>()
+                .map(|textarea| f(TextControl::TextArea(textarea)))
+        }
+    })
+}
+
+enum TextControl<'a> {
+    Input(&'a HtmlInputElement),
+    TextArea(&'a HtmlTextAreaElement),
+}
+
+impl TextControl<'_> {
+    fn selection_start(&self) -> Result<Option<u32>, wasm_bindgen::JsValue> {
+        match self {
+            Self::Input(input) => input.selection_start(),
+            Self::TextArea(textarea) => textarea.selection_start(),
+        }
+    }
+
+    fn selection_end(&self) -> Result<Option<u32>, wasm_bindgen::JsValue> {
+        match self {
+            Self::Input(input) => input.selection_end(),
+            Self::TextArea(textarea) => textarea.selection_end(),
+        }
+    }
+
+    fn selection_direction(&self) -> Result<Option<String>, wasm_bindgen::JsValue> {
+        match self {
+            Self::Input(input) => input.selection_direction(),
+            Self::TextArea(textarea) => textarea.selection_direction(),
+        }
+    }
+}