Is there a better way to handle single-selected checkboxes from a list of options?

[rmasters]

A common use-case I have with htmx is to use the json-enc extension to translate forms to JSON, so I can hit a backend that expects JSON payloads (and then emits HTML). Backends are typically FastAPI with Pydantic payload parsing.

An issue I run into is where an endpoint expects a list of values in JSON, but validating that with list[str] in Pydantic fails when only a single form field is passed. A trendy example:

<form hx-post="/query" hx-ext="json-enc">
    <label>Prompt <input type="text" name="prompt"></label>
    <label>GPT-4.5 <input type="checkbox" name="models" value="gpt-4.5"></label>
    <label>Claude Opus <input type="checkbox" name="models" value="claude-3-opus-20240229"></label>
    <button type="submit">Ask</button>
</form>

from fastapi import FastAPI
from pydantic import BaseModel

class LLMQuery(BaseModel):
    prompt: str
    models: list[str]

app = FastAPI()

@app.post("/query")
async def call_llms(payload: LLMQuery):
    assert payload.models == ["gpt-4.5"], "payload.models == str('gpt-4.5')"
    cash_money(payload)

---

This works fine if multiple checkboxes are checked, the parameters in htmx:requestConfig will be {models: ['gpt-4.5', 'claude-3-opus-20240229']}. If one checkbox is checked, you'll get {models: 'gpt-4.5'}.

I understand this is entirely a HTML forms thing. My workarounds for this are one of:

1. Client-side, borrow from PHP and suffix checkbox fields with fieldname[], and tweak json-enc to convert those to lists:

   onEvent: function (name, evt) {
       if (name === "htmx:configRequest") {
           evt.detail.headers['Content-Type'] = "application/json";
   
           // hackery - convert parameters ending with [] to lists
           for (const [key, value] of Object.entries(evt.detail.parameters)) {
               if (key.endsWith("[]")) {
                   delete evt.detail.parameters[key];
                   evt.detail.parameters[key.slice(0, -2)] = [value];
               }
           }
       }
   },

2. Do a similar thing server-side, with a middleware (like this one I wrote]
3. Use a custom list type in Pydantic that coerces scalars to a list of that scalar.

---

All this to avoid workarounds for x-www-urlencoded and multipart. Does anyone have any ideas or better ways of doing this?

I was thinking of converting my middleware to a htmx extension if that would be useful to anyone - if anyone knows of a JS package that does similar hydration that would be appreciated!

[andryyy]

I see you are using BaseModel, so my approach would be something like this:

models: Annotated[str | list, AfterValidator(lambda x: x if isinstance(x, list) else [x])]

A custom attribute like "data-strict-list" on an HTML element and a small extension would also work.

I’d use the AfterValidator. :)