Custom template for checkbox/boolean and select

[brampurnot]

Prerequisites

• I have read the documentation

What theme are you using?

core

What is your question?

Hi all,

I'm trying to implement custom templates since we are using tailwinds and headless components. I have noticed that the standard BaseInputTemplate is not working for checkboxes/booleans. Also, there doesn't seem to be a custom template for select elements.

Am I missing something in the documentation or am I right in saying that this is not supported?

Thanks,
Bram

[aularon]

I believe this is doable natively by passing the custom field/widget implementation to uiSchema. Below is a working solution using rjsf-layout however.
(You can extract the inline component to make it reusable)

demo.mp4

"use client";
import Form, { JSONSchemaObject } from "rjsf-layout";
import validator from "@rjsf/validator-ajv8";

const listItems = ["a", "b", "c"] as const;
const schema = {
  type: "object",
  properties: {
    isChosen: {
      type: "boolean",
    },
    chosenItem: {
      type: "string",
      enum: listItems,
    },
  },
} as const satisfies JSONSchemaObject;

export const CustomFields = () => (
  <Form {...{ schema, validator }} formData={{}}>
    {({ IsChosen, ChosenItem, formData }) => (
      <>
        <table>
          <tbody>
            <tr>
              <th>boolean field:</th>
              <td>
                <IsChosen>
                  {/* First inline component that handles boolean values */}
                  {({ $isChosen, setIsChosen }) => (
                    <button
                      className={$isChosen ? "active" : ""}
                      onClick={() => setIsChosen(!$isChosen)}
                    >
                      {$isChosen ? "Chosen" : "NOT chosen!"}
                    </button>
                  )}
                </IsChosen>
              </td>
            </tr>
            <tr>
              <th>list field:</th>
              <td>
                <ChosenItem>
                  {/* Second inline component that handles the items list */}
                  {({ $chosenItem, setChosenItem }) =>
                    listItems.map((item) => (
                      <button
                        key={item}
                        className={item === $chosenItem ? "active" : ""}
                        onClick={() => setChosenItem(item)}
                      >
                        {item}
                      </button>
                    ))
                  }
                </ChosenItem>
              </td>
            </tr>
          </tbody>
        </table>
        <pre>{JSON.stringify(formData)}</pre>
        <style
          dangerouslySetInnerHTML={{
            __html: "button.active{background: darkblue;color:white}",
          }}
        ></style>
      </>
    )}
  </Form>
);

[heath-freenome]

@brampurnot Have you checked out the documentation around using custom widgets? Checkboxes and booleans are in fact not using the BaseInputTemplate as you can see from the implementation of BooleanField. It seems what you are really wanting is a new custom theme. I would look at how the existing themes are built on top of the core library

[brampurnot]

Thanks for responses. Custom widgets are indeed the way to do it.