Flowbite

Installation

npm

npm i @sjsf/form @sjsf/flowbite-theme

yarn

yarn add @sjsf/form @sjsf/flowbite-theme

pnpm

pnpm add @sjsf/form @sjsf/flowbite-theme

bun

bun add @sjsf/form @sjsf/flowbite-theme

Install Flowbite Svelte

Quickstart - Flowbite Svelte

Setup styles

There is two ways to setup styles:

1. Tailwind configuration

import flowbite from 'flowbite/plugin';
import { THEME_CONTENT, FLOWBITE_CONTENT } from '@sjsf/flowbite-theme/preset'

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

2. Inject prepared styles (not recommended)

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

Additional widgets

• toggle

Demo

Form.svelte

<script lang="ts">
  import { theme } from "@sjsf/flowbite-theme";

  import { astroTheme } from "@/theme.svelte";
  import CustomForm from "@/components/custom-form.svelte";

  import { schema, uiSchema } from "./_demo-schema";

  const astro = astroTheme();

  let value = $state();
</script>

<CustomForm
  {...theme}
  bind:value
  {schema}
  {uiSchema}
  novalidate
  onSubmit={console.log}
  class="flex flex-col gap-4 mb-4 {astro.darkOrLight}"
/>

<pre>{JSON.stringify(value, null, 2)}</pre>

_demo-schema.ts

import type { Schema, UiSchemaRoot } from "@sjsf/form";

export const schema: Schema = {
  type: "object",
  title: "Demo schema",
  properties: {
    checkbox: {
      type: "boolean",
    },
    number: {
      type: "number",
      minimum: 5,
    },
    range: {
      type: "integer",
    },
    text: {
      type: "string",
    },
    textarea: {
      type: "string",
    },
    file: {
      type: "string",
      format: "data-url",
    },
    select: {
      type: "string",
      enum: ["one", "two", "three"],
    },
    multiSelect: {
      type: "array",
      items: {
        type: "string",
        enum: ["one", "two", "three"],
      },
      uniqueItems: true,
    },
    radio: {
      type: "string",
      enum: ["one", "two", "three"],
    },
    checkboxes: {
      type: "array",
      items: {
        type: "string",
        enum: ["one", "two", "three"],
      },
      uniqueItems: true,
    },
    array: {
      type: "array",
      items: {
        type: "string",
      },
    }
  },
  additionalProperties: {
    type: "integer",
  }
};

export const uiSchema: UiSchemaRoot = {
  range: {
    "ui:options": {
      "input": {
        type: "range",
      }
    }
  },
  textarea: {
    "ui:widget": "textarea",
  },
  radio: {
    "ui:widget": "radio",
  },
  checkboxes: {
    "ui:widget": "checkboxes",
  }
}