Skip to content
svelte-jsonschema-form
Playground

Labels and icons

Translation

One of the mandatory components of a form is translate. You can see its use in various places in the form (various buttons and labels).

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

  • en
  • ru
Translation API reference

Icons

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

<script lang="ts">
  import type { Snippet } from "svelte";
  import { type Schema, SimpleForm } from "@sjsf/form";


  import { useCustomForm } from "@/components/custom-form";


  const { children }: { children: Snippet } = $props();


  const schema: Schema = {
    title: "With icons",
  };


  const form = useCustomForm({
    schema,
    icons: {
      submit: children
    }
  });
</script>


<SimpleForm {form} />

Icons API reference

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

Lucide icons

Installation:

Terminal window
npm i @sjsf/lucide-icons

Usage:

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


  const form = useForm2({
    icons
  })
</script>

Playground

Flowbite icons

Installation:

Terminal window
npm i @sjsf/flowbite-icons

Add icons content to a 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 { useForm2 } from '@sjsf/form';
  import { icons } from '@sjsf/flowbite-icons';


  const form = useForm2({
    icons
  })
</script>

Playground

Radix icons

Installation:

Terminal window
npm i @sjsf/radix-icons

Usage:

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


  const form = useForm2({
    icons
  })
</script>

Playground