Skip to content
svelte-jsonschema-form
Playground

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 type { Snippet } from "svelte";


  import { fromRecord } from "@sjsf/form/lib/resolver";


  import MyForm from "@/components/my-form.svelte";


  const { children }: { children: Snippet } = $props();
</script>


<MyForm
  schema={{
    title: "With icons",
  }}
  icons={fromRecord({
    submit: children,
  })}
/>

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

Terminal window
npm i @sjsf/form@next @sjsf/lucide-icons@next

Usage

<script lang="ts">
  import { createForm } from '@sjsf/form';
  import { icons } from '@sjsf/lucide-icons';


  const form = createForm({
    icons,
    ...
  })
</script>

Terminal window
npm i @sjsf/form@next @sjsf/moving-icons@next

Usage

<script lang="ts">
  import { createForm } from '@sjsf/form';
  import { icons } from '@sjsf/moving-icons';


  const form = createForm({
    icons,
    ...
  })
</script>

Terminal window
npm i @sjsf/form@next @sjsf/flowbite-icons@next

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 { createForm } from '@sjsf/form';
  import { icons } from '@sjsf/flowbite-icons';


  const form = createForm({
    icons,
    ...
  })
</script>

Terminal window
npm i @sjsf/form@next @sjsf/radix-icons@next

Usage

<script lang="ts">
  import { createForm } from '@sjsf/form';
  import { icons } from '@sjsf/radix-icons';


  const form = createForm({
    icons,
    ...
  })
</script>