diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index afb861e..c39d986 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -18,12 +18,14 @@ jobs:
 
       - name: Install uv
         uses: astral-sh/setup-uv@v3
-
-      - name: Set up Python ${{ matrix.python-version }}
-        run: uv python install ${{ matrix.python-version }}
+        with:
+          python-version: ${{ matrix.python-version }}
 
       - name: Install dependencies
-        run: uv pip install -e ".[dev]"
+        run: |
+          uv venv
+          uv pip install -e ".[dev]"
+          echo "$GITHUB_WORKSPACE/.venv/bin" >> $GITHUB_PATH
 
       - name: Install Playwright browsers
         run: playwright install chromium --with-deps
diff --git a/pyproject.toml b/pyproject.toml
index c1fcf9b..9575f0b 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -27,7 +27,9 @@ django = [
 ]
 fastapi = [
     "fastapi>=0.109.0",
+    "uvicorn[standard]>=0.27.0",
     "jinjax>=0.41",
+    "python-multipart>=0.0.5",
 ]
 litestar = [
     "litestar>=2.0",
@@ -70,6 +72,9 @@ testpaths = ["tests"]
 pythonpath = ["src"]
 asyncio_mode = "auto"
 
+[tool.uv.sources]
+component-framework = { git = "https://github.com/fsecada01/component-framework.git" }
+
 [tool.ruff]
 line-length = 100
 target-version = "py311"
diff --git a/src/cf_ui/templates/cotton/bulma/cf/checkbox-group.html b/src/cf_ui/templates/cotton/bulma/cf/checkbox-group.html
index 8b9f0f1..4725c12 100644
--- a/src/cf_ui/templates/cotton/bulma/cf/checkbox-group.html
+++ b/src/cf_ui/templates/cotton/bulma/cf/checkbox-group.html
@@ -1,7 +1,7 @@
-<c-vars name label error="" choices="[]" selected="[]" class="" />
+<c-vars name label error="" choices="[]" selected="[]" control_class="" class="" />
 <div class="field {{ class }}">
   <label class="label">{{ label }}</label>
-  <div class="control">
+  <div class="control{% if control_class %} {{ control_class }}{% endif %}">
     {% for choice in choices %}
     <label class="checkbox mr-3">
       <input type="checkbox"
diff --git a/src/cf_ui/templates/cotton/bulma/cf/form-field.html b/src/cf_ui/templates/cotton/bulma/cf/form-field.html
index 71e5777..e5622a5 100644
--- a/src/cf_ui/templates/cotton/bulma/cf/form-field.html
+++ b/src/cf_ui/templates/cotton/bulma/cf/form-field.html
@@ -1,8 +1,8 @@
-<c-vars name label value="" error="" type="text" required="false" class="" />
+<c-vars name label value="" error="" type="text" required="false" input_class="" class="" />
 <div class="field {{ class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
-    <input class="input{% if error %} is-danger{% endif %}"
+    <input class="input{% if error %} is-danger{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
            id="{{ name }}"
            type="{{ type }}"
            name="{{ name }}"
diff --git a/src/cf_ui/templates/cotton/bulma/cf/select.html b/src/cf_ui/templates/cotton/bulma/cf/select.html
index 22b9905..072dcf6 100644
--- a/src/cf_ui/templates/cotton/bulma/cf/select.html
+++ b/src/cf_ui/templates/cotton/bulma/cf/select.html
@@ -1,9 +1,9 @@
-<c-vars name label value="" error="" options="[]" class="" />
+<c-vars name label value="" error="" options="[]" input_class="" class="" />
 <div class="field {{ class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
     <div class="select{% if error %} is-danger{% endif %} is-fullwidth">
-      <select id="{{ name }}" name="{{ name }}">
+      <select id="{{ name }}" name="{{ name }}"{% if input_class %} class="{{ input_class }}"{% endif %}>
         {% for opt in options %}
         <option value="{{ opt.value }}"{% if opt.value|stringformat:"s" == value|stringformat:"s" %} selected{% endif %}>
           {{ opt.label }}
diff --git a/src/cf_ui/templates/cotton/bulma/cf/textarea.html b/src/cf_ui/templates/cotton/bulma/cf/textarea.html
index d233976..6ff1a11 100644
--- a/src/cf_ui/templates/cotton/bulma/cf/textarea.html
+++ b/src/cf_ui/templates/cotton/bulma/cf/textarea.html
@@ -1,8 +1,8 @@
-<c-vars name label value="" error="" rows="4" class="" />
+<c-vars name label value="" error="" rows="4" input_class="" class="" />
 <div class="field {{ class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
-    <textarea class="textarea{% if error %} is-danger{% endif %}"
+    <textarea class="textarea{% if error %} is-danger{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
               id="{{ name }}"
               name="{{ name }}"
               rows="{{ rows }}">{{ value }}</textarea>
diff --git a/src/cf_ui/templates/jinja/bulma/CheckboxGroup.jinja b/src/cf_ui/templates/jinja/bulma/CheckboxGroup.jinja
index c8316fb..ba1a7f1 100644
--- a/src/cf_ui/templates/jinja/bulma/CheckboxGroup.jinja
+++ b/src/cf_ui/templates/jinja/bulma/CheckboxGroup.jinja
@@ -1,7 +1,7 @@
-{#def name, label, choices=[], selected=[], error="", extra_class="" #}
+{#def name, label, choices=[], selected=[], error="", extra_class="", control_class="" #}
 <div class="field {{ extra_class }}">
   <label class="label">{{ label }}</label>
-  <div class="control">
+  <div class="control{% if control_class %} {{ control_class }}{% endif %}">
     {% for choice in choices %}
     <label class="checkbox mr-3">
       <input type="checkbox"
diff --git a/src/cf_ui/templates/jinja/bulma/FormField.jinja b/src/cf_ui/templates/jinja/bulma/FormField.jinja
index 76fb54a..9dbe51e 100644
--- a/src/cf_ui/templates/jinja/bulma/FormField.jinja
+++ b/src/cf_ui/templates/jinja/bulma/FormField.jinja
@@ -1,8 +1,8 @@
-{#def name, label, value="", error="", type="text", required=false, extra_class="" #}
+{#def name, label, value="", error="", type="text", required=false, extra_class="", input_class="" #}
 <div class="field {{ extra_class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
-    <input class="input{% if error %} is-danger{% endif %}"
+    <input class="input{% if error %} is-danger{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
            id="{{ name }}"
            type="{{ type }}"
            name="{{ name }}"
diff --git a/src/cf_ui/templates/jinja/bulma/Select.jinja b/src/cf_ui/templates/jinja/bulma/Select.jinja
index 73d6949..a5842d6 100644
--- a/src/cf_ui/templates/jinja/bulma/Select.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Select.jinja
@@ -1,9 +1,9 @@
-{#def name, label, value="", error="", options=[], extra_class="" #}
+{#def name, label, value="", error="", options=[], extra_class="", input_class="" #}
 <div class="field {{ extra_class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
     <div class="select{% if error %} is-danger{% endif %} is-fullwidth">
-      <select id="{{ name }}" name="{{ name }}">
+      <select id="{{ name }}" name="{{ name }}"{% if input_class %} class="{{ input_class }}"{% endif %}>
         {% for opt in options %}
         <option value="{{ opt.value }}"{% if opt.value|string == value|string %} selected{% endif %}>
           {{ opt.label }}
diff --git a/src/cf_ui/templates/jinja/bulma/Textarea.jinja b/src/cf_ui/templates/jinja/bulma/Textarea.jinja
index 9a1254b..f49bfe2 100644
--- a/src/cf_ui/templates/jinja/bulma/Textarea.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Textarea.jinja
@@ -1,8 +1,8 @@
-{#def name, label, value="", error="", rows=4, extra_class="" #}
+{#def name, label, value="", error="", rows=4, extra_class="", input_class="" #}
 <div class="field {{ extra_class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
-    <textarea class="textarea{% if error %} is-danger{% endif %}"
+    <textarea class="textarea{% if error %} is-danger{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
               id="{{ name }}"
               name="{{ name }}"
               rows="{{ rows }}">{{ value }}</textarea>
diff --git a/tests/unit/cotton/test_forms.py b/tests/unit/cotton/test_forms.py
index cebe370..fb2dee4 100644
--- a/tests/unit/cotton/test_forms.py
+++ b/tests/unit/cotton/test_forms.py
@@ -72,3 +72,73 @@ def test_checkbox_group_cotton_renders_choices(cotton_render):
     )
     assert "Apple" in html
     assert "checked" in html
+
+
+# ── Granular class prop tests ────────────────────────────────────────────────
+
+
+def test_form_field_cotton_input_class_applied(cotton_render):
+    html = cotton_render(
+        "cf/form-field.html",
+        name="email",
+        label="Email",
+        value="",
+        error="",
+        type="text",
+        required="false",
+        input_class="is-rounded",
+    )
+    assert "is-rounded" in html
+
+
+def test_form_field_cotton_input_class_default_omitted(cotton_render):
+    html = cotton_render(
+        "cf/form-field.html",
+        name="email",
+        label="Email",
+        value="",
+        error="",
+        type="text",
+        required="false",
+        input_class="",
+    )
+    assert "is-rounded" not in html
+
+
+def test_select_cotton_input_class_applied(cotton_render):
+    html = cotton_render(
+        "cf/select.html",
+        name="choice",
+        label="Choose",
+        value="",
+        error="",
+        options=[],
+        input_class="my-select",
+    )
+    assert "my-select" in html
+
+
+def test_textarea_cotton_input_class_applied(cotton_render):
+    html = cotton_render(
+        "cf/textarea.html",
+        name="bio",
+        label="Bio",
+        value="",
+        error="",
+        rows="4",
+        input_class="has-fixed-size",
+    )
+    assert "has-fixed-size" in html
+
+
+def test_checkbox_group_cotton_control_class_applied(cotton_render):
+    html = cotton_render(
+        "cf/checkbox-group.html",
+        name="fruits",
+        label="Fruits",
+        choices=[{"value": "a", "label": "Apple"}],
+        selected=[],
+        error="",
+        control_class="is-flex",
+    )
+    assert "is-flex" in html
diff --git a/tests/unit/jinja/test_forms.py b/tests/unit/jinja/test_forms.py
index 3aa4421..5ed8cf4 100644
--- a/tests/unit/jinja/test_forms.py
+++ b/tests/unit/jinja/test_forms.py
@@ -8,6 +8,7 @@ def test_form_field_renders_label(render):
         type="text",
         required=False,
         extra_class="",
+        input_class="",
     )
     assert "Email Address" in html
     assert '<label class="label"' in html
@@ -23,6 +24,7 @@ def test_form_field_renders_input(render):
         type="email",
         required=False,
         extra_class="",
+        input_class="",
     )
     assert 'name="email"' in html
     assert 'type="email"' in html
@@ -39,6 +41,7 @@ def test_form_field_shows_error(render):
         type="text",
         required=False,
         extra_class="",
+        input_class="",
     )
     assert "This field is required." in html
     assert "is-danger" in html
@@ -55,6 +58,7 @@ def test_form_field_no_error_omits_danger(render):
         type="text",
         required=False,
         extra_class="",
+        input_class="",
     )
     assert "is-danger" not in html
 
@@ -69,6 +73,7 @@ def test_form_field_required_attribute(render):
         type="text",
         required=True,
         extra_class="",
+        input_class="",
     )
     assert "required" in html
 
@@ -83,6 +88,7 @@ def test_select_renders_options(render):
         error="",
         options=options,
         extra_class="",
+        input_class="",
     )
     assert "Option A" in html
     assert "Option B" in html
@@ -99,6 +105,7 @@ def test_select_shows_error(render):
         error="Required",
         options=[],
         extra_class="",
+        input_class="",
     )
     assert "Required" in html
     assert "is-danger" in html
@@ -113,6 +120,7 @@ def test_textarea_renders_value(render):
         error="",
         rows=4,
         extra_class="",
+        input_class="",
     )
     assert "Hello world" in html
     assert 'name="bio"' in html
@@ -128,6 +136,7 @@ def test_textarea_shows_error(render):
         error="Too short",
         rows=4,
         extra_class="",
+        input_class="",
     )
     assert "Too short" in html
     assert "is-danger" in html
@@ -143,6 +152,7 @@ def test_checkbox_group_renders_choices(render):
         selected=["a"],
         error="",
         extra_class="",
+        control_class="",
     )
     assert "Apple" in html
     assert "Banana" in html
@@ -160,6 +170,7 @@ def test_checkbox_group_unchecked_item(render):
         selected=["a"],
         error="",
         extra_class="",
+        control_class="",
     )
     assert html.count("checked") == 1
 
@@ -173,6 +184,130 @@ def test_checkbox_group_shows_error(render):
         selected=[],
         error="Select at least one",
         extra_class="",
+        control_class="",
     )
     assert "Select at least one" in html
     assert "is-danger" in html
+
+
+# ── Granular class prop tests ────────────────────────────────────────────────
+
+
+def test_form_field_input_class_applied(render):
+    html = render(
+        "FormField.jinja",
+        name="email",
+        label="Email",
+        value="",
+        error="",
+        type="text",
+        required=False,
+        extra_class="",
+        input_class="is-rounded",
+    )
+    assert "is-rounded" in html
+    assert 'class="input is-rounded"' in html
+
+
+def test_form_field_input_class_default_omitted(render):
+    html = render(
+        "FormField.jinja",
+        name="email",
+        label="Email",
+        value="",
+        error="",
+        type="text",
+        required=False,
+        extra_class="",
+        input_class="",
+    )
+    assert 'class="input"' in html
+
+
+def test_select_input_class_applied(render):
+    html = render(
+        "Select.jinja",
+        name="choice",
+        label="Choose",
+        value="",
+        error="",
+        options=[],
+        extra_class="",
+        input_class="my-select",
+    )
+    assert 'class="my-select"' in html
+
+
+def test_select_input_class_default_omitted(render):
+    html = render(
+        "Select.jinja",
+        name="choice",
+        label="Choose",
+        value="",
+        error="",
+        options=[],
+        extra_class="",
+        input_class="",
+    )
+    # No class attribute on the bare <select> when input_class is empty
+    assert "<select " not in html or 'class=""' not in html
+
+
+def test_textarea_input_class_applied(render):
+    html = render(
+        "Textarea.jinja",
+        name="bio",
+        label="Bio",
+        value="",
+        error="",
+        rows=4,
+        extra_class="",
+        input_class="has-fixed-size",
+    )
+    assert "has-fixed-size" in html
+    assert 'class="textarea has-fixed-size"' in html
+
+
+def test_textarea_input_class_default_omitted(render):
+    html = render(
+        "Textarea.jinja",
+        name="bio",
+        label="Bio",
+        value="",
+        error="",
+        rows=4,
+        extra_class="",
+        input_class="",
+    )
+    assert 'class="textarea"' in html
+
+
+def test_checkbox_group_control_class_applied(render):
+    choices = [{"value": "a", "label": "Apple"}]
+    html = render(
+        "CheckboxGroup.jinja",
+        name="fruits",
+        label="Fruits",
+        choices=choices,
+        selected=[],
+        error="",
+        extra_class="",
+        control_class="is-flex",
+    )
+    assert "is-flex" in html
+    assert 'class="control is-flex"' in html
+
+
+def test_checkbox_group_control_class_default_omitted(render):
+    choices = [{"value": "a", "label": "Apple"}]
+    html = render(
+        "CheckboxGroup.jinja",
+        name="fruits",
+        label="Fruits",
+        choices=choices,
+        selected=[],
+        error="",
+        extra_class="",
+        control_class="",
+    )
+    assert 'class="control"' in html