diff --git a/frontend/code/components/textInput.ts b/frontend/code/components/textInput.ts
index ff92b9da..edeb487b 100644
--- a/frontend/code/components/textInput.ts
+++ b/frontend/code/components/textInput.ts
@@ -1,6 +1,6 @@
 import { ComponentBase, ComponentState } from "./componentBase";
 import { Debouncer } from "../debouncer";
-import { InputBox } from "../inputBox";
+import { InputBox, InputBoxStyle } from "../inputBox";
 import { markEventAsHandled } from "../eventHandling";
 
 export type TextInputState = ComponentState & {
@@ -8,7 +8,7 @@ export type TextInputState = ComponentState & {
     text?: string;
     label?: string;
     accessibility_label?: string;
-    style?: "rectangular" | "pill";
+    style?: InputBoxStyle;
     prefix_text?: string;
     suffix_text?: string;
     is_secret?: boolean;
@@ -159,14 +159,7 @@ export class TextInputComponent extends ComponentBase {
         deltaState.style = "rectangular";
 
         if (deltaState.style !== undefined) {
-            this.element.classList.remove(
-                "rio-input-box-style-rectangle",
-                "rio-input-box-style-pill"
-            );
-
-            this.element.classList.add(
-                `rio-input-box-style-${this.state.style}`
-            );
+            this.inputBox.style = deltaState.style;
         }
     }
 
diff --git a/frontend/code/inputBox.ts b/frontend/code/inputBox.ts
index 05118346..222c0001 100644
--- a/frontend/code/inputBox.ts
+++ b/frontend/code/inputBox.ts
@@ -1,5 +1,6 @@
 import { markEventAsHandled, stopPropagation } from "./eventHandling";
-import { createUniqueId } from "./utils";
+
+export type InputBoxStyle = "rectangular" | "pill";
 
 /// A text input field providing the following features and more:
 ///
@@ -33,7 +34,10 @@ export class InputBox {
         connectClickHandlers?: boolean;
     } = {}) {
         this.outerElement = document.createElement("div");
-        this.outerElement.classList.add("rio-input-box");
+        this.outerElement.classList.add(
+            "rio-input-box",
+            "rio-input-box-style-rectangular"
+        );
 
         this.outerElement.innerHTML = `
         <div class="rio-input-box-padding"></div>
@@ -229,6 +233,15 @@ export class InputBox {
         }
     }
 
+    set style(style: InputBoxStyle) {
+        this.outerElement.classList.remove(
+            "rio-input-box-style-rectangular",
+            "rio-input-box-style-pill"
+        );
+
+        this.outerElement.classList.add(`rio-input-box-style-${style}`);
+    }
+
     get isSensitive(): boolean {
         return !this._inputElement.disabled;
     }