diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index af09e6b91f..8f7e9d3e3c 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -16,6 +16,7 @@ This release improves how component dependencies are imported. If you've been ch
 - Fixed a bug in component styles that prevented the box sizing reset from being applied
 - Fixed a regression in `sl-color-picker` where dragging the grid handle wasn't smooth
 - Fixed a bug where slot detection could incorrecly match against slots of child elements [#481](https://github.com/shoelace-style/shoelace/pull/481)
+- Fixed a bug in `sl-input` where focus would move to the end of the input when typing in Safari [#480](https://github.com/shoelace-style/shoelace/issues/480)
 - Improved base path utility logic
 
 ## 2.0.0-beta.46
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index 74af841052..70694f6b76 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -2,6 +2,7 @@ import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
+import { live } from 'lit-html/directives/live';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import styles from './checkbox.styles';
@@ -175,8 +176,8 @@ export default class SlCheckbox extends LitElement {
             type="checkbox"
             name=${ifDefined(this.name)}
             value=${ifDefined(this.value)}
-            .indeterminate=${this.indeterminate}
-            .checked=${this.checked}
+            .indeterminate=${live(this.indeterminate)}
+            .checked=${live(this.checked)}
             .disabled=${this.disabled}
             .required=${this.required}
             role="checkbox"
diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts
index c9473edf12..d45d0eef2d 100644
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@@ -2,6 +2,7 @@ import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
+import { live } from 'lit-html/directives/live';
 import { styleMap } from 'lit-html/directives/style-map';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
@@ -731,7 +732,7 @@ export default class SlColorPicker extends LitElement {
             autocorrect="off"
             autocapitalize="off"
             spellcheck="false"
-            .value=${this.inputValue}
+            .value=${live(this.inputValue)}
             ?disabled=${this.disabled}
             @keydown=${this.handleInputKeyDown}
             @sl-change=${this.handleInputChange}
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 671b36c275..248fd6b554 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -2,6 +2,7 @@ import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { classMap } from 'lit-html/directives/class-map';
+import { live } from 'lit-html/directives/live';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import { getLabelledBy, renderFormControl } from '../../internal/form-control';
@@ -318,7 +319,7 @@ export default class SlInput extends LitElement {
             min=${ifDefined(this.min)}
             max=${ifDefined(this.max)}
             step=${ifDefined(this.step)}
-            .value=${this.value}
+            .value=${live(this.value)}
             autocapitalize=${ifDefined(this.autocapitalize)}
             autocomplete=${ifDefined(this.autocomplete)}
             autocorrect=${ifDefined(this.autocorrect)}
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index 932f1153cc..fc3d16ab33 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -2,6 +2,7 @@ import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
+import { live } from 'lit-html/directives/live';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import styles from './radio.styles';
@@ -176,7 +177,7 @@ export default class SlRadio extends LitElement {
             type="radio"
             name=${ifDefined(this.name)}
             value=${ifDefined(this.value)}
-            .checked=${this.checked}
+            .checked=${live(this.checked)}
             .disabled=${this.disabled}
             aria-checked=${this.checked ? 'true' : 'false'}
             aria-disabled=${this.disabled ? 'true' : 'false'}
diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index fbc3e01ef5..216de3ddca 100644
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@@ -3,6 +3,7 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { emit } from '../../internal/event';
+import { live } from 'lit-html/directives/live';
 import { watch } from '../../internal/watch';
 import { getLabelledBy, renderFormControl } from '../../internal/form-control';
 import { hasSlot } from '../../internal/slot';
@@ -211,7 +212,7 @@ export default class SlRange extends LitElement {
             min=${ifDefined(this.min)}
             max=${ifDefined(this.max)}
             step=${ifDefined(this.step)}
-            .value=${String(this.value)}
+            .value=${live(String(this.value))}
             aria-labelledby=${ifDefined(
               getLabelledBy({
                 label: this.label,
diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts
index 0fff3c0185..8635004129 100644
--- a/src/components/switch/switch.ts
+++ b/src/components/switch/switch.ts
@@ -2,6 +2,7 @@ import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
+import { live } from 'lit-html/directives/live';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import styles from './switch.styles';
@@ -157,7 +158,7 @@ export default class SlSwitch extends LitElement {
             type="checkbox"
             name=${ifDefined(this.name)}
             value=${ifDefined(this.value)}
-            .checked=${this.checked}
+            .checked=${live(this.checked)}
             .disabled=${this.disabled}
             .required=${this.required}
             role="switch"
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index 18184bbd59..acbc6695f8 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -3,6 +3,7 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { emit } from '../../internal/event';
+import { live } from 'lit-html/directives/live';
 import { watch } from '../../internal/watch';
 import { getLabelledBy, renderFormControl } from '../../internal/form-control';
 import { hasSlot } from '../../internal/slot';
@@ -310,7 +311,7 @@ export default class SlTextarea extends LitElement {
             id=${this.inputId}
             class="textarea__control"
             name=${ifDefined(this.name)}
-            .value=${this.value}
+            .value=${live(this.value)}
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
             ?required=${this.required}