Skip to content
svelte-jsonschema-form v3
PlaygroundForm Builder

Labels and icons

Translation

Section titled “Translation”

A required component of the form is translate, which is used in multiple places, including buttons and labels.

Translations are imported from @sjsf/form/translations/{locale}, currently supported locales:

  • en
  • ru
Translation API reference

Icons

Section titled “Icons”

Text is good, but you can do better by adding icons!

<script lang="ts">
  import Send from "@lucide/svelte/icons/send";
  import { SimpleForm } from "@sjsf/form";
  import { fromRecord } from "@sjsf/form/lib/resolver";

  import * as defaults from "$lib/sjsf/defaults";

</script>

<SimpleForm
  {...defaults}
  schema={{
    title: "With icons",
    type: "null",
  }}
  icons={fromRecord({
    submit,
  })}
/>

{#snippet submit()}
  Submit <Send size={12} />
{/snippet}

There are also ready-made sets of icons for the control buttons.

Terminal window
npm i @sjsf/flowbite-icons

Add icons content to the tailwindcss config:

import { FLOWBITE_ICONS_CONTENT } from "@sjsf/flowbite-icons/preset";


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

Usage

<script lang="ts">
  import { type Schema, SimpleForm, type UiSchemaRoot } from "@sjsf/form";
  import type { FromSchema } from "json-schema-to-ts";

  import * as defaults from "$lib/sjsf/defaults";

  const schema = {
    type: "object",
    properties: {
      array: {
        type: "array",
        items: {
          type: "number",
        },
      },
    },
    additionalProperties: {
      type: "string",
    },
  } as const satisfies Schema;

  const uiSchema: UiSchemaRoot = {
    array: {
      "ui:options": {
        copyable: true,
      },
    },
  };

  type Model = FromSchema<typeof schema>;

  const initialValue: Model = {
    array: [1, 2, 3],
    foo: "bar",
    baz: "quz",
  };
</script>

<SimpleForm {...defaults} {schema} {uiSchema} {initialValue} />
Terminal window
npm i @sjsf/lucide-icons

Usage

<script lang="ts">
  import { type Schema, SimpleForm, type UiSchemaRoot } from "@sjsf/form";
  import type { FromSchema } from "json-schema-to-ts";

  import * as defaults from "$lib/sjsf/defaults";

  const schema = {
    type: "object",
    properties: {
      array: {
        type: "array",
        items: {
          type: "number",
        },
      },
    },
    additionalProperties: {
      type: "string",
    },
  } as const satisfies Schema;

  const uiSchema: UiSchemaRoot = {
    array: {
      "ui:options": {
        copyable: true,
      },
    },
  };

  type Model = FromSchema<typeof schema>;

  const initialValue: Model = {
    array: [1, 2, 3],
    foo: "bar",
    baz: "quz",
  };
</script>

<SimpleForm {...defaults} {schema} {uiSchema} {initialValue} />
Terminal window
npm i @sjsf/moving-icons

Usage

<script lang="ts">
  import { type Schema, SimpleForm, type UiSchemaRoot } from "@sjsf/form";
  import type { FromSchema } from "json-schema-to-ts";

  import * as defaults from "$lib/sjsf/defaults";

  const schema = {
    type: "object",
    properties: {
      array: {
        type: "array",
        items: {
          type: "number",
        },
      },
    },
    additionalProperties: {
      type: "string",
    },
  } as const satisfies Schema;

  const uiSchema: UiSchemaRoot = {
    array: {
      "ui:options": {
        copyable: true,
      },
    },
  };

  type Model = FromSchema<typeof schema>;

  const initialValue: Model = {
    array: [1, 2, 3],
    foo: "bar",
    baz: "quz",
  };
</script>

<SimpleForm {...defaults} {schema} {uiSchema} {initialValue} />
Terminal window
npm i @sjsf/radix-icons

Usage

<script lang="ts">
  import { type Schema, SimpleForm, type UiSchemaRoot } from "@sjsf/form";
  import type { FromSchema } from "json-schema-to-ts";

  import * as defaults from "$lib/sjsf/defaults";

  const schema = {
    type: "object",
    properties: {
      array: {
        type: "array",
        items: {
          type: "number",
        },
      },
    },
    additionalProperties: {
      type: "string",
    },
  } as const satisfies Schema;

  const uiSchema: UiSchemaRoot = {
    array: {
      "ui:options": {
        copyable: true,
      },
    },
  };

  type Model = FromSchema<typeof schema>;

  const initialValue: Model = {
    array: [1, 2, 3],
    foo: "bar",
    baz: "quz",
  };
</script>

<SimpleForm {...defaults} {schema} {uiSchema} {initialValue} />