diff --git a/zero_true/__init__.py b/zero_true/__init__.py
index 778ab9e1..3c0310c9 100644
--- a/zero_true/__init__.py
+++ b/zero_true/__init__.py
@@ -19,4 +19,5 @@
 from zt_backend.models.components.html import HTML, pygwalker
 from zt_backend.models.state.state import state
 from zt_backend.models.state.state import global_state
-from zt_backend.models.components.chat_ui import chat_ui
\ No newline at end of file
+from zt_backend.models.components.chat_ui import chat_ui
+from zt_backend.models.components.switch import Switch
diff --git a/zt_backend/models/components/switch.py b/zt_backend/models/components/switch.py
new file mode 100644
index 00000000..21579901
--- /dev/null
+++ b/zt_backend/models/components/switch.py
@@ -0,0 +1,34 @@
+from typing import List, Optional,Union
+from pydantic import Field, field_validator, validator
+from zt_backend.models.components.zt_component import ZTComponent
+from zt_backend.models.components.validations import validate_color
+from zt_backend.models.state.user_state import UserContext
+
+class Switch(ZTComponent):
+    """A slider component that allows a user to select a range of values"""
+    component: str = Field("v-switch", description="Vue component name")
+    value: str = Field ('', description="The input text value")
+    hint: Optional[str] = Field('', description="Hint text for switch")
+    disabled: Optional[bool] = Field(None, description="If true, the input is disabled")
+    color: str = Field('primary', pre=True, description="Color of the switch. Can be custom or standard Material color")
+    label: Optional[str] = Field(None,description= 'A label for your switch')
+    multiple: Optional[bool] = Field(None, description="Determines if multiple selections are allowed")
+    width: Union[int,str] = Field('100%', description="Width of the switch")
+    triggerEvent: str = Field('update:modelValue',description="Trigger event for when to trigger a run")
+    readonly: Optional[bool] = Field(None, description="Determines if the Switch is read-only")
+    
+    @field_validator('color')
+    def validate_color(cls, color):
+        return validate_color(color)
+    
+    @validator('value', always=True) #TODO: debug and replace with field validator
+    def get_value_from_global_state(cls, value, values):
+        id = values['id'] # Get the id if it exists in the field values
+        execution_state = UserContext.get_state()
+        try:
+            if execution_state and id and id in execution_state.component_values:  # Check if id exists in global_state
+                return execution_state.component_values[id]  # Return the value associated with id in global_state
+        except Exception as e:
+            e
+        return value  # If id doesn't exist in global_state, return the original value
+    
diff --git a/zt_backend/models/generate_schema.py b/zt_backend/models/generate_schema.py
index 27ce4147..f9f7bb2e 100644
--- a/zt_backend/models/generate_schema.py
+++ b/zt_backend/models/generate_schema.py
@@ -20,6 +20,7 @@
 from .components.timer import Timer
 from .components.iframe import iFrame
 from .components.html import HTML
+from .components.switch import Switch
 import json
 
 def generate_json(model, name):
@@ -62,4 +63,6 @@ def generate_schema():
     generate_json(Text,'text')
     generate_json(Timer,'timer')
     generate_json(iFrame,'iframe')
-    generate_json(HTML,'html')
\ No newline at end of file
+    generate_json(HTML,'html')
+    generate_json(Switch,'switch')
+    
\ No newline at end of file
diff --git a/zt_frontend/src/types/switch.d.ts b/zt_frontend/src/types/switch.d.ts
new file mode 100644
index 00000000..9f342495
--- /dev/null
+++ b/zt_frontend/src/types/switch.d.ts
@@ -0,0 +1,74 @@
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+
+/**
+ * Unique id for a component
+ */
+export type Id = string;
+/**
+ * Optional variable name associated with a component
+ */
+export type VariableName = string;
+/**
+ * Vue component name
+ */
+export type Component = string;
+/**
+ * The input text value
+ */
+export type Value = string;
+/**
+ * Hint text for switch
+ */
+export type Hint = string | null;
+/**
+ * If true, the input is disabled
+ */
+export type Disabled = boolean | null;
+/**
+ * Color of the switch. Can be custom or standard Material color
+ */
+export type Color = string;
+/**
+ * A label for your switch
+ */
+export type Label = string | null;
+/**
+ * Determines if multiple selections are allowed
+ */
+export type Multiple = boolean | null;
+/**
+ * Width of the switch
+ */
+export type Width = number | string;
+/**
+ * Trigger event for when to trigger a run
+ */
+export type Triggerevent = string;
+/**
+ * Determines if the Switch is read-only
+ */
+export type Readonly = boolean | null;
+
+/**
+ * A slider component that allows a user to select a range of values
+ */
+export interface Switch {
+  id: Id;
+  variable_name?: VariableName;
+  component?: Component;
+  value?: Value;
+  hint?: Hint;
+  disabled?: Disabled;
+  color?: Color;
+  label?: Label;
+  multiple?: Multiple;
+  width?: Width;
+  triggerEvent?: Triggerevent;
+  readonly?: Readonly;
+  [k: string]: unknown;
+}