DaisyUI v4

v4v5

Installation

npm

npm i @sjsf/basic-theme@next @sjsf/daisyui-theme@next

yarn

yarn add @sjsf/basic-theme@next @sjsf/daisyui-theme@next

pnpm

pnpm add @sjsf/basic-theme@next @sjsf/daisyui-theme@next

bun

bun add @sjsf/basic-theme@next @sjsf/daisyui-theme@next

Install daisyUI

Install daisyUI as a Tailwind CSS plugin

Setup styles

There is two ways to setup styles:

1. Use tailwindcss config

import daisyui from 'daisyui';
import { THEME_CONTENT } from '@sjsf/daisyui-theme/preset'

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}', THEME_CONTENT],
  plugins: [daisyui],
}

2. Inject prepared styles (not recommended)

// Inject them as you like
import daisyStyles from "@sjsf/daisyui-theme/styles.css?inline";

Extra widgets

• checkboxes
• date-picker
• file
• multi-select
• radio-buttons
• radio
• range
• switch
• textarea

Widgets demo

Form

JSON Schema

{
  "type": "object",
  "properties": {
    "checkbox": {
      "type": "object",
      "properties": {
        "default": {
          "type": "boolean"
        },
        "error": {
          "type": "boolean"
        }
      }
    },
    "checkboxes": {
      "type": "object",
      "properties": {
        "default": {
          "type": "array",
          "items": {
            "type": "string",
            "enum": [
              "foo",
              "bar",
              "fuzz",
              "qux"
            ]
          },
          "uniqueItems": true
        },
        "error": {
          "type": "array",
          "items": {
            "type": "string",
            "enum": [
              "foo",
              "bar",
              "fuzz",
              "qux"
            ]
          },
          "uniqueItems": true
        }
      }
    },
    "file": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "format": "data-url"
        },
        "error": {
          "type": "string",
          "format": "data-url"
        }
      }
    },
    "multiFile": {
      "type": "object",
      "properties": {
        "default": {
          "type": "array",
          "items": {
            "type": "string",
            "format": "data-url"
          }
        },
        "error": {
          "type": "array",
          "items": {
            "type": "string",
            "format": "data-url"
          }
        }
      }
    },
    "number": {
      "type": "object",
      "properties": {
        "default": {
          "type": "number"
        },
        "error": {
          "type": "number"
        }
      }
    },
    "select": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        },
        "error": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        }
      }
    },
    "text": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      }
    },
    "datePicker": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      }
    },
    "multiSelect": {
      "type": "object",
      "properties": {
        "default": {
          "type": "array",
          "items": {
            "type": "string",
            "enum": [
              "foo",
              "bar",
              "fuzz",
              "qux"
            ]
          },
          "uniqueItems": true
        },
        "error": {
          "type": "array",
          "items": {
            "type": "string",
            "enum": [
              "foo",
              "bar",
              "fuzz",
              "qux"
            ]
          },
          "uniqueItems": true
        }
      }
    },
    "radioButtons": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        },
        "error": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        }
      }
    },
    "radio": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        },
        "error": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        }
      }
    },
    "range": {
      "type": "object",
      "properties": {
        "default": {
          "type": "number"
        },
        "error": {
          "type": "number"
        }
      }
    },
    "switch": {
      "type": "object",
      "properties": {
        "default": {
          "type": "boolean"
        },
        "error": {
          "type": "boolean"
        }
      }
    },
    "textarea": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      }
    }
  }
}

UI Schema

{
  "checkbox": {
    "default": {},
    "error": {}
  },
  "checkboxes": {
    "default": {},
    "error": {}
  },
  "file": {
    "default": {},
    "error": {}
  },
  "multiFile": {
    "default": {},
    "error": {}
  },
  "number": {
    "default": {},
    "error": {}
  },
  "select": {
    "default": {},
    "error": {}
  },
  "text": {
    "default": {},
    "error": {}
  },
  "datePicker": {
    "default": {
      "ui:components": {
        "textWidget": "datePickerWidget"
      }
    },
    "error": {
      "ui:components": {
        "textWidget": "datePickerWidget"
      }
    }
  },
  "multiSelect": {
    "default": {
      "ui:components": {
        "checkboxesWidget": "multiSelectWidget"
      }
    },
    "error": {
      "ui:components": {
        "checkboxesWidget": "multiSelectWidget"
      }
    }
  },
  "radioButtons": {
    "default": {
      "ui:components": {
        "selectWidget": "radioButtonsWidget"
      }
    },
    "error": {
      "ui:components": {
        "selectWidget": "radioButtonsWidget"
      }
    }
  },
  "radio": {
    "default": {
      "ui:components": {
        "selectWidget": "radioWidget"
      }
    },
    "error": {
      "ui:components": {
        "selectWidget": "radioWidget"
      }
    }
  },
  "range": {
    "default": {
      "ui:components": {
        "numberWidget": "rangeWidget"
      }
    },
    "error": {
      "ui:components": {
        "numberWidget": "rangeWidget"
      }
    }
  },
  "switch": {
    "default": {
      "ui:components": {
        "checkboxWidget": "switchWidget"
      }
    },
    "error": {
      "ui:components": {
        "checkboxWidget": "switchWidget"
      }
    }
  },
  "textarea": {
    "default": {
      "ui:components": {
        "textWidget": "textareaWidget"
      }
    },
    "error": {
      "ui:components": {
        "textWidget": "textareaWidget"
      }
    }
  }
}