diff --git a/templates/zerver/development/dev_tools.html b/templates/zerver/development/dev_tools.html
index adecb102cd..02ba9f92ab 100644
--- a/templates/zerver/development/dev_tools.html
+++ b/templates/zerver/development/dev_tools.html
@@ -89,6 +89,11 @@
                     <td>None needed</td>
                     <td>Test banner styles</td>
                 </tr>
+                <tr>
+                    <td><a href="/devtools/inputs">/devtools/inputs</a></td>
+                    <td>None needed</td>
+                    <td>Test input styles</td>
+                </tr>
             </tbody>
         </table>
         <h2>Useful management commands</h2>
diff --git a/templates/zerver/development/showroom/inputs.html b/templates/zerver/development/showroom/inputs.html
new file mode 100644
index 0000000000..1142aeca7a
--- /dev/null
+++ b/templates/zerver/development/showroom/inputs.html
@@ -0,0 +1,48 @@
+{% extends "zerver/base.html" %}
+{% set entrypoint = "showroom" %}
+
+{% block title %}
+<title>{{ doc_root_title }} | Zulip Dev</title>
+{% endblock %}
+
+{% block content %}
+<div class="portico-container" data-platform="{{ platform }}">
+    <div class="portico-wrap">
+        {% include 'zerver/portico-header.html' %}
+        <div class="app portico-page">
+            <div class="app-main portico-page-container">
+                <div class="showroom-wrapper">
+                    <div class="showroom-filter-input-container"></div>
+                    <section class="showroom-controls-section">
+                        <div class="showroom-controls-label">Theme Settings</div>
+                        <div class="showroom-controls">
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Dark Theme</span>
+                                <div role="group" class="tab-picker showroom-control-setting">
+                                    <input type="radio" data-theme="dark" id="showroom_enable_dark_theme_inputs" class="tab-option" name="showroom-dark-theme-select"/>
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="showroom_enable_dark_theme_inputs" tabindex="0">
+                                        <span>Enable</span>
+                                    </label>
+                                    <input type="radio" data-theme="light" id="showroom_disable_dark_theme_inputs" class="tab-option" name="showroom-dark-theme-select" checked/>
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="showroom_disable_dark_theme_inputs" tabindex="0">
+                                        <span>Disable</span>
+                                    </label>
+                                    <span class="slider"></span>
+                                </div>
+                            </div>
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Select Background</span>
+                                <select class="showroom-control-element showroom-control-setting select_background">
+                                    {% for background in background_colors %}
+                                        <option value="{{ background.css_var }}" {% if background.css_var == "--color-background" %}selected{% endif %}>{{ background.name }}</option>
+                                    {% endfor %}
+                                </select>
+                            </div>
+                        </div>
+                    </section>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/zerver/tests/test_urls.py b/zerver/tests/test_urls.py
index d1c347fa57..c05f4bb1b6 100644
--- a/zerver/tests/test_urls.py
+++ b/zerver/tests/test_urls.py
@@ -60,6 +60,7 @@ class PublicURLTest(ZulipTestCase):
         urls = {
             "/devtools/buttons/": "Button styles browser",
             "/devtools/banners/": "Banner styles browser",
+            "/devtools/inputs/": "Input styles browser",
         }
 
         for url, expected_content in urls.items():
diff --git a/zerver/views/development/showroom.py b/zerver/views/development/showroom.py
index acf4beb1dd..8d0bacc95f 100644
--- a/zerver/views/development/showroom.py
+++ b/zerver/views/development/showroom.py
@@ -48,3 +48,16 @@ def showroom_component_banners(request: HttpRequest) -> HttpResponse:
         "isolated_page": True,
     }
     return render(request, "zerver/development/showroom/banners.html", context)
+
+
+def showroom_component_inputs(request: HttpRequest) -> HttpResponse:
+    context = {
+        "background_colors": background_colors,
+        "icons": get_svg_filenames(),
+        "page_is_showroom": True,
+        "showroom_component": "inputs",
+        "doc_root_title": "Input styles browser",
+        # We set isolated_page to avoid clutter from footer/header.
+        "isolated_page": True,
+    }
+    return render(request, "zerver/development/showroom/inputs.html", context)
diff --git a/zproject/dev_urls.py b/zproject/dev_urls.py
index 8958a37805..9791628427 100644
--- a/zproject/dev_urls.py
+++ b/zproject/dev_urls.py
@@ -31,7 +31,11 @@ from zerver.views.development.registration import (
     register_development_realm,
     register_development_user,
 )
-from zerver.views.development.showroom import showroom_component_banners, showroom_component_buttons
+from zerver.views.development.showroom import (
+    showroom_component_banners,
+    showroom_component_buttons,
+    showroom_component_inputs,
+)
 from zerver.views.errors import config_error
 
 # These URLs are available only in the development environment
@@ -101,6 +105,7 @@ urls = [
     # Endpoints for Showroom components.
     path("devtools/buttons/", showroom_component_buttons),
     path("devtools/banners/", showroom_component_banners),
+    path("devtools/inputs/", showroom_component_inputs),
 ]
 
 v1_api_mobile_patterns = [